通过cypress.get()选择HTML中的元素

Question

我正在使用cypress为html网站编写一些测试..

以下tr内容从我的HTML网站上的表中正确选择了一个元素.网站内容如下所示:

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

以下测试脚本片段正确选择了我的单个<tr..>部分.

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

现在我想选择<div>..</div> 标签中的文本.我首先试图为第一个<div>..</div>标签链接一个调用,如下所示:

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

这不符合我的预期.该get()呼叫链jQuery的调用(基于Cypress的文档).所以看起来我误解了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

让我们澄清一些事情:

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)但是,如果您只关心赛普拉斯发现文本并且您不介意更改主题,您可以这样做:

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()不接受回调函数,如果你查看命令日志,你将看不到那些cy.contains被调用的3 .换句话说,它们没有运行.这就是它传球的原因.