赛普拉斯断言 table 中与其标题相关的项目

Question

在我的页面上，我有多个具有这种结构的 table：

<div class="box"><h4>Service 1</h4></div>
<div class="container"><ag-grid-table>items in the table</ag-grid-table><div>

<div class="box"><h4>Service 2</h4>
<div class="container"><ag-grid-table>items in the table</ag-grid-table><div>
</div>

<div class="scope-header"><h5>Service 3</h5></div>
<div class="scope-grid"><ag-grid-table>items in the table</ag-grid-table><div>

如您所见，所有部分都有不同的结构，页面上的内容更多。

我想要实现的是断言 Service 3 table 包含正确的项目。

我正在考虑使用 cy.get('div.scope-header').contains('Service 3') 然后使用 next() 或 sibling() 但 ag-grid-table 既不是直接下一个也不是兄弟。

我唯一的想法是检查 ag-grid-table:nth(n)，这应该可行，但是有没有根据 header 标题文本 selects table 的解决方案？

我的意思是 select table 例如仅属于服务 3。

Answer 1

如果您想从 cy.get('div.scope-header')

继续

cy.contains('div.scope-header', 'Service 3')  // this returns div.scope-header 
                                              // not <h5>Service 3</h5> which 
                                              // cy.get().contains() would do
  .next()                                     // next() moves you to <div class="scope-grid">
  .find('ag-grid-table')                      // table is within that

Answer 2

根据我从你的问题中了解到的情况，你可以这样做：

cy.contains('div.scope-header', 'Service 3')
  .next() //goes to .scope-grid
  .within(() => {
    // scopes search within .scope-grid
    cy.contains('ag-grid-table', 'some text').should('be.visible')
    //OR
    cy.get('ag-grid-table').find('item selector').should('be.visible')
    //OR
    cy.get('ag-grid-table')
      .find('item selector')
      .should('have.text', 'some text')
  })

Answer 3

你可以用 .sibling()

做这样的事情

cy.contains('div.scope-header', 'Service 3')
  .sibling('div.scope-grid')                  // move to specified sibling 
  .find('ag-grid-table')                      // within that element
  .should(...)

Answer 4

像这样，你可以使用Traversal commands。
当页面布局发生变化时，将选择器添加到 next() 和 sibling() 更加稳健。

cy.contains('h5', 'Service 3')
  .parent('div.scope-header')
  .next('div.scope-grid')
  .children('ag-grid-table')
  .find('div.ag-row').eq(2)
  ...

赛普拉斯断言 table 中与其标题相关的项目

Cypress assert item in table related to it's title

ag-grid

cypress