cypress-image-snapshot(推荐使用)
<h3>0、介绍</h3>
<p>一种image diff插件，以下仅列出关键使用步骤及总结，详见参考文档。</p>
<ol>
<li>Take a screenshot with <code>cy.screenshot()</code> named according to the current test.</li>
<li>Check if a saved snapshot exists in <code><rootDir>/cypress/snapshots</code> and if so diff against that snapshot.</li>
<li>If there is a resulting diff, save it to <code><rootDir>/cypress/snapshots/__diff_output__</code></li>
</ol>
<h3>1、安装</h3>
<pre><code>npm install --save-dev cypress-image-snapshot</code></pre>
<h3>2、 <code><rootDir>/cypress/plugins/index.js</code></h3>
<pre><code> const {
addMatchImageSnapshotPlugin,
} = require('cypress-image-snapshot/plugin');
module.exports = (on, config) => {
addMatchImageSnapshotPlugin(on, config);
};</code></pre>
<h3>3、 <code><rootDir>/cypress/support/commands.js</code></h3>
<pre><code> import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();</code></pre>
<h1>参考</h1>
<p>[1]. <a href="https://github.com/jaredpalmer/cypress-image-snapshot">cypress-image-snapshot官方文档</a>
[2]. <a href="https://github.com/jaredpalmer/cypress-image-snapshot/tree/master/examples">a demo project</a></p>