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

【问题标题】：How to compare text content of two elements via array如何通过数组比较两个元素的文本内容
【发布时间】：2021-09-10 15:01:36
【问题描述】：

我需要比较两个不同的元素是否包含相同的文本。案子：我有 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('Second element).text()。然后我尝试使用另一个并使用 secondElement.text() 创建一个 const，但效果不佳。

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

谢谢

【问题讨论】：

标签： javascript automated-tests cypress

【解决方案1】：

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

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'))

【讨论】：

谢谢我使用了 Alapan Das 解决方案，但从你的回答中我学到了一些新东西:)

【解决方案2】：

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

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
          }
        })
    })
})

【讨论】：

最近我把 if else 改成了 expect($assertion.text()).to.equal(secondText)

【解决方案3】：

谢谢大家，问题解决了。

【讨论】：