Folders

You can organize your images in folders: Just prefix your image name with a subfolder!

The pixelmatchhelper automatically creates missing folders and saves your screenshots in the correct place.

Sample

Scenario('Test Element Screenshot @test', async () => {
    I.amOnPage('https://google.com');

    // This method will use/create the following files:
    // - output/samples/google-home.png
    // - screenshots/base/samples/google-home.png
    // - screenshots/diff/samples/Diff_google-home.png
    await I.checkVisualDifferences('samples/google-home');
})

Deep structures

You can add as many subdirectories as you like.

Here is a more advanced sample that creates two levels of subdirectories and uses some variables for the image name:

async testFreeLayout(element, id, breakpoint) {
    // Sample: free/popup/layout-01-gallery-desktop.png
    await I.checkVisualDifferences(`free/${element}/layout-${id}-gallery-${breakpoint}.png`);
}

---

← Samples | Multiple base images →