feat: allow snap and diff extensions to be configured

Fixes #33

README.md

@@ -137,6 +137,33 @@ cy.matchImageSnapshot({
 })
 ```
 
+It is also possible to configure the extensions given to snap and diff files
+generated by the plugin. The default options are:
+
+```ts
+{
+ snapFilenameExtension: '.snap',
+ diffFilenameExtension: '.diff',
+}
+```
+
+```ts
+// will create a snap called `some-name.custom-snap-name.png`
+cy.matchImageSnapshot('some-name', {
+ snapFilenameExtension: '.custom-snap-name',
+})
+
+// will create a snap called `some-name.png`
+cy.matchImageSnapshot('some-name', {
+ snapFilenameExtension: '',
+})
+
+// will create a diff called `some-name.wrong.png` when a test fails
+cy.matchImageSnapshot('some-name', {
+ diffFilenameExtension: '.wrong',
+})
+```
+
 #### Snapshot paths
 
 As of Cypress 10.0.0 a change was made to remove common ancestor paths of

cypress/e2e/matchImageSnapshot.cy.ts

@@ -19,6 +19,22 @@ it('allows folders to be created within snapshots dir', () => {
  cy.get('h1').matchImageSnapshot('dir/subdir/image')
 })
 
+it('allows .snap extension to be changed', () => {
+ cy.get('body').matchImageSnapshot('snap-ext', {
+ snapFilenameExtension: '.custom-snap-name',
+ })
+ cy.readFile(
+ './cypress/snapshots/matchImageSnapshot.cy.ts/snap-ext.custom-snap-name.png',
+ ).should('exist')
+
+ cy.get('body').matchImageSnapshot('no-ext', {
+ snapFilenameExtension: '',
+ })
+ cy.readFile('./cypress/snapshots/matchImageSnapshot.cy.ts/no-ext.png').should(
+ 'exist',
+ )
+})
+
 // next two tests use blackout to change
 // the snapshot image. Also validates options
 it('name and options', () => {

src/command.ts

@@ -22,6 +22,8 @@ const defaultOptions: SnapshotOptions = {
  currentTestTitle: '',
  failureThreshold: 0,
  failureThresholdType: 'pixel',
+ snapFilenameExtension: '.snap',
+ diffFilenameExtension: '.diff',
 }
 
 /**

src/plugin.ts

@@ -32,8 +32,6 @@ const setOptions = (commandOptions: SnapshotOptions) => {
 }
 
 const PNG_EXT = '.png'
-const SNAP_EXT = `.snap${PNG_EXT}`
-const DIFF_EXT = `.diff${PNG_EXT}`
 const DEFAULT_DIFF_DIR = '__diff_output__'
 
 let snapshotResult = {} as DiffSnapshotResult
@@ -66,6 +64,8 @@ const runImageDiffAfterScreenshot = async (
  specFileRelativeToRoot,
  customDiffDir,
  e2eSpecDir,
+ snapFilenameExtension,
+ diffFilenameExtension,
  } = options
 
  let snapshotName = path.basename(screenshotConfig.path, PNG_EXT)
@@ -98,13 +98,19 @@ const runImageDiffAfterScreenshot = async (
  snapshotsDir,
  `${snapshotName}${PNG_EXT}`,
  )
- const snapshotDotPath = path.join(snapshotsDir, `${snapshotName}${SNAP_EXT}`)
+ const snapshotDotPath = path.join(
+ snapshotsDir,
+ `${snapshotName}${snapFilenameExtension}${PNG_EXT}`,
+ )
 
  const diffDir = customDiffDir
  ? path.join(process.cwd(), customDiffDir, specFileRelativeToRoot)
  : path.join(snapshotsDir, DEFAULT_DIFF_DIR)
 
- const diffDotPath = path.join(diffDir, `${snapshotName}${DIFF_EXT}`)
+ const diffDotPath = path.join(
+ diffDir,
+ `${snapshotName}${diffFilenameExtension}${PNG_EXT}`,
+ )
 
  logTestName(currentTestTitle)
  log('options', options)
@@ -167,9 +173,15 @@ const runImageDiffAfterScreenshot = async (
  }
 
  await fs.copyFile(snapshotNameFullPath, snapshotDotPath)
- await fs.rm(snapshotNameFullPath)
+
+ // don't remove if the paths are the same, this can happen
+ // if the user passes empty string for snapFilenameExtension
+ if (snapshotNameFullPath !== snapshotDotPath) {
+ await fs.rm(snapshotNameFullPath)
+ }
 
  snapshotResult.diffOutputPath = snapshotDotPath
+ log(snapshotResult)
 
  log('screenshot write to snapshotDotPath')
  return {

src/types.ts

@@ -24,6 +24,8 @@ export type SnapshotOptions = {
  specFileRelativeToRoot: string
  currentTestTitle: string
  e2eSpecDir: string
+ snapFilenameExtension: string
+ diffFilenameExtension: string
 } & CypressScreenshotOptions &
  MatchImageSnapshotOptions
 
@@ -36,6 +38,8 @@ export type CypressImageSnapshotOptions = Partial<
  CypressScreenshotOptions & MatchImageSnapshotOptions
 > & {
  e2eSpecDir?: string
+ snapFilenameExtension?: string
+ diffFilenameExtension?: string
 }
 
 export type Subject =