@bahmutov/cypress-toy-visual-测试

Cypress 用户简单的本地视觉测试

学习

• 网上课程 用 Cypress 进行视觉测试

安装

将此插件添加为 dev 依赖

npm i -D @bahmutov/cypress-toy-visual-testing

从 Cypress 配置文件中的“ hook” 设置 :

// cypress.config.js

const { defineConfig } = require('cypress')
// https://github.com/bahmutov/cypress-toy-visual-testing
const {
  setupVisualTesting,
} = require('@bahmutov/cypress-toy-visual-testing/dist/plugin/setup')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      setupVisualTesting(on, config)
      return config
    },
  },
})

在您的支持文件中添加自定义命令 :

// cypress/support/e2e.js

// https://github.com/bahmutov/cypress-toy-visual-testing
import '@bahmutov/cypress-toy-visual-testing/dist/support/commands'

使用

获取完整页面截图

cy.imageDiff('added-todos')

抓取选项

• fullPage (默认)取出整个页面的截图并将其缝入一个图像
• viewport 取当前可见部分的截图
• clipToViewport 将整个测试跑道的截图取出,将图像剪接到取景口.
• diffPercentage 允许您忽略图像差异, 最高为像素的 N% 。 如果diff低于这个百分比,金像就不会被覆盖
• failOnLayoutDiff 如果尺寸不同, 图像比较失败, 默认为真实
• dimensionTolerance 如果 failOnLayoutDiff: true

例如,让我们忽略所有图像差异,最多半个像素

cy.imageDiff('app', { diffPercentage: 0.5 })

比较图像,允许每个维度在金像的5%以内

cy.imageDiff('app', {
  failOnLayoutDiff: true,
  dimensionTolerance: 0.05,
})

CI 选项

以下 Cypress env 变量可以改变图像 diff 是如何被批准或拒绝的 :

• updateGoldImages 以新截图覆盖金色图像, 即使有差异 。 用于拉请求中的分支来覆盖可以添加到源分支的图像 。 然后用户可以看到已改变的金像和主分支金像的区别.

• failOnMissingGoldImage默认值 false 可用于自动失败 cy.imageDiff 如果截图没有金色的图像来比较。 例如,在 main 树枝,我们可以要求所有金色图像都存在.

- name: Run Cypress tests 🧪
  # https://github.com/cypress-io/github-action
  uses: cypress-io/github-action@v6
  with:
    start: npm start
    # if there is no gold image to compare a screenshot to
    # it is a problem, and we should fail the tests
    env: failOnMissingGoldImage=true

发展

使用 npm run watch 将TS汇编成联合来文

使用下列图标来指代图像:

• 金色图像
• qq 当前截图
• 图像匹配
• 图像不匹配