[Feature] Set user agent

[LarsDenBakker]

Puppeteer allows setting the user agent on the fly: https://github.com/puppeteer/puppeteer/blob/v5.2.1/docs/api.md#pagesetuseragentuseragent

It would be great if we could do this in playwright as well. It's possible to set the user agent at the start of the page right now, but during unit tests it would be useful to change it on the fly.

[pavelfeldman]

Could you share more about your use case? It can't happen in the real world and it will break sites that so UA sniffing on the server, so we don't have it.

[LarsDenBakker]

I'm creating a test runner (https://github.com/modernweb-dev/web/tree/master/packages/test-runner) using playwright (and puppeteer) for controlling a browser to run tests in the browser.

We allow users to communicate with the browser launcher to change values like viewport and user agent on the fly. This could be used before rendering your react/vue/angular/web component, so the use case is different from testing a fully integrated websites which playwright or puppeteer is typically used for.

We will also add a feature for setting some values like user agent before the entire page is loaded, but it's much more convenient when users can do this from the browser directly.

Example code, this is run in the browser not in node js:

import { setViewport, setUserAgent } from '@web/test-runner-commands';
import { expect, fixture, html } from '@web/test-helpers';
import './my-component.js';

describe('my component', () => {
  it('renders a special button on small viewport', async () => {
    await setViewport({ width: 360, height: 640 });
    const element = await fixture(html`<my-component></my-component>`);
    expect(element.shadowRoot.querySelector('special-button')).to.exist;
  });

  it('renders a special notification on IE11, async () => {
    await setUserAgent(ie11UserAgent);
    const element = await fixture(html`<my-component></my-component>`);
    expect(element.shadowRoot.querySelector('special-message')).to.exist;
  });
});

[pavelfeldman]

In Playwright, you would create browser context / page with the given user agent as the first line of your test. We try to be as close to the browser as we can: browser can change the viewport size, but can't change the user agent. Creating new context isn't expensive, so we prefer that to setting the value on the recycled page.

[LarsDenBakker]

That doesn't quite work for my use case, as the code to change the user agent is executed from a test in the browser page itself.

It's not like jest-playwright, where the tests run in node js and the tests interact directly with playwright. It's more like Karma where you run tests in an actual browser environment. We can't restart the page halfway through a test file.

[viraxslot]

Hi, @pavelfeldman. Example of the real case: our site has browser compatibility logic on the frontend. If browser is "old" we offer to install one of the modern browsers. I saw such old-browser-popups on several sites. User agent changing could be good help in testing such case.

[pavelfeldman]

@viraxslot you should be able to create two contexts with different user agents using browser.newContext or browser.newPage and test this functionality just fine. This request is about changing the user agent of the page on the fly and that's something that can't really happen.

[pavelfeldman]

Closing as won't fix for now!