feat: screenshot name format

[kien-ht]

Closes #220 and #181.

Introducing global config option NAME_TEMPLATE and compareSnapshot command option nameTemplate. These properties dictate the snapshot naming pattern using replaceable labels. All possible labels are: specName, givenName, browserName, width and height. Any label in square brackets is replaced with its actual value during runtime.

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

// home-page.cy.js
cy.compareSnapshot({
  name: 'top-banner'
})

// Example 2
// home-page.cy.js
cy.compareSnapshot({
  name: 'top-banner',
  nameTemplate: '[specName]/[givenName]-[browserName]'
})

Both of these examples produce the same output

// computed name that is passed to cy.screenshot command
home-page.cy/top-banner-chrome

// output folder structure
|-- baseline
  |-- home-page.cy
    |-- top-banner-chrome.png

Not only can we have custom snapshot names, but it opens up the possibility of managing snapshots by browsers or viewport dimensions in a much more flexible way. For instance, we can now group all snapshots by browsers or viewport dimensions in the example below:

// cypress-image-diff.config.js
const config = {
  // group by browsers
  NAME_TEMPLATE: '[browserName]/[specName]-[givenName]'
  // or group by dimensions
  // NAME_TEMPLATE: '[width]x[height]/[specName]-[givenName]'
};
module.exports = config;

// output folder structure
|-- baseline
  |-- chrome
    |-- home-page.cy-top-banner.png
// or
|-- baseline
  |-- 1280x720
    |-- home-page.cy-top-banner.png

exactName should be deprecated in favour of these new options in the next breaking change.

[lhimstedt]

thanks @kien-ht, that would be super helpful! What is required to merge this? Do you need a review from another maintainer?

[PippoRaimondi]

@kien-ht please rebase from main so pipeline runs successfully

[PippoRaimondi]

🎉 This PR is included in version 2.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