无法使用 Cypress.io 测试页脚的背景颜色，它会抛出错误

Question

无法使用 Cypress.io 测试背景颜色，在运行 cypress 测试时抛出以下错误； CypressError：重试超时：actual.equals 不是函数。通过 npm install chai-colors 安装了 chai-colors 并在 /support/index.js 下添加了以下内容

import chaiColors from 'chai-colors'
chai.use(chaiColors)

赛普拉斯测试如下：

 describe("Background Color test", () => {
  //before(() => {
  //  cy.visit('https://sometesturl.com')
//  })
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
      cy.get('#footer')
        .should('colored', '#f2e47d')
        .and('be.colored', '#f2e47d')
  })
})

原文由 soccerway 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我尝试使用与颜色 #f2e47d 对应的“eq”和“rgb”值。在以下链接中，来自 cypress.io 的“brian-mann”确认说“匹配”始终用于正则表达式。 https://github.com/cypress-io/cypress/issues/58 现在测试成功断言了页脚区域中的背景颜色值。

 describe("Background Color test", () => {
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
     cy.get('#footer')
       .should('have.css', 'background-color')
       .and('eq', 'rgb(242, 228, 125)')
  })
})

原文由 soccerway 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

chai-colors 仅测试不同颜色表示的相等性。

要测试您的 #footer 元素是否具有特定背景颜色，您需要使用 Cypress css() 断言。

 describe("Background Color test", () => {
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
     cy.get('#footer')
       .should('have.css', 'background-color')
       .and('eq', 'rgb(242, 228, 125)')
  })
})

原文由 David Z. 发布，翻译遵循 CC BY-SA 4.0 许可协议