Cypress で対象セレクタが複数ある中から任意のセレクタを選ぶ方法とその際の注意点

結論

  • cy.get('.foobar').eq(3) のように、get したあとに eq で取得できる
  • 注意点として、get の戻り値を変数に格納している場合、eq を実行してしまうと格納した変数のオブジェクトは変更される
    • シャローコピーになるということ

具体例

以下のような HTML があったとします。

<html>
  <head></head>
  <body>
    <div class="foobar">1</div>
    <div class="foobar">2</div>
    <div class="foobar">3</div>
    <div class="foobar">4</div>
    <div class="foobar">5</div>
  </body>
</html>

4つ目のセレクタを得たい場合には次のように get してから eq で取得します。

cy.get('.foobar').eq(3)

注意点

1. selectors

上記の例において、5つのセレクタのオブジェクトを以下のように selectors に格納したとします。

const selectors = cy.get('.foobar')

この個数をチェックすると、確かに5つです。

selectors.should('have.length', 5) // true

2. selectors.eq

ここで例えば3つ目のセレクタを抽出するために selectors に対して eq メソッドを以下のように実行したとします。

const thirdSelector = selectors.eq(2)

この後に selectors の個数をチェックすると「1つ」になっています(「5つ」ではない)。

selectors.should('have.length', 5) // false

3. エラーメッセージ

エラーメッセージは次のとおりです。

AssertionError: Timed out retrying after 4000ms: Not enough elements found. Found '1', expected '5'.
+ expected - actual

-1
+5

4. その他の場合でもエラーが出ることがある

上記の場合以外でもエラーが出ることがあります*1。したがって、無用なハマりを防ぐためにも変数に格納することは控えたほうがいいでしょう。

補足

as を使うべき、という意味でもあるのでしょう。

docs.cypress.io

*1:たとえば .find でチェーンするときなど

Powered by はてなブログ