Cypress 是一个流行的前端自动化测试工具，其优秀的 API 和易用性在测试领域备受欢迎。它支持我们对于应用程序的功能进行测试，同时还可以对 UI 进行测试，其中一项重要的 UI 测试是界面样式校验。
在正式开始之前需要确认一下，我们想要校验的样式是指 "样式" 层面的校验；
- 并非布局（Layout）检查，例如元素的相对位置、大小等
- 也不是业务（Business）检查，例如文字的正确性、跳转链接的正确性等
样式检查的方法
样式检查的基本思路是：
- 在某个元素上取得其计算后的样式。
- 检查对应的样式属性是否符合预期。
- 验证样式是否符合设计规范。
其中，在某些特定的情况下，需要区分出不同的检查方式来获取计算后的样式与预期样式，并进行对比：
- 全局通配符
- 重置样式
- 继承样式
- calc 的精度问题
- less/sass/... 的处理
- 浏览器兼容性问题（如果存在）
鉴于这个背景，Cypress 为我们提供了一些解决方案来处理样式检测问题。下面就具体的讲一下。
通过属性检查样式
Cypress 是利用 jquerify 来取得被测应用的 DOM 节点的，然后就可以利用 jQuery API 来查找节点以及属性，具体的用法如下：
cy.get('选择器').should('have.css', '属性名', '属性值')
// 具体实例
cy.get('#title').should('have.css', 'font-size', '18px')自定义样式检查
有时候，针对一些需要定制的检查要求，可以自定义检查方法：
// javascriptcn.com 代码示例
Cypress.Commands.add('style', { prevSubject: 'optional' }, (subject, property) => {
const win = subject ? subject[0].ownerDocument.defaultView : cy.state('window')
const cs = win.getComputedStyle(subject[0])
return parseFloat(cs.getPropertyValue(property))
})
// 也有可能链式调用
cy
.get('button')
.style('paddingLeft')
.should('be.gte', '10px')验证访问 URL 页面信息
在判断是否符合设计规范，还需要获得样式规范，相应的实现方法可以在访问的 URL 页面中添加访问其中的信息，如下：
cy.visit('/').then(() => {
const stylesUrl = 'http://localhost:3000/assets/docs.css'
cy.request(stylesUrl)
.its('headers')
.its('content-type')
.should('include', 'text/css')
})生成快照
可以借助第三方插件 cypress-plugin-snapshots 的能力来生成快照：
npm install --save-dev cypress-plugin-snapshots
使用示例：
// e2e/cypress/plugins/index.js
module.exports = (on, config) => {
require('cypress-plugin-snapshots/plugin')(on, config)
}
// Test
cy.visit('/').snapshot('landing')每一个标记为 snapshot 的截图需要你人工的验证：是新的截图所期望的状态、还是最近的属性调整引起的问题。
总结
上述内容介绍了使用 Cypress 进行界面样式校验的基本方法与技巧。具体应用需要结合实际场景灵活运用。当 UI 样式规范越来越重要的时候，我们可以使用这些方法来保证前端应用代码在视觉上的一致性。
感谢阅读本篇文章，期待你们在日常工作中的实际应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7fb2bf6b2d6eab302b32c