赛普拉斯：断言同一父元素中的元素

Question

假设我有以下页面：

<div>
    <div class="item">
        <p data-testid=title>Item One Title</p>
        <p data-testid=subtitle>Item One Subtitle</p>
    </div>
    <div class="item">
        <p data-testid=title>Item Two Title</p>
        <p data-testid=subtitle>Item Two Subtitle</p>
    </div>
</div>

我想测试 Item One Title 和 Item One Subtitle 是否存在于同一个父 div.item 中。在 Cypress 中执行此操作的最佳方法是什么？

到目前为止我尝试了什么：

测试#1：

cy.get('[data-testid=title]').should('contain.text', 'Item One Title');
cy.get('[data-testid=subtitle]').should('contain.text', 'Item One Subtitle');

这些测试将通过，但不会检查 Item One Title 和 Item One Subtitle 是否在同一个父 div.

中

测试#2：

cy.get('[data-testid=title]').should('contain.text', 'Item One Title').then(($foo) => {
   cy.wrap($foo).next().should('contain.text', 'Item One Subtitle');
});

似乎与测试 #1 相同，不检查 Item One Title 和 Item One Subtitle 是否在同一父 div.

中

Answer 1

您可以将 data-testid 属性添加到 div 元素正在寻找验证或执行以下操作。

// swap div with [data-testid=item] if you add it to item div
cy.contains('div', 'Item One Title')
  .within( () => {
    // all queries will only be subject to the item div with 'Item One Title' text
    cy.get('[data-testid=title]').should('contain.text', 'Item One Title');
    cy.get('[data-testid=subtitle]').should('contain.text', 'Item One Subtitle');
   })

Answer 2

.parent() 选择器看起来很合适

cy.contains('[data-testid=title]', 'Item One Title')
  .parent()
  .should('contain', 'Item One Subtitle');

或直接使用父级

cy.contains('div.item', 'Item One Title')
  .should('contain', 'Item One Subtitle');

Answer 3

您可以使用siblings

cy.contains('[data-testid=title]', 'Item One Title')
  .siblings()
  .should('have.attr', 'data-testid', 'subtitle')
  .and('contain.text', 'Item One Subtitle')

赛普拉斯：断言同一父元素中的元素

Cypress: asserting elements within the same parent element

cypress