赛普拉斯：根据另一个 child 元素获取 parent 的 child 元素

Question

我有2个div崩溃

<div class="collapse>
    <div class="title">Apple</div>
    <item>Apple 1</item>
    <item>Apple 2</item> // get this item
    <item>Apple 3</item>
</div>

<div class="collapse>
    <div class="title">Samsung</div>
    <item>Samsung 1</item>
    <item>Samsung 2</item>
</div>

如何通过 class 标题获取项目列表，如下所示：

cy.get('.collapse').within(() => {
  if (cy.contains('.title', 'Apple') {
   cy.get(item).eq(1).... // handle item second of apple
  }
});

Answer 1

您可以通过其子项

的内容指定您想要的.collapse

cy.contains('.collapse', 'Apple')  // gets the 1st collapse element where child has "Apple" text
  .find('item').eq(1)             // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

如果你的实际HTML比较复杂，想从title元素入手，

cy.contains('.title', 'Apple')  // get the title child with "Apple" text
  .parent()                    // move up to div.collapse
  .find('item').eq(1)         // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

还是兄弟导航

cy.contains('.title', 'Apple')  // get the tile child with "Apple" text
  .siblings('item').eq(1)       // 2nd item sibling
  .should('have.text', 'Apple 2')

赛普拉斯：根据另一个 child 元素获取 parent 的 child 元素

Cypress: Get child element of parent based on another child element

javascript

testing

automated-tests

vue.js

cypress