diff --git a/nextjs-app-v13/test/visual/nextjs.spec.js b/nextjs-app-v13/test/visual/nextjs.spec.js index 820d1145..66b977af 100644 --- a/nextjs-app-v13/test/visual/nextjs.spec.js +++ b/nextjs-app-v13/test/visual/nextjs.spec.js @@ -16,7 +16,7 @@ describe('NextJS Aperture App', () => { { url: '/components/icon.html', name: 'Icon' }, { url: '/components/icon-button.html', name: 'Icon Button' }, { url: '/components/link.html', name: 'Link' }, - { url: '/components/lottie-player.html', name: 'Lottie Player' }, + { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true }, { url: '/components/modal.html', name: 'Modal' }, { url: '/components/notification.html', name: 'Notification' }, { url: '/components/spinner.html', name: 'Spinner' }, @@ -30,6 +30,9 @@ describe('NextJS Aperture App', () => { it(`should navigate to the ${page.name} page.`, async () => { await browser.url(`${page.url}?PERCY=true`); await waitForPageTitleToBe(page.name); + // Some components might require extra time to mount and load its dependencies. + // Delaying the screenshot helps to avoid false negatives in diffs. + if (page.pauseBeforeScreenshot) await browser.pause(5000); await percyScreenshot(page.name); }); }); diff --git a/nextjs-app-v14/test/visual/nextjs.spec.js b/nextjs-app-v14/test/visual/nextjs.spec.js index e1bbbb2e..3f94b91c 100644 --- a/nextjs-app-v14/test/visual/nextjs.spec.js +++ b/nextjs-app-v14/test/visual/nextjs.spec.js @@ -16,7 +16,7 @@ describe('NextJS Aperture App', () => { { url: '/components/icon', name: 'Icon' }, { url: '/components/icon-button', name: 'Icon Button' }, { url: '/components/link', name: 'Link' }, - { url: '/components/lottie-player', name: 'Lottie Player' }, + { url: '/components/lottie-player', name: 'Lottie Player', pauseBeforeScreenshot: true }, { url: '/components/modal', name: 'Modal' }, { url: '/components/notification', name: 'Notification' }, { url: '/components/spinner', name: 'Spinner' }, @@ -30,6 +30,9 @@ describe('NextJS Aperture App', () => { it(`should navigate to the ${page.name} page.`, async () => { await browser.url(`${page.url}?PERCY=true`); await waitForPageTitleToBe(page.name); + // Some components might require extra time to mount and load its dependencies. + // Delaying the screenshot helps to avoid false negatives in diffs. + if (page.pauseBeforeScreenshot) await browser.pause(5000); await percyScreenshot(page.name); }); }); diff --git a/nuxt-app/test/visual/nuxt.spec.js b/nuxt-app/test/visual/nuxt.spec.js index edaf9ca5..76beab57 100644 --- a/nuxt-app/test/visual/nuxt.spec.js +++ b/nuxt-app/test/visual/nuxt.spec.js @@ -16,7 +16,7 @@ describe('Nuxt Aperture App', () => { { url: '/components/icon.html', name: 'Icon' }, { url: '/components/icon-button.html', name: 'Icon Button' }, { url: '/components/link.html', name: 'Link' }, - { url: '/components/lottie-player.html', name: 'Lottie Player' }, + { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true }, { url: '/components/modal.html', name: 'Modal' }, { url: '/components/notification.html', name: 'Notification' }, { url: '/components/spinner.html', name: 'Spinner' }, @@ -30,6 +30,9 @@ describe('Nuxt Aperture App', () => { it(`should navigate to the ${page.name} page.`, async () => { await browser.url(`${page.url}?PERCY=true`); await waitForPageTitleToBe(page.name); + // Some components might require extra time to mount and load its dependencies. + // Delaying the screenshot helps to avoid false negatives in diffs. + if (page.pauseBeforeScreenshot) await browser.pause(5000); await percyScreenshot(page.name); }); }); diff --git a/vanilla-app/test/visual/vanilla.spec.js b/vanilla-app/test/visual/vanilla.spec.js index 8a6a3a7a..62a55266 100644 --- a/vanilla-app/test/visual/vanilla.spec.js +++ b/vanilla-app/test/visual/vanilla.spec.js @@ -16,7 +16,7 @@ describe('Vanilla Aperture App', () => { { url: '/components/icon.html', name: 'Icon' }, { url: '/components/icon-button.html', name: 'Icon Button' }, { url: '/components/link.html', name: 'Link' }, - { url: '/components/lottie-player.html', name: 'Lottie Player' }, + { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true }, { url: '/components/modal.html', name: 'Modal' }, { url: '/components/notification.html', name: 'Notification' }, { url: '/components/spinner.html', name: 'Spinner' }, @@ -30,6 +30,9 @@ describe('Vanilla Aperture App', () => { it(`should navigate to the ${page.name} page.`, async () => { await browser.url(`${page.url}?PERCY=true`); await waitForPageTitleToBe(page.name); + // Some components might require extra time to mount and load its dependencies. + // Delaying the screenshot helps to avoid false negatives in diffs. + if (page.pauseBeforeScreenshot) await browser.pause(5000); await percyScreenshot(page.name); }); });