通过 cypress.get() HTML 中的 Select 个元素

Question

我正在使用 cypress 针对 html 站点编写一些测试..

以下 select 正确地向我提供了来自我 HTML 网站上 table 的单个 tr 元素。站点内容如下所示：

<tr data-recordid="theId">
  <td...><div ..>Text 1</div></td>
  <td...><div ..>Text 2</div></td>
  <td...><div ..>Text 3</div></td>
</tr>

下面的测试脚本片段 select 正确地告诉了我单个 <tr..> 部分。

cy.get('tr[data-recordid="theId"]').contains('Text')

现在我想 select <div>..</div> 标签中的文本。我首先尝试将单个调用链接到第一个 <div>..</div> 标签，如下所示：

cy.get('tr[data-recordid="theId"]').get('div').contains('Text')

这不符合我的预期。 get() 调用链式 jQuery 调用（基于赛普拉斯文档）。所以看起来我误解了 JQuery.

中的工作原理

我期待的是如何检查所有 div 元素，像这样（不工作）：

cy.get('tr[data-recordid="theId"]')..SomeHowMagic
  .get('td[alt="xyz"]".get('div').contains('Text 1')
  .get('td...').get('div').contains('Text 2')
  .get('td...').get('div').contains('Text 3')

知道如何向前迈出一步吗？遗漏任何信息，请发表评论。

Answer 1

所以经过更多的试验，我找到了一个解决方案：

cy.get('tr[data-recordid="TheId"]>td> div', function() {
  cy.contains('Text 1').end()
  cy.contains('Text 2').end()
  cy.contains('Text 3').end()
})

如果其他人有更好的解决方案，请post在这里。

Answer 2

让我们澄清一些事情：

1) 如果您只是想断言 div 包含给定的文本，那么这是执行此操作的最佳和最精确的方法：

cy.get('tr[data-recordid="theId"]').should(($tr) => {
  const $divs = $tr.find('div') // find all the divs

  expect($divs.eq(0)).to.contain('Text 1')
  expect($divs.eq(1)).to.contain('Text 2')
  expect($divs.eq(2)).to.contain('Text 2')
})

我不知道事情是否需要如此具体。如果您只想确保 $tr 包含文本，您可以将其简化为：

cy.get('tr[data-recordid="theId"]').should(($tr) => {
  expect($tr).to.contain('Text 1')
  expect($tr).to.contain('Text 2')
  expect($tr).to.contain('Text 2')
})

为什么要这样做？

使用.should()函数不会改变主题。您的 $tr 将继续成为未来的主题。
赛普拉斯将等待 .should() 回调中的所有断言通过，并不断重试直到它们通过。这可以保证您在继续之前多个元素的状态是正确的。

2) 但是，如果您只关心 Cypress 是否能找到文本，而不介意更改主题，则可以这样做：

cy.get('tr[data-recordid="theId"]').within(() => {
  cy.contains('Text 1') // changes the subject to the <div>
  cy.contains('Text 2') // changes the subject to the <div>
  cy.contains('Text 3') // changes the subject to the <div>
})

这与第一个示例不同，因为您只是将主题更改为在其中找到文本的任何元素，而不是显式断言。赛普拉斯在 cy.contains() 上的默认断言是重试，因此最终的行为是相同，只是您要另外更改主题。

如果这太复杂了，你也可以这样做：

cy.get('tr[data-recordid="theId"] div').contains('Text 1')
cy.get('tr[data-recordid="theId"] div').contains('Text 2')
cy.get('tr[data-recordid="theId"] div').contains('Text 3')

您的原始问题也使用了链式 cy.get()，它不会深入研究主题。为此，请使用 .find()

cy.get('a').get('span') // each cy.get() queries from the root
cy.get('a').find('span') // the .find() queries from the <a>

最后一点：您建议的解决方案无效。 cy.get() 不接受回调函数，如果您查看命令日志，您将看不到这 3 个 cy.contains 被调用过。也就是说，他们不是运行。这就是它通过的原因。

通过 cypress.get() HTML 中的 Select 个元素

Select elements in HTML via cypress.get()

javascript

jquery

html

cypress