Cypress 图像快照

Cypress 图像快照绑定 图片相机图像向导逻辑到 Cypress.io (英语) 命令.

• 安装
  • 类型脚本
• 使用量
  • 在你的测试中
    • 选项
  • 更新快照
  • 防止失败
  • 需要显示快照
• 如何运作
• 所需资源
• 捐款
  • 设置
  • 在插件上工作
    • 打开
    • 运行
      • 关于环境变量的说明
• 从 jaredpalmer/cypress-image-snapshot

安装

使用您选择的软件包管理器安装

# yarn
yarn add --dev @emerson-eps/cypress-image-snapshot

# npm
npm install --save-dev @emerson-eps/cypress-image-snapshot

插入插件功能并添加到 setupNodeEvents 函数数字 :

// cypress.config.ts

import {defineConfig} from 'cypress'
import {addMatchImageSnapshotPlugin} from '@emerson-eps/cypress-image-snapshot/plugin'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      addMatchImageSnapshotPlugin(on)
    },
  },
})

将命令添加到您的相关 支持文件数字 :

// cypress/support/e2e.ts

import {addMatchImageSnapshotCommand} from '@emerson-eps/cypress-image-snapshot'

addMatchImageSnapshotCommand()

// can also add any default options to be used
// by all instances of `matchImageSnapshot`
addMatchImageSnapshotCommand({
  failureThreshold: 0.2,
})

类型脚本

TypeScript 被支持所以任何引用都引用 @types/cypress-image-snapshot 可以从您的工程中删除

确保将这些类型列入 tsconfig.json

{
  "compilerOptions": {
    // ...
  },
  "include": ["@emerson-eps/cypress-image-snapshot"]
}

使用量

在你的测试中

describe('Login', () => {
  it('should be publicly accessible', () => {
    cy.visit('/login');

    // snapshot name will be the test title
    cy.matchImageSnapshot();

    // snapshot name will be the name passed in
    cy.matchImageSnapshot('login');

    // options object passed in
    cy.matchImageSnapshot({
      failureThreshold: 0.4
      blur: 10
      timeout: 3000
    });

    // match element snapshot
    cy.get('#login').matchImageSnapshot();
  });
});

选项

选项对象结合了jest-image-snapshot和Cypress截图配置.

• 图片相机
• Cypress 截图

cy.matchImageSnapshot({
  // options for jest-image-snapshot
  failureThreshold: 0.2,
  comparisonMethod: 'ssim',

  // options for Cypress.screenshot()
  capture: 'viewport',
  blackout: ['.some-element'],
})

已执行新的选项, 以使函数递归并重试快照 :

cy.matchImageSnapshot({
  // Time it takes for the snapshot command to time out if the snapshot is not correct
  timeout: 5000,

  //Sets a delay between recursive snapshots
  delayBetweenTries: 1000,
})

更新快照

运行 Cypress 与 --env updateSnapshots=true 以更新所有测试的基础图像文件.

需要显示快照

运行 Cypress 与 --env requireSnapshots=true 如果缺少快照,则失败。 这对于持续整合很有用,因为应事先提供快照.

如何运作

工作流程 cy.matchImageSnapshot() 当运行 Cypress 时 :

1. 使用截图 cy.screenshot() 根据当前测试而命名.
2. 检查保存的快照是否存在 <rootDir>/cypress/snapshots 如果是这样的话,diff 与快照.
3. 如果有结果,请保存到 <rootDir>/cypress/snapshots/__diff_output__。 。 。 .

所需资源

在Cypress 10.x、11.x和12.x试验

Cypress 必须安装为对等依赖

捐款

设置

• 清除存储器并安装线条依赖 yarn install
• 确保 Docker 设置 。 这是生成/更新快照所必需的
• 使用 沃尔塔 建议管理节点和雅恩版本。 这些是 自动从 package.json
• 报告应基于 常规变化日志

在插件上工作

为了更方便地测试,同时开发 有一些简单的 验证插件的 Cypress 测试 。 这些测试有两种方式:

打开

yarn test:open

在开放模式下,测试在Electron运行,并忽略任何快照故障. 这是 由于开发机对CI的渲染差异. 这里还有 动词输出被发送到测试跑道控制台来协助调试.

说明 在此显示上面的线条脚本将每次重建插件 。 这是 有必要,因为测试是对照 dist 目录 确保国家防范机制的既定一揽子措施之间的平等.

确保每次更改都要在 Cypress 中测试命令运行

运行

• yarn docker:build
• yarn docker:run

这里的命令可以确保测试在 Docker 容器内进行 匹配 CI 机器。 这样可以生成图像并正确匹配 在 Github 动作中进行测试时.

关于环境变量的说明

必须在默认情况下定义两个环境变量 运行 Docker 中的测试 :

• CYPRESS_updateSnapshots=false
• CYPRESS_debugSnapshots=false

推荐这些装入外壳 缩写

然后,他们可以根据需要被推翻:

CYPRESS_updateSnapshots=true yarn docker:run

从 @simonsmith/cypress-image-snapshot

这是重写插件从 西蒙·史密斯。 。 。 .