duplicated screenshots?

[jbures]

Hey there guys, i'm trying to create a POC of a visual diff tool and i'm having an issue where i get duplicated screenshots every time i run my test...

I get what appears to be a default screenshot and the one i named, so for example with this run:

const Differencify = require('differencify');
const differencify = new Differencify({
    debug: true,
    imageSnapshotPath: './evidence'
});

const hideElement = () => {
    document.querySelector('.small-spots__container').style.display = "none";
};

const snap = async () => {
    await differencify.launchBrowser();

    const target = differencify.init({ chain: false });
    const page = await target.newPage();

    await page.setViewport({ width: 1360, height: 768 });
    await page.goto('https://www.gog.com');
    await page.addStyleTag({ path: './src/freeze.css' }); // Freezing animations and transitions
    await page.evaluate(hideElement); // hiding dynamic elements to avoid false-positives
    await page.waitFor('.js-background-0'); // waiting for big image to continue

    const image = await page.screenshot({
        type: 'jpeg',
        path: './evidence/frontpage_big_spot.jpg'
    });

    await target.toMatchSnapshot(image);

    await page.close();
    await differencify.cleanup();
};

snap();

This runs fine, the problem is that i get two screenshots here instead of one... frontpage_big_spot.jpg test 1.snap.png

The first one is the intended one as you can see in line path: './evidence/frontpage_big_spot.jpg' The second one i have no idea where is it coming from, also it's the wrong format? How can i avoid this? I can't find any info in other issues or in the docs.

Thanks and regards.

[NimaSoroush]

Hi @jbures,

The problem is that you are trying to name your screenshot image file in a wrong way, instead, you should use Differencify provided options to that for you.

Based on testoption you can provide a testName which is basically your screenshot name.

So I would re-write your script like this:

const snap = async () => {
    await differencify.launchBrowser();

    const target = differencify.init({
      chain: false,
      testName: frontpage_big_spot,
    });
    const page = await target.newPage();

    await page.setViewport({ width: 1360, height: 768 });
    await page.goto('https://www.gog.com');
    await page.addStyleTag({ path: './src/freeze.css' }); // Freezing animations and transitions
    await page.evaluate(hideElement); // hiding dynamic elements to avoid false-positives
    await page.waitFor('.js-background-0'); // waiting for big image to continue

    const image = await page.screenshot({
        type: 'jpeg',
    });

    await target.toMatchSnapshot(image);

    await page.close();
    await differencify.cleanup();
};

snap();

The reason behind that is, if you try to take randon screenshots, Differencify wouldn't know where to find them to compare against new screenshots.

[jbures]

Hi @NimaSoroush, i kinda figured out this could be the reason... but it doesn't work for me because i need to document a whole flow in one test and having screenshots with different names makes it easier to know which step we are in... rather than just having 1, 2 ,3 on the name.

So anywan, thanks for the help!

[NimaSoroush]

Hi @jbures , Have you tried something like this https://github.com/NimaSoroush/differencify/blob/61142708e7fa54bdceee7d4aab1f038cddcfc607/src/integration.tests/integration.test.js#L200

[gokatz]

I'm having the exact use case as @jbures's. if I use the differencify as mentioned in "Multiple toMatchSnapshot on chained object" section, my screenshot will be named like, test 1.snap.png, test 1 2.snap.png, test 1 2 3.snap.png and go on. Is it possible to provide names for the screenshot individually instead of one per differencify instance (during init)?