无法使用 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')
  })
})

Answer 1

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

Answer 2

我已经尝试使用与颜色 #f2e47d 对应的 'eq' 和 'rgb' 值。在下面的 link 'brian-mann' 中，来自 cypress.io 肯定说 'match' 总是用于正则表达式。 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)')
  })
})

Answer 3

看来您对 chai-colors 使用了错误的语法。确保您已安装它：

npm install chai-colors --save-dev

然后在您的测试中使用 .should('have.css', 'background-color')，例如：

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

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('be.colored', '#f2e47d')
  });
});

如果您收到 #000000 is not equal to #f2e47d 这样的错误，这意味着 get 中的选择器没有 background-color，因此请确保你得到了正确的元素。

来源： 赛普拉斯食谱示例 cypress-io#102

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

Unable to test the background color of a footer using Cypress.io, it throws error

javascript

cypress