如何通过数组比较两个元素的文本内容

Question

我需要比较两个不同的元素是否包含相同的文本。案件：我有 5 个不同的按钮时间段让我们假设它们是“日、周、月、年、十年” 每次单击某个特定按钮时，我都想比较下表中第二个元素中的值是否也发生了变化并且是否相同。

我的代码是：

isAgregationBarChoosenValuePresent() {
        const selectors = ['button[data-testid="period-button-DAY"]',
                           'button[data-testid="period-button-WEEK"]',
                           'button[data-testid="period-button-MONTH"]',
                           'button[data-testid="period-button-YEAR"]',
                           'button[data-testid="period-button-DECADE"]']
        selectors.forEach(($selector) => {
            cy.get($selector, { timeout: 10000 }).eq(0).click().then($assertion => {
                const assertionText = $assertion.text()
                  return assertionText === cy.get('Second element).text()
})

我假设我不能使用cy.get('第二个元素).text()。然后我尝试使用另一个并使用 secondElement.text() 创建一个 const 这也不起作用。

如果你有任何想法，请告诉我。

谢谢

Answer 1

根据我从问题中了解到的内容，您可以执行以下操作。

const selectors = [
  'button[data-testid="period-button-DAY"]',
  'button[data-testid="period-button-WEEK"]',
  'button[data-testid="period-button-MONTH"]',
  'button[data-testid="period-button-YEAR"]',
  'button[data-testid="period-button-DECADE"]',
]
selectors.forEach(($selector) => {
  cy.get($selector, { timeout: 10000 })
    .eq(0)
    .click()
    .then(($assertion) => {
      cy.get("Second element")
        .invoke("text")
        .then((secondText) => {
          if ($assertion.text() == secondText) {
            //Do Something
          } else {
            //Do something
          }
        })
    })
})

Answer 2

将比较包装在一个函数中，然后为每个按钮调用它

const compare = ($button, selector2) => {
  cy.get(selector2).then($selector2 => {
    expect($button.text()).to.eq($selector2.text())
  })
}

const selectors = ...
selectors.forEach((buttonSelector) => {
  cy.get(buttonSelector, { timeout: 10000 }).click()
    .then($button => compare($button, 'Second element'))

脱离DOM

有时按钮元素可能会在点击后被替换（尤其是 React 应用程序）。您可能会看到“与 DOM 分离”错误。

这种情况需要在函数内部重新查询按钮

const compare = (buttonSelector, selector2) => {
  cy.get(buttonSelector).then($button => {
    cy.get(selector2).then($selector2 => {
      expect($button.text()).to.eq($selector2.text())
    })
  })
}

const selectors = ...
selectors.forEach((buttonSelector) => {
  cy.get(buttonSelector, { timeout: 10000 }).click()
    .then(() => compare(buttonSelector, 'Second element'))

Answer 3

谢谢大家，问题已解决。

如何通过数组比较两个元素的文本内容

How to compare text content of two elements via array

javascript

automated-tests

cypress