Cypress断言元素text-decoration为line-through失败如何解决

浏览器读取text-decoration这类CSS简写属性时，不会只返回你在style里写的单个值，会自动补全该属性关联的所有子属性默认值：你写的line-through只是text-decoration-line的值，浏览器会额外补上默认的线条样式solid、默认文字颜色rgb(0, 0, 0)，最终返回拼接后的完整值line-through solid rgb(0, 0, 0)，所以你写的精确值匹配会直接报错。

你可以选下面任意一种适配方式：

方案1：包含匹配（兼容性最好，最常用） #

不用做全值精确匹配，只判断返回的样式字符串里包含line-through即可：

// 断言勾选后的删除线效果
cy.get('li')
  .should('have.css', 'text-decoration')
  .and('include', 'line-through')

// 对应断言未勾选状态
cy.get('li')
  .should('have.css', 'text-decoration')
  .and('not.include', 'line-through')

方案2：匹配单独子属性 #

现代浏览器支持直接读取text-decoration拆分后的独立子属性，你可以直接精确匹配控制删除线的text-decoration-line属性：

cy.get('li').should('have.css', 'text-decoration-line', 'line-through')

注意这个方案在老旧浏览器下会拿不到属性值，日常写用例优先用方案1适配性更强。

不推荐的方案 #

不要硬编码写死完整返回值做匹配，比如：

// 不推荐，不同浏览器、不同主题下文字颜色、线条样式默认值可能有差异
cy.get('li').should('have.css', 'text-decoration', 'line-through solid rgb(0, 0, 0)')

这种写法在页面改了文字颜色、或者浏览器默认样式有差异时会直接误报失败。

内容的提问来源于stack exchange，提问作者Devang Sanghani