如何根据同一 JavaScript 父级中另一个子级的文本获取子级的值

Question

所以我希望能够使用 Cypress 从下面的 table 中获取“文本 B”，但尝试了很多方法，但我只能获取“Party B”。

<div class="table">
  <div class="label">
    <span class="labelText">Party A</span>
  </div>
  <div class="text">Text A</div>
</div>

<div class="table">
  <div class="label">
    <span class="labelText">Party B</span>
  </div>
  <div class="text">Text B</div>
</div>

我一直在使用cy.get(div[class="table"]).contains(div[class="label"], "乙方").click()点击"乙方"的文字,但不知道如何点击同一父项的另一个子项。

Answer 1

要获取包含“乙方”的table，请在.contains()

中指定选择器

cy.contains('div.table', 'Party B')  // returns the table with "Party B" inside somewhere 
  .find('div.text')                  // find the 2nd child which has class "text"
  .click()

如果您知道“文本 B”是实际文本，您可以使用多种变体

cy.contains('div.text', 'Text B')
  .click()

如果您想先导航到 div[class="table"]，然后导航到 div[class="label"]

cy.contains('Party B')               // returns the <span> owning "Party B" 
  .click()
  .parent('div.label')               // go up to div[class="label"]
  .sibling('div.text')               // go to next element at that level
  .click()

在链中进行多次点击时要小心，通常它们有 side-effects。

每次点击后最好开始一个新的链。

如何根据同一 JavaScript 父级中另一个子级的文本获取子级的值

How to get value of a child based on the text of another child within the same JavaScript parent

html

javascript

css

cypress