UI seems different on puppeteer - 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.

Answer 1

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.