如何在 v-for 循环中使用 data-cy答案

【问题标题】：How to use data-cy in v-for loop如何在 v-for 循环中使用 data-cy
【发布时间】：2020-10-19 14:36:29
【问题描述】：

我正在尝试使用data-cy 来检查文本的标题，但由于它使用v-for，cypress 测试无法找到文本，而是给出一个失败的测试，因为它无法找到完全匹配。

it('first line contain heading', ()=>{
    cy.visit('http://localhost:8080/')
    cy.get('[data-cy="book-heading"]')
      .invoke('text')
      .should('equal', 'In Search of Lost Time')
})

如何使用 cypress 获取正确的文本？

【问题讨论】：

您能否将错误的屏幕截图与 Dom 的屏幕截图一起发布？
@AlapanDas 我已经用错误和截图更新了问题。

标签： vue.js cypress

【解决方案1】：

这应该可行。

it('first line contain heading', () => {
   cy.visit('http://localhost:8080/')
   cy.get('[data-cy="book-heading"]').contains('In Search of Lost Time')
})

【讨论】：

谢谢。如果我想要第二个标题怎么办，它会扫描整个页面的关键字吗？
如果您在页面上多次出现data-cy="book-heading"]，您可以使用eq() 访问它们，例如cy.get('[data-cy="book-heading"]').eq(0).contains('In Search of Lost Time') 或cy.get('[data-cy="book-heading"]').eq(1).contains('In Search of Lost Time') 等。