[Bug]: Chromium browser context sends empty user agent unless explicitly set

[garysassano]

Version

0.0.10

Steps to reproduce

Deploy the following worker

import { launch } from '@cloudflare/playwright';

export default {
  async fetch(request: Request, env: Env) {
    const browser = await launch(env.MYBROWSER);
    const page = await browser.newPage();

    await page.goto('https://www.google.com/shopping/product/2952639642818279633/offers');

    const img = await page.screenshot();
    await browser.close();

    return new Response(img, {
      headers: {
        'Content-Type': 'image/png',
      },
    });
  },
}

Expected behavior

I expected Playwright to return this screenshot of the page:

Actual behavior

Playwright isn't able to render JavaScript and returns a blank page:

Additional context

No response

Environment

Ubuntu 24.04

[ruifigueira]

I was able to reproduce the issue with both @cloudflare/playwright and @cloudflare/puppeteer, and I also got the blank page.

I tried to go directly to https://www.google.com/shopping and perform a search there, and in that case it renders.

Here's my code that records the corresponding trace (you can then use https://trace.playwright.dev/ to open it), and I'm attaching it too in this ticket):

import { launch } from '@cloudflare/playwright';
import fs from '@cloudflare/playwright/fs';

export default {
  async fetch(request: Request, env: Env) {
    const browser = await launch(env.MYBROWSER);
    const context = await browser.newContext();
    await context.tracing.start({ screenshots: true, snapshots: true });
    const page = await context.newPage();
    try {
      await page.goto('https://www.google.com/shopping');
      await page.getByRole('combobox', { name: 'What are you looking for?' }).click();
      await page.getByRole('combobox', { name: 'What are you looking for?' }).fill('Intel Core i9-14900K - LGA 1700');
      await page.getByRole('combobox', { name: 'What are you looking for?' }).press('Enter');
      await page.getByRole('button', { name: 'Accept all' }).click();
      await page.getByText('COMPARE PRICES (10+)').first().click();
      await page.waitForTimeout(2_000);
    } catch (error) {
      // do nothing
    }
    await context.tracing.stop({ path: 'trace.zip' });

    await browser.close();

    return new Response(fs.readFileSync('trace.zip'), {
      headers: {
        'Content-Type': 'application/zip',
        'Content-Disposition': 'attachment; filename="trace.zip"',
      },
    });
  },
};

Trace: trace.zip

[ruifigueira]

The following URL works: https://www.google.com/shopping/product/2952639642818279633

Code:

import { launch } from '@cloudflare/playwright';

export default {
  async fetch(request: Request, env: Env) {
    const browser = await launch(env.MYBROWSER);
    const page = await browser.newPage();
    await page.goto('https://www.google.com/shopping/product/2952639642818279633');
    const img = await page.screenshot({ fullPage: true });
    await browser.close();

    return new Response(img, {
      headers: {
        'Content-Type': 'image/png',
      },
    });
  },
};

The instanciated browser seems to be in UK, and maybe that can explain the different behavior (google shopping landing page there is different from the one in Portugal, for instance):

[ruifigueira]

I think I found out the issue: Google may be providing a different site version depending on the user agent.

I tried with the following code:

import { launch } from '@cloudflare/playwright';

export default {
  async fetch(request: Request, env: Env) {
    const browser = await launch(env.MYBROWSER);
    const context = await browser.newContext({
      userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36'
    });

    const page = await context.newPage();
    await page.goto('https://www.google.com/shopping/product/2952639642818279633/offers');

    const img = await page.screenshot();
    await browser.close();

    return new Response(img, {
      headers: {
        'Content-Type': 'image/png',
      },
    });
  },
};

and it works as expected.

[garysassano]

Isn't Chrome the default browser when not specified? So I don't get why you would need to override the user agent.

[ruifigueira]

@cloudflare/playwright is not sending the user agent, even if it's using a chrome browser, so it seems to be a bug.

