如何使用cypress-image-snapshot不生成一个新的屏幕截图每个测试?

Question

我想测试我的网站在Cypress的响应性

• 在窄视窗中截取页面截图
• 程序向右滚动
• 测试页面是否仍然与截图匹配这个想法是，如果我的响应式布局工作，它不可能滚动到右边:所有的元素应该仍然是可见的。

我使用以下代码(仅相关代码):

When('the page is displayed on a mobile viewport', () => {
cy.viewport(800, 750);
cy.screenshot();
});
Then('the page should not be scrollable in a horizontal direction', () => {
cy.window().scrollTo('right');
cy.matchImageSnapshot();
})

和

Feature: Grid
I want to display containers in a responsive grid.
Scenario: Displaying the page on a small viewport
Given I visit the URL '/grid-page'
When the page is displayed on a mobile viewport
Then the page should not be scrollable in a horizontal direction

创建截图并保存到cypress/screenshots/grid.feature/Grid -- Displaying the page on a small viewport.png。

然而，每次我运行测试时，它都会生成一个新的副本快照(例如cypress/screenshots/grid.feature/Grid -- Displaying the page on a small viewport(1).png)。我如何确保它只是使用现有的截图(或覆盖它与相同的名称)，而不是创建新的编号的截图?

我已经尝试使用cy.screenshot('grid', {overwrite: 'true'});和在commands.js,addMatchImageSnapshotCommand({ overwrite: true });.

Answer 1

也许您有配置trashAssetsBeforeRuns设置false?默认值是true，但如果是这样，之前的截图将在下一次测试开始时被删除。

refconfiguration -截图