[BUG] Visual Testing: Snapshots aren't capturing images
See original GitHub issueContext:
- 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.
Issue Analytics
- State:
- Created a year ago
- Comments:11 (6 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The image has
loading="lazy"
attribute so the browser may delay its load. You can addawait 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:We can probably add something like
expect(img).toBeLoaded();
but then you’d have to wait for each lazy image on the page manually.@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?