2

I'm using cypress to write some tests against an html site..

The following selects me correctly a single tr elements from a table on my HTML site. The site contents looks like this:

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

The following test script snippet selects me correctly the single <tr..> part.

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

Now I want to select the text within the <div>..</div> tags..The first thing I have tried to chain a single call for the first <div>..</div> tag like this:

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

which does not work as I expected. The get() calls a chained jQuery calls (Based on the Docs of cypress). So it looks like I misunderstand how things work in JQuery.

What I'm expecting is how I can check all div elements like this (Not working):

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')

Any idea how to get forward a step? Missing any information just make a comment.

4

2 回答 2

10

让我们澄清一些事情：

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

于 2017-10-06T19:42:58.683 回答
0

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

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

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

于 2017-10-01T13:10:55.143 回答