結論
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
を使うべき、という意味でもあるのでしょう。
*1:たとえば .find でチェーンするときなど