angular - 如何使用 cypress-image-snapshot 而不在每次测试时生成新的屏幕截图？

Question

我想通过以下方式在赛普拉斯测试我的网站的响应能力

• 在窄视口中截取页面
• 以编程方式向右滚动
• 测试页面是否仍然与屏幕截图匹配 想法是，如果我的响应式布局有效，则无法向右滚动：所有元素应该仍然可见。

我使用以下代码（仅相关代码）：

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 });、.

标签： angularcypress

Answer 1

也许你有配置trashAssetsBeforeRuns集false？默认值为true，但如果是这样，之前的屏幕截图将在 nect 测试开始时被删除。

参考配置 - 屏幕截图