Cypress で aria-label を使う

E2E テスト・結合テストによく使われる Cypress ですが、どういうふうにやれば記述しやすくなるのか？たとえば、QA の人が、自分たちの作業を楽にするために簡単に記述できれば理想形です。

そこで今回は、Cypress で、要素を指定するためにアクセシビリティ用のデータを使うというのを試してみました。

もともとは Puppeteer と ARIA Handler | Medium という記事を読んで以来、ずっと頭の片隅に引っかかっていたものです。

アクセシビリティ用のデータを使うことで、ユビキタス言語を使って、要素を選択できるというのはプロジェクトにとってはとても有益です。

今回は aria-label を指定するというやり方にしました。

aria-label

• aria-label 属性の使用 - アクセシビリティ | MDN

aria-label 属性は、現在の要素にラベル付けする文字列を定義するために使用されます。 これはテキストラベルが画面に表示されない場合に使用します。 要素にラベル付けする目に見えるテキストがある場合は、代わりに aria-labelledby を使用します。

aria-labelledby を使うほうが、重複を減らせられそうですが、いつでも一対一でラベリング用のテキストがあるとは限らないので、今回は aria-label としました。

<button aria-label="閉じる">X</button>

MDN では、このようなボタンが説明されています。実際には X という文字ではなくて、SVG アイコンなりを使っていることでしょう。画像の場合 alt ラベルもありますが aria-label を使うというように定義してしまうことで、Cypress の方から探しやすくなるという利点があります。

<input type="text" aria-label="氏名の名字" ...>

文字入力フィールドであれば、このような定義になるでしょう。

Cypress で aria-label を指定する

context("ユーザー情報登録画面", () => {
  beforeEach(() => {
    cy.visit("/....")
  })

  it("氏名の名字", () => {
    cy.get('[aria-label="氏名の名字"]').clear()
    cy.get('[aria-label="氏名の名字"]').should('have.value', '')

    cy.get('[aria-label="氏名の名字"]').type('山田')
    cy.get('[aria-label="氏名の名字"]').should('have.value', '山田')
  });
}

ユーザー情報登録画面にある 氏名の名字 とラベルされた入力欄に、文字列を入力できるということをテストしています。
テスト対象では <input type="text" aria-label="氏名の名字" ...> のようなコードが書かれていて、この aria-label がユニークになることを前提としています。

このやり方の利点は、スクリーンリーダーを使う人なら、自分の耳で聞くのと同じ言葉を、そのままテストに使えることです。

これが <input type="text" id="lastname"> のようなコードをテストしようとすると、セレクタに lastname という、画面上に存在しない ID 文字列を指定しなければなりませんがあまり良いテストだとは言えません。

aria-label にユビキタス言語を指定する、というルールを徹底さえしておけば、Cypress によるテストもその恩恵に預かることができます。

おまけ

文字を使ったボタンであれば、そのボタンの文言をそのまま使えばいいと思います。

it('「ユーザーを作成する」をクリックするとユーザー情報登録画面に遷移する', () => {
  cy.get('button').contains('ユーザーを作成する').click()
  cy.title().should('eq', 'ユーザー情報登録画面')
})

ここでは遷移先の識別を title で行っています。