Cypress でよく使うメソッド

詳細は全てリンク先の公式ドキュメントに書いてあるので、そちらを見るのが確実です。複数の引数を取る場合にいろいろと柔軟な挙動を実現できたりします。

よく使うメソッド

should

マッチャ（を第一引数に取る）用のメソッドです。

describe('Foo', () => {
  it('Bar', () => {
    cy.visit('/')

    cy.url().should('equal', 'http://localhost:3100/')
  })
})

第一引数に取るマッチャ（Chainers）の値は例えば以下のような値です。

equal
not.equal
contain
not.contain
be.visible
have.css
not.have.value
have.class
have.id
have.attr

docs.cypress.io

get

要素を取得するためにまずはこれです。

describe('Foo', () => {
  it('Bar', () => {
    cy.visit('/')

    cy.get('title').should('have.text', 'タイトルタグの内容')
  })
})

docs.cypress.io

find

要素を取得します。

get との違いは、get が常に root から要素をたどる一方で、find はレシーバを起点に要素をたどる点です。

そのため cy.find のように、cy をレシーバにすることはできません*1。

cy.get('#parent').find('li')

docs.cypress.io

contains

要素を取得します。findと同等ですが、正規表現が使えます。また、cy をレシーバに取ることができます。

正規表現を用いない場合は「その文字列が含まれる」という判定基準で要素を取得します*2。半角スペースの扱いなどで注意点があるので、公式ドキュメントの一読を推奨します。

cy.contains('ul', /^b\w+/)

docs.cypress.io

then

Promise の then ほぼそのまんまです。get や find で要素を絞り込み、その要素に対して何かしたい、というときに使います。

たとえば、cy.get('div') の 7つ目の要素をテストしたい場合、以下のように変数に格納してからテストすることはできません。

const divElementsSeventh = cy.get('div')[6]

なので、then でチェーンしてテストします。

一つ注意する点は、コールバック関数内で Cypress のコマンドを適用させるためには wrap でくるむ必要が有ることです*3。

describe('Foo', () => {
  it('Bar', () => {
    cy.visit('/')

    cy.get('div').then(($divElement) => {
      cy.wrap($divElement.eq(6)).should('have.text', 'Hello, World!')
    })
  })
})

その他のメソッドについて

公式ドキュメントを一日かけて読み通すと良いと思います*4。急がば回れです。

docs.cypress.io

Chainer については Common Assertions をとにかく読み込む

この Common Assertions を何度も読みながら、実際に書いてみて値を変えてみたりするのが一番初期導入が速そうです。

docs.cypress.io

FAQ のドキュメントもおすすめ

FAQ のドキュメントは一読しておくと Tips が得られますのでこれも数時間費やして読んだほうが良いです。

docs.cypress.io

jQuery との関係

jQuery でラップするコマンドがあるので*5、ラップしたオブジェクトに対しては jQuery のメソッドである text() などを用いることができます。さらに chai の expect などを用いることもできます*6。

Cypress の世界に引き戻すためには wrap してやる必要があります。

*1:cy.root().find とすれば find を使えるが、それならば get を使うよねという話

*2:完全一致ではない

*3:ここはハマりそう。なので、分かりやすくするため、引数名には "$" を先頭につけるのが慣習っぽい

*4:Commands だけでなく Assertions とかも

*5:Cypress.$ など

*6:cy.log で出力して確認するときに使うデバッグ用という感じがしてます