You can check that with the following code:

import { launch } from '@cloudflare/playwright';

export default {
  async fetch(request: Request, env: Env) {
    const browser = await launch(env.MYBROWSER);
    const context = await browser.newContext({
      // uncomment to use an explicit user agent
      // userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
    });
    const page = await context.newPage();
    const response = await page.goto('https://1.1.1.1/cdn-cgi/trace');
    const body = await response?.text();
    await browser.close();

    return new Response(body, {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

Without explicit userAgent we get:

fl=736f179
h=1.1.1.1
ip=104.28.159.177
ts=1747462219.709
visit_scheme=https
uag=
colo=LHR
sliver=010-tier1
http=http/2
loc=GB
tls=TLSv1.3
sni=off
warp=on
gateway=on
rbi=on
kex=X25519Kyber768Draft00

With explicit userAgent:

fl=736f320
h=1.1.1.1
ip=104.28.159.197
ts=1747462289.77
visit_scheme=https
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3
colo=LHR
sliver=none
http=http/2
loc=GB
tls=TLSv1.3
sni=off
warp=on
gateway=on
rbi=on
kex=X25519Kyber768Draft00

[garysassano]

In Playwright, the default user agent behavior for browser contexts (Chromium) can be observed as follows:

1. Chromium (Headless vs. Headful)

The user agent string differs depending on whether Chromium is launched in headless or headful mode.

import { chromium, Browser, BrowserContext, Page } from 'playwright';

(async () => {
  // Headless mode
  const headlessBrowser: Browser = await chromium.launch({ headless: true });
  const headlessContext: BrowserContext = await headlessBrowser.newContext();
  const headlessPage: Page = await headlessContext.newPage();
  const headlessUserAgent = await headlessPage.evaluate(() => navigator.userAgent);
  console.log('Headless user agent:', headlessUserAgent);
  await headlessBrowser.close();

  // Headful mode
  const headfulBrowser: Browser = await chromium.launch({ headless: false });
  const headfulContext: BrowserContext = await headfulBrowser.newContext();
  const headfulPage: Page = await headfulContext.newPage();
  const headfulUserAgent = await headfulPage.evaluate(() => navigator.userAgent);
  console.log('Headful user agent:', headfulUserAgent);
  await headfulBrowser.close();
})();

Actual output from local environment:

Headless user agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/136.0.7103.25 Safari/537.36
Headful user agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

---

2. API Requests (Non-browser contexts)

In these cases, Playwright uses a specific user agent. You can verify this with the following code:

import { request, APIRequestContext } from 'playwright';

(async () => {
  const apiContext: APIRequestContext = await request.newContext();

  // Make a GET request and inspect its headers
  const response = await apiContext.get('https://httpbin.org/headers');
  const responseBody = await response.json();

  console.log('API Request User-Agent:', responseBody.headers['User-Agent']);

  await apiContext.dispose();
})();

Actual output from local environment:

API Request User-Agent: Playwright/1.52.0 (x64; ubuntu 24.04) node/22.15

---

Why this matters for the Cloudflare fork

The Cloudflare fork of Playwright fails to specify or emulate the correct default user agent for the Chromium browser context, particularly in headful mode, causing websites to block requests or misidentify the client.

To align with upstream Playwright behavior, it is recommended to explicitly set the user agent when creating a browser context, for example:

import { chromium, Browser, BrowserContext } from 'playwright';

(async () => {
  const browser: Browser = await chromium.launch(); // Can be headful or headless
  const context: BrowserContext = await browser.newContext({
    userAgent: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36"
  });
  // ... proceed to use the context and page objects
  await browser.close();
})();

This ensures the user agent mimics a real Chromium browser for web browsing contexts.

[ruifigueira]

Hi @garysassano, thanks for reporting the issue. We just released https://github.com/cloudflare/playwright/releases/tag/v0.0.11, it fixes the user agent issue.

I'm closing this issue.