How to add custom headers in Playwright

Question

headers["user-agent"] = fakeUa();
  console.log(fakeUa())
  let firstReq = true;
    page.route('**/*', route => {
    const request = route.request()
    //console.log(request.url(), JSON.stringify(request.headers()));
    
    if("x-j3popqvx-a" in request.headers()){
        headers = request.headers();
        //console.log(headers);
        console.log("exiting");
        return;
    }
    else {
        console.log("in");
        return route.continue({headers: headers});
    }
  });
  let pageRes = await page.goto(url, {waitUntil: 'load', timeout: 0});

I want to add fake user agent when sending request to url. But it doesn't add the fake useragent rather goes with the default one.

score 15 · Accepted Answer · edited Nov 08 '22 at 18:28

15

While in puppeteer it was possible with the page.setUserAgent() method to apply a custom UA and page.setExtraHTTPHeaders() to set any custom headers, in playwright you can set custom user agent (userAgent) and headers (extraHTTPHeaders) as options of browser.newPage() or browser.newContext() like:

const page = await browser.newPage({ userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36' })

const page = await browser.newPage({ 
  extraHTTPHeaders: { 
    'Cache-Control': 'no-cache' 
  } 
})

Edit: In case you are using it with newContext() usage looks like this (make sure to set userAgent in the settings of newContext and not in newPage!):

const context = await browser.newContext({ userAgent: 'hello' })
const page = await context.newPage()
// to check the UA:
console.log(await page.evaluate(() => navigator.userAgent))

edited Nov 08 '22 at 18:28

Mordred

3,734
3
36
55

answered Jun 27 '20 at 08:03

theDavidBarton

7,643
4
24
51

Please explain the concept of context in playwright? – Amna Arshad Jun 27 '20 at 08:13
`BrowserContext` is kinda new browser session that has more emphasis on in playwright than in puppeteer, especially as it helps multi browser/multi device execution. You can read more about its concept [here](https://playwright.dev/#version=v1.1.1&path=docs%2Fcore-concepts.md&q=browser-contexts) and [here](https://playwright.dev/#version=v1.1.1&path=docs%2Fapi.md&q=class-browsercontext) in the docs – theDavidBarton Jun 27 '20 at 08:26
.newPage({ userAgent: fakeUa()}). This is how Im setting the header but once if condition is met and code exits and I print headers they are the same as default – Amna Arshad Jun 27 '20 at 10:15
If you are using `context` make sure to set the `userAgent` option in `newContext()` and not in `newPage`. The higher level defines the user agent. You cen test it if you have `BrowserContext` and you are setting UA in both which one will be in the headers. See my edit above. – theDavidBarton Jun 27 '20 at 11:54
Just a caveat: if the userAgent is set with either newContext() or newPage, it works until you're on the page. Once next goto() is used, userAgent is lost. Maybe bug, maybe feature. :( Luckily, .launch ({args:[ '--user-agent=My Agent']}) works for me. – BuckTheBug Mar 23 '21 at 14:16
1

came in here because of xk6-browser where the support for typescript is not there yet. this is the working version for me: `const context = browser.newContext({ extraHTTPHeaders: { 'x-force-canary': true } }); ` – Diogo Mar 30 '22 at 10:13

score 0 · Answer 2 · answered Feb 17 '23 at 22:28

If you're using @playwright/test, you can set a user agent as follows:

import {expect, test} from "@playwright/test"; // ^1.30.0

const userAgent =
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36";

test.describe("with user agent", () => {
  test.use({userAgent});

  test("does stuff", async ({page}) => {
    await page.goto("https://example.com/");
    await expect(page.locator("h1")).toHaveText("Example Domain");
  });
});

How to add custom headers in Playwright

2 Answers2

Linked