Javascript 通过cypress.get（）选择HTML中的元素

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

下面将从我的HTML站点上的表中正确地选择单个

tr

元素。 网站内容如下所示：

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

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

现在我想选择

。

标记中的文本。我尝试为第一个

。

标记链接单个调用的第一件事如下：

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

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

这并不像我预期的那样有效。

get（）

调用链接jQuery调用（基于cypress的文档）。看来我误解了JQuery的工作原理

我所期望的是如何检查所有div元素（不工作）：

---

你知道如何前进一步吗？缺少任何信息，请发表评论。

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

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

---

如果其他人有更好的解决方案，请在此处发布。

让我们澄清几点：

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

  将继续成为未来的主题
• Cypress将等待

  .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>
})

您最初的问题也使用了chained

cy.get（）

，它不深入主题。为此，请使用

.find（）

cy.get（'a'）.get（'span'）//每个cy.get（）都从根目录进行查询
cy.get（'a'）.find（'span'）//来自

---

最后一点注意：您建议的解决方案不起作用

cy.get（）

不接受回调函数，如果查看命令日志，您将无法看到调用的3

cy.contains

。换言之，它们没有运行。这就是它通过的原因。

此解决方案没有Brian Mann所解释的那样有效。非常感谢您的详细解释和回答我的问题。。感谢你接受这一点。给我带来了很多思考和更好的理解。。。

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('a').get('span') // each cy.get() queries from the root
cy.get('a').find('span') // the .find() queries from the <a>