Cypress图像对比

对于常规的显示元素,可以直接判断元素是否包含某些样式,是否可视等,对于生成的svg或canvas图像来说,图像对比可以直观地对比是否准确。

Cypress框架,配合cypress-plugin-snapshots插件,可以实现图像对比。

安装组件

1
npm i cypress-plugin-snapshots -S

举例用法

1
cy.get('svg').toMatchImageSnapshot();

获取svg标签,生成截图,如果之前没有在本地保存过该元素的截图,第一次执行时会自动保存当前的元素截图在本地,作为对比的图像。

第二次执行脚本时就会重新截取该元素生成图像,并与本地已有的对应图像作对比,执行完后,如果图像有差异弹窗显示像素上的差异并标出红色区域。

具体在cypress内配置插件和指令,可参考官方文档

作者

Annabel

发布于

2022-05-11

更新于

2022-05-11

许可协议

评论