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.

"Non-deterministic" screenshots after viewport resize

See original GitHub issue

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: 0.13.0
  • Platform / OS version: MacOS, (also Debian under docker)
  • URLs (if applicable):
  • Node.js version: 8.9.4

What steps will reproduce the problem?

  1. Render some JS for a fixed code for different viewports
 const viewports: [
    { width: 320, height: 800 },
    { width: 400, height: 800 },
    { width: 768, height: 600 },
    { width: 1024, height: 400 },
    { width: 1280, height: 400 }
  ],

  test('correctly renders home bike fragment', async () => {
    const page = await browser.newPage()
    await page.goto(`http://localhost:3000/somePageWithFixedHtmlJsCss`)

    for (const viewport of viewports) {
      await page.setViewport(viewport)
      const screenshot = await page.screenshot()
      expect(screenshot).toMatchImageSnapshot(settings.jest_image) // Jest expectation to determine if screenshot has changed compared to last run
    }
  })
  1. Compare snapshots using Jest

What is the expected result?

Snapshots shouldn’t change between runs since the html / JS is fixed (so test should pass)

What happens instead?

Tests sometime fail, due to snapshots differing slightly for some viewports, assumption is that the screenshot call comes before chrome has had time to fully render the content.

Is there any hook to find out that chrome has finished rendering that I could add after the viewport resize and before the snapshot?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
inakianduagacommented, Jan 27, 2018

@dowsanjack This is what seems to be working well for us (using a 0.005 threshold for snapshot failure in comparisons).

  async function setViewport(page: puppeteer.Page, viewport: { width: number; height: number }) {
    const watchDog = page
      .mainFrame()
      .waitForFunction(`window.innerWidth === ${viewport.width} && window.innerHeight === ${viewport.height} `)

    await page.setViewport(viewport)
    await watchDog
  }

using this for changing the viewport, plus running the whole thing in a dockerized container (to prevent local macOS / CI linux differences in font rendering and what not)

FROM node:8.5.0

RUN apt-get update
RUN	apt-get install -y \
	gconf-service \
	libasound2 \
	libatk1.0-0 \
	libc6 \
	libcairo2 \
	libcups2 \
	libdbus-1-3 \
	libexpat1 \
	libfontconfig1 \
	libgcc1 \
	libgconf-2-4 \
	libgdk-pixbuf2.0-0 \
	libglib2.0-0 \
	libgtk-3-0 \
	libnspr4 \
	libpango-1.0-0 \
	libpangocairo-1.0-0 \
	libstdc++6 \
	libx11-6 \
	libx11-xcb1 \
	libxcb1 \
	libxcomposite1 \
	libxcursor1 \
	libxdamage1 \
	libxext6 \
	libxfixes3 \
	libxi6 \
	libxrandr2 \
	libxrender1 \
	libxss1 \
	libxtst6 \
	ca-certificates \
	fonts-liberation \
	libappindicator1 \
	libnss3 \
	lsb-release \
	xdg-utils \
	wget
0reactions
stale[bot]commented, Jul 27, 2022

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!

Read more comments on GitHub >

github_iconTop Results From Across the Web

When trying to capture a screenshot my screen shifts or resizes
When trying to capture a screen shot the screen will resize if more than one monitor is attached to the computer and the...
Read more >
Cypress.Screenshot
The Screenshot API allows you set defaults for how screenshots are captured during .screenshot and automatic screenshots taken during test failures.
Read more >
Snapshot Testing - Jest
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
Read more >
Puppeteer resize before screenshot is causing flaky visual diff ...
Some screenshots are inconsistent because the viewport is being resized when Puppeteer takes a screenshot. My app has animations whenever the  ...
Read more >
Frontend testing standards and style guidelines - GitLab Docs
href is reset before every test to avoid earlier tests affecting later ones. If your tests require window.location.href to take a particular value,...
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