microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
64.95k stars 3.53k forks source link

[BUG] args options ignored when launching firefox #910

Closed hdorgeval closed 4 years ago

hdorgeval commented 4 years ago

Context:

Code Snippet

    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const playwright = require('playwright');

    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    const browser = await playwright['firefox'].launch({
      headless: false,
      args: ['-height 666', '-width 888'],
    });
    const context = await browser.newContext();
    const page = await context.newPage();

    // eslint-disable-next-line no-undef
    const browserHeight = await page.evaluate(() => window.outerHeight);
    // eslint-disable-next-line no-undef
    const browserWidth = await page.evaluate(() => window.outerWidth);
    // eslint-disable-next-line no-console
    console.log(`expected browser height: 666; current browser height: ${browserHeight}`);
    // eslint-disable-next-line no-console
    console.log(`expected browser width: 888; current browser width: ${browserWidth}`);

    await browser.close();

Describe the bug

I expect that browser width and height to be the ones set in the options arg passed to the launch() method.

Works for chromium with the options set as

const options: LaunchOptions = {
      headless: false,
      args: ['--window-size=888,666'],
};
pavelfeldman commented 4 years ago

The following snippet worked for me:

const browser = await playwright['firefox'].launch({
      headless: false,
     // either pass as a=b or 'a', 'b', no spaces inside
      args: ['-height=666', '-width=888'],
    });
// you want to opt-out from the default 800/600 viewport.
const context = await browser.newContext({ viewport: null });
const page = await context.newPage();

Note that the actual outer height is going to be higher than what you specify due to the toolbar. Please feel free to reopen if that did not address your issue.

hdorgeval commented 4 years ago

@pavelfeldman : thank you very much for your fast answer 👍 It works for me also thanks to your snippet. Is there a similar snippet to be able to resize the webkit browser window?

pavelfeldman commented 4 years ago

Resizing via page.setViewport (page.setViewportSize in 0.11+) should change the size of both Firefox and WebKit in headful mode. It would not work for Chromium though - Chromium uses lower level emulation capabilities for resize, so you still need the args.

Do you mind sharing more about your use case?

hdorgeval commented 4 years ago

Hi @pavelfeldman , As you may notice, I am currently developing a Fluent API around Playwright.

In this API, I want to ensure that the browser window size is as near as possible to the physical size of the emulated device. For example, if I want to run a test by emulating an iPhone, I do not want to have a 'big' browser window with a 'small' active size in it (the viewport).

When I open a browser in the real life, the viewport size seems to fit exactly the browser window size, so in headfull scenarios the viewport should always be set by default to null in Playwright.

So in my opinion, viewport size should always be correlated to the browser window size and vice versa: setting up the viewport size, regardless of the opened browser window size, is only a way to overcome some display hardware limitation on CI environment.