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'值。在下面的链接中，来自cypress.io的“ brian-mann”确认“ 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的错误，不等于#f2e47d，则意味着get中的选择器没有background-color，因此请确保您得到正确的元素。 ?

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

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

3 个答案: