NAME_TEMPLATE

The snapshot naming pattern using replaceable labels. All possible labels are:

• specName: The spec file name

• givenName: The name value in cy.compareSnapshot

• browserName: Short browser name currently running the tests

• width: Width in pixels for the application under tests' viewport

• height: Height in pixels for the application under tests' viewport

Any label in square brackets is replaced with its actual value during runtime.

💢 Default value: undefined

// cypress-image-diff.config.js
const config = {
  NAME_TEMPLATE: '[browserName]/[specName]-[givenName]'
};

module.exports = config;

// home-page.cy.js
cy.compareSnapshot('top-banner')

Computed name that is passed to cy.screenshot:

// presumably the browserName is chrome
chrome/home-page.cy-top-banner

Output directory:

.
├── baseline
    ├── chrome
        ├── home-page.cy-top-banner.png
├── comparison
    ├── chrome
        ├── home-page.cy-top-banner.png
├── diff
    ├── chrome
        ├── home-page.cy-top-banner.png