Cypress入門

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": "[e-mail]",
  "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)
})