如何使用 data-testid 属性选择定位器的第 n 个元素

Question

如何使用 data-testid 属性选择 css 定位器的第 n 个元素？我正在使用 cypress 但不能使用 eq([index]) 方法。（xpath 不是一个选项）

示例定位器，它是一个列表，我有多个带有 data-testid="frame" 的元素：

<div data-component="layout" data-testid="frame" class="tzhgczFPvds">TEST</div>

我需要使用定位器（sourceitem、targetitem）的示例代码：

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem', options)
  })
})

谢谢

Answer 1

.eq(n)可以通过在选择器内部移动来查询第 n 个元素。

这:eq()是一个 jQuery 选择器语法，相当于cy.get(selector).eq(2)

cy.get(`div.sourceitem:eq(2)`)          -- drop 3rd source
  .drag('.targetitem:eq(4)', options)   -- to 5th target

参考：eq() 选择器

描述: 选择匹配集合中索引为 n 的元素

它在 Cypress 命令使用的任何选择器中都有效。