cypressの環境構築
プロジェクトフォルダ内でnpm initする
npm init -y
cypressをインストール
npm install cypress -save-dev
cypressができているか確認する
cypress -v
インストールに成功している場合はバージョンが表示され、プロジェクトフォルダの中にcypressというディレクトリが作られている。まだ中身のフォルダが作られていないので以下を実行。
npx cypress open
GUIが開き、以下のフォルダが表示される。
- cypress
- fixtures
- integration
- plugins
- support
- commands.js
- index.js
このようになった時点で、cypressにはmochaとchaiが自動的にバンドルされている。
各ディレクトリの説明
fixtures
テストデータを管理する
integration
テスト実行用のファイルを管理する
plugins
cypressの内部的な振る舞いの拡張や修正
support
command.jsには何度も使うコードをカスタムコマンドにして管理する
index.jsは各テストファイルの前に実行される
cypressの基本コマンド
URLのページを開く
cy.visit('URL')
HTTPS通信か確認する
cy.location('protocol').should('contain', 'HTTPS')
ホストネームを確認する
cy.location('hostname').should('eq', 'qiita.com')
https://docs.cypress.io/api/commands/location#Command-Log
前のページに戻る
cy.go(-1)
cy.go('back')
次のページに遷移する
cy.go(1)
cy.go('forward')
ページの再読み込みをする
cy.reload()
エレメントを取得する
cy.get()
例)
HTMLタグと属性: cy.get('input[name="email"]')
クラス: cy.get('.q')
HTMLタグ: cy.get('input')
特定の文字列を含むエレメントを取得する
cy.contains('text')
textを含むエレメントを取得する
文字列を入力する
cy.get().type('text')
cy.get().type('text{enter}')
取得したエレメントに文字列を入力してエンターキーを押す
cy.get().clear()
取得したエレメントのテキストボックスの文字列をクリアする
cy.get().type('Text', force: true})
desabledになっているテキストボックスを取得して強制的に入力する
cy.get().first()
取得したエレメント中、最初のエレメントを取得する
cy.get().eq(n)
取得したエレメント中、n番目のエレメントを取得する
cy.get().last()
取得したエレメント中、最後のエレメントを取得する
cy.get().filter()
特定のセレクタにマッチしたエレメントを取得する
https://docs.cypress.io/api/commands/filter#Selector
要素をクリックする
cy.get().click()
取得したエレメントをクリックする
cy.get().click({force: true})
様々な状況によクリック時にエラーを起き、テストの進行の妨げとなることがある。その場合はforce: trueで強行実行する。
cy.get().dblclick()
取得したエレメントをダブルクリックする
cy.get().click({multiple: true})
取得した複数のエレメントをまとめてクリックする
ドロップダウンメニューの項目を操作する
cy.get().select()
ドロップダウンのメニューから単数選択する
cy.get().select(['A', 'B', 'C'])
ドロップダウンのメニューを複数選択する
ラジオボタンを操作する
cy.get().check()
チェックボックスの項目にチェックする
cy.get().unckeck()
チェックボックスのチェックを外す
cy.get().first().check()
チェックボックスの最初の項目にチェックする
fixtureでテストデータを管理する
JSON形式でテストデータを用意する
fixture/userdetails.json
{
"email": "xxxxxxxx@gmail.com",
"password": "password"
}
cy.ficture('login/userdetails.json')
.then(logindata => {
this.logindata = logindata
})
});
cy.get('#user_email').type(this.logindata.email)
xpathでエレメントを操作する
cypressはデフォルトではCSSセレクタでのエレメント取得をサポートしており、xpathはサポートしていない。xpathで取得するにはcypress xpathプラグインをインストールする。
npm install cypress-xpath
加えて、index.jsに以下を追記する
import 'cypress-xpath'
エレメントをxpathで取得する場合には以下のように記載。
cy.xpath()
Cypressのプラグインはここから確認できる。
https://docs.cypress.io/plugins/directory
カスタムコマンドを作る
suppotのcommands.jsに繰り返し使いたいコードを書く。
Cypress.commands.addにコマンドを加える。
support/commands.js
Cypress.Commands.add('login', (email, password) => {
cy.visit("users/sign_in")
cy.get('.new_user> .btn').click()
})
integration/login.js
it('working with fixture', function(){
cy.login(this.logindata.email, this.logindata.password)
})