使用 chai-colors 插件测试颜色

Question

chai-colors我正在尝试向 Cypress添加插件，来自如何安装插件“Chai Sorted”#2441

克里斯·布雷丁给出

import chaiSorted from "chai-sorted"
chai.use(chaiSorted)

因此对于chai-colors

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

cy.visit(...)
cy.get(selector)
  .should('be.colored', '#000000') 

但这给出了错误“4000ms后重试超时：actual.equals不是函数”

Answer 1

chai-colors要在 a 内部使用，.should()您需要传入颜色代码本身（而不是元素）

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

cy.visit(...)
cy.get(selector)
  .then($el => $el.css('color'))       // get color value
  .should('be.colored', '#000000') 

但请注意，这会失败

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

cy.visit(...)
cy.get(selector)
  .then($el => $el.css('backgroundcolor'))       // get color value
  .should('be.colored', '#000000') 

预期 #000000 与 #000000 颜色相同

因为$el.css('backgroundcolor')返回rgba()而不是rgb().

您最好导入内部使用的onecolorchai-colors。

然后以任何您想要的方式使用转换器（加上文档会更好）。

import color from 'onecolor'

cy.visit(...)
cy.get(selector)
  .then($el => $el.css('backgroundcolor'))       // get color value
  .should(colorValue => {
    expect(color(colorValue).hex()).to.eq('#000000') 
  })