question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Visual Testing: Snapshots aren't capturing images

See original GitHub issue

Context:

  • Playwright Version: 1.2.2.
  • Operating System: Ubuntu 20.0.4 Linux Subsystem for Windows 11 Home 10.0.22000
  • Node.js version: v14.19.3
  • Browser: Firefox, Mobile Safari
  • Extra:

Code Snippet

    test('Douglas 1', async ({ page }) => {
        await page.goto('https://yesibuybuyer1.carrot.com/', { waitUntil: 'networkidle' });
        expect(await page.screenshot({fullPage : true })).toMatchSnapshot();
      });

Describe the bug

I am trying to take golden snapshots of our production environment to compare to our staging environment for regression testing. The snapshots I’m taking are missing lazy loaded images for Firefox and Mobile Safari, causing invalid tests when run again. You can see down in the screenshots below where the images should load and where they are not.

I have checked in Browserstack the tests that are failing (Firefox, Mobile Safari) and the images are displayed correctly in Browserstack.

I’ve tried implementing waits, ```scrollToBottom`` etc. and its always the same issue with just those browsers.

Add any other details about the problem here. image image image image

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
yury-scommented, May 24, 2022

I’ve tried implementing waits, ```scrollToBottom`` etc. and its always the same issue with just those browsers.

The image has loading="lazy" attribute so the browser may delay its load. You can add await page.locator('img.wp-image-642').scrollIntoViewIfNeeded(); to make the image appear in the viewport and start loading but then you also need to wait for it to finish loading, so something like this should do:

  const img = page.locator('img.wp-image-642');
  // kick off loading
  await img.scrollIntoViewIfNeeded();
  // wait for the image to finish loading
  await img.evaluate(image => image.complete || new Promise(f => image.onload = f));

We can probably add something like expect(img).toBeLoaded(); but then you’d have to wait for each lazy image on the page manually.

1reaction
aslushnikovcommented, Jun 2, 2022

@christopher-r-doucet I’m surprised this takes whopping 5 minutes for just 14 images!

Can you share the script you run so that I can debug it and see what takes time?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Visual Regression Testing. what, why and how - Medium
We run the testing tool in our application in order to capture all the screenshots, based on the previously written scenarios. The tool...
Read more >
Why Screenshot Image Comparison Tools Fail With Dynamic ...
Companies visually test their applications using image comparison tools, but not all tools are reliable, often delivering false-positives ...
Read more >
Visual testing in Storybook
Visual testing catches bugs by capturing and comparing image snapshots in a real browser. It allows you to automate the process of checking ......
Read more >
Snapshot Testing - Jest
Snapshot tests are a very useful tool whenever you want to make sure ... the bug before re-generating snapshots to avoid recording snapshots...
Read more >
Visual Regression Testing: 5 Best Tools to Catch Visual Bugs
While a human tester would immediately notice the visual bug in the example above, take a look at the two screenshots below. Does...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found