UI seems different on puppeteer

Question

Even though most of the process of my end-to-end test with puppeteer works fine ( which is a rather simply a series of page.select/type/waitfor/etc) the UI seems skewed.

When the process is over, at the very end of it the UI readjusts to what it should look like but only after everything has concluded. I tried firing up a plain Chromium instance and it looks as it should be as well.

test code looks like so

beforeAll(async () => {
  browser = await puppeteer.launch(
    {
      headless: false,
      slowMo: 250,
    }
  )
  page = await browser.newPage()
  await page.goto('http://localhost:3000/');
})

describe('on page load', () => {
  test('MessageLists loads', async () => {
    await page.waitForSelector('.MessageList', { timeout: 3000 })
    await page.waitForSelector('.messageOuterContainer', { timeout: 10000 })
  },
    16000
  );
  test('Post Question', async () => {
    await page.waitForSelector('.messageOuterContainer', { timeout: 10000 })
    await page.focus('.input');
    await page.keyboard.type('test');
    await page.$('.AnswerList');
    await page.screenshot({ path: 'screenshot1.png' });
  }, 20000)
})

afterAll(() => {
  // browser.close()
})

Im on MacOS Mojave 10.14 though i imagine this isnt the culprit here.

The UI is "skewed" (what does that even mean here?) during the test but "readajusts" itself after the test? And what is your question? — Thomas Dondorf, May 03 '19 at 16:08
Its hard to explain with words but lets just say it looks different than it should. Imagine if your page needed to look like A but insteaded looked like B. While puppeteer runs the page looks like B. When its done, the layout reflows and it looks like A. Its a presentation only thing as everything works well but it does makes me wonder why it happens. So the question is, why and is anyone else experiencing this. To give a better description, imagine that while puppeteer runs, no matter how i resize the window it looks as if it all runs in an iframe of width 300, height 600 — Return-1, May 06 '19 at 06:56
Oh, I see. That's the viewport. You cannot simply resize the browser, but you have to use functions for that. I added an answer with more information :) — Thomas Dondorf, May 06 '19 at 15:48

score 1 · Accepted Answer · answered May 06 '19 at 15:47

Even if you launch puppeteer in headless: false mode, the page will be run with a given viewport. By default that viewport size is 800x600. If you resize the window to something bigger it might indeed look like the page is run inside an iframe. You cannot resize the viewport by resizing the browser window. You have to rely on functions for that.

Code sample

To change the default viewport, you can add an argument when calling puppeteer.launch:

const browser = await puppeteer.launch({
    defaultViewport: { // example: 1600x800
        width: 1600,
        height: 800
    },
    headless: false,
    slowMo: 250,
})

You can also change it by calling the function page.setViewport.

makes sense. i guess i was expecting the default viewport to be the one that the page is opening with but as they say on the documentation its 800x600. Thanks a bunch — Return-1, May 07 '19 at 09:30

UI seems different on puppeteer

1 Answers1