如何使用Cypress根据精确的文本选择元素？

Question

我有一个带有小部件名称列的表格，后面跟着其他关于小部件的详细信息的列。

我在页面上有一个搜索功能，可以通过名称搜索我想要的小部件。当我按名称搜索小部件时，例如“abc”，返回的行是“abcde”，“aabc”，“abc”。

当我尝试选择我想要的行时，出现了问题。Cypress的.contains()总是返回第一个匹配项，但我想要的是精确匹配。

我也无法保证行的顺序。我该如何只选择abc？

cy.contains(`${widgetName}`)

- LazyDragon

Answer 1

是的，cy.contains()只返回第一个元素，但你可以切换到:contains()伪选择器来返回所有元素。

请参阅:contains() Selector。

选择包含指定文本的所有元素。

我不知道为什么Cypress在cy.contains()中没有提供多个匹配项的选项，但:contains()可以使用。

---

扫描所有列

您有灵活性来测试所有搜索结果的值。以下是扫描行的一般方法：

let exactMatchFound = false;

cy.get('table tbody tr')
  .filter(`:contains(${widgetName})`)
  .each($row => {
    const $firstCol = $row.find('td').eq(0);
    if ($firstCol.text() === 'abc') {
      exactMatchFound = true
    }
    // other column tests
  })
  .then(() => {
    expect(exactMatchFound).to.eq(true)
  })

---

只要第一列

如果你只想验证第一列是否有abc，使用:nth-child()选择器

let exactMatchFound = false;

cy.get('table tbody tr td:nth-child(1)')   // extract all 1st column cells
  .each($col1 => {
    if ($col1.text() === 'abc') {
      exactMatchFound = true
    }
  })
  .then(() => {
    expect(exactMatchFound).to.eq(true)
  })

或者不用循环

cy.get('table tbody tr td:nth-child(1)')   // extract all 1st column cells
  .contains(/^abc$/)                       // one of those has exact text
                                           // - but don't know which row

- Debella