Cypress 基礎: 要素を特定して、その要素数を数える

はじめに

最近、Cypress で E2E テストを書いている kimizuy です。

今回は Cypress の基礎として「要素を特定して、その要素数を数える方法」をご紹介します。

tldr

Material-UI を使ったプロジェクトを元にしているため Mui~ で始まるクラスでのサンプルを示します。

次の順序で要素を取得し要素数を数えます。

1. MuiChip-root クラスを持つ DOM 要素を取得する
2. 1 で取得した要素から MuiChip-label クラスと「Hello World」の文字列を含む要素を取得する
3. 要素から length プロパティ（つまり要素数）を取得する
4. 3 で取得した値と指定した数が等しいことをチェックする

      cy.get(".MuiChip-root")
        .find(".MuiChip-label:contains('Hello World')")
        .its("length")
        .should("eq", 1)

また its("length") を省略して should("have.length", 1) に置き換えて書くこともできます。

      cy.get(".MuiChip-root")
        .find(".MuiChip-label:contains('カテゴリ: 掘削')")
        .should("have.length", 1)

各 API をざっくり解説

get()

cy.root（ほとんどの場合 document 要素）から特定の DOM 要素を取得します。

上記の例では MuiChip-root クラスを持つ要素の取得です。

他にも HTML タグ、クラスセレクタ、属性などを指定することで特定の要素を取得できます。

// input 要素を取得する
cy.get("input")

// list クラスを持つ li 要素を取得する
cy.get(".list > li")

// role 属性が button の要素を取得する
cy.get("[role=button]")

find()

get() で取得した要素からさらに条件を指定して要素を取得（検索）します。

get() と動きは似ていますが cy.find() のように chain させて書くことはできません。

get() と find() を組み合わせることで、適切に要素を取得できます。

// NG
// 再度、document 要素から td 要素を取得するので適切に絞り込めていない
cy.get("table").eq(0).get("td")

// OK
// ひとつ目の table 要素から td 要素を取得する
cy.get("table").eq(0).find("td")

its()

取得されたサブジェクト（DOM 要素・オブジェクト・配列など）からプロパティを取得します。

tldr では length プロパティを取得しました。これは get() や find() で取得した複数の要素が配列で返却されるからです。

例: get() や find() した結果、取得できた要素が 2 つの場合です（コンソールに表示できます）。

Yielded:
(2) [span.MuiChip-label.WithStyles(ForwardRef(Chip))-label-692, span.MuiChip-label.WithStyles(ForwardRef(Chip))-label-692]

should()

アサーションを定義します。tldr では length プロパティの値が 1 であることをチェックしました。

be.~ や have.~ といった Chainers を利用すると簡潔に書けます。

// チェックボックスが disabled になっていること
cy.get(':checkbox').should('be.disabled')

// <li.selected> は 3 つであること
cy.get('li.selected').should('have.length', 3)

// disabled の状態でないこと
cy.get('form').find('input').should('not.have.class', 'disabled')

// 'foo bar baz' の値を持つこと
cy.get('textarea').should('have.value', 'foo bar baz')

さいごに

本記事では Cypress の基本的な使い方を API を解説しつつ紹介しました。

Cypress は開発テストの負荷を軽減できるフロントエンドエンジニアの強力な味方です。さらに詳しくなってより複雑なテストにも挑戦したいですね。

以上、本記事が誰かの助けになれば幸いです。