Cypress にて「ある要素が持つテキストを配列として取得してその内容をテストする」方法

前提

以下のような HTML があるとして、この4つの文字列を配列として扱い、期待通りであるかどうかをチェックするテストを書きたいとします。

<div class="hoge fuga">ああああ</div>
<div class="hoge fuga">いいいい</div>
<div class="hoge fuga">うううう</div>
<div class="hoge fuga">ええええ</div>

結論

jQuery のメソッドを使います*1。

具体的には以下のようになります。

    // jQuery のオブジェクトであることが分かるように、変数名の先頭に $ を付けるのが慣習のようだ
    cy.get('.hoge.fuga').then(($hoge_fuga_elements) => {
      const texts = $hoge_fuga_elements.map((_index, item) => {
        // 各要素に対して jQuery の text() を実行している
        return Cypress.$(item).text()
      })

      // jQuery オブジェクトのラップを外して、単なる文字列が要素となる Array にする
      const gotTexts = texts.get()

      const expectedTexts = [
        'ああああ',
        'いいいい',
        'うううう',
        'ええええ',
      ]

      // Cypress のオブジェクトではないので expect を用いて比較している（そして配列なので deep.equal する）
      expect(gotTexts).to.deep.equal(expectedTexts)
    })
  })
})

補足

• Cypress では、操作対象のオブジェクトが Cypress のオブジェクト*2なのか、jQuery のオブジェクトなのか、それ以外なのか、を意識することが大切なようです
  • それによってマッチャの選択も変わります
  • then や each などのコールバック関数内では注意が必要です
  • Cypress のオブジェクトに引き戻してやるには wrap メソッドでラップしてあげます
• コンポーネントのテストも可能になったことで、ここらへんの仕様は今後重要になりそうです

*1:そのために "Cypress.$" を用いています https://docs.cypress.io/api/utilities/$

*2:この表現は正確でないかもしれない