"Non-deterministic" screenshots after viewport resize

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?

[inakianduaga]

@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

[stale[bot]]

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!