> For the complete documentation index, see [llms.txt](https://cypress.visual-image-diff.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cypress.visual-image-diff.dev/getting-started/custom-config-file/name_template.md).

# 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`: 

<pre><code>// presumably the browserName is chrome
<strong>chrome/home-page.cy-top-banner
</strong></code></pre>

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
```