[Question] How can I append a string to an existing user agent string in the project config?

[dangayle]

We are using Playwright to smoke test our site with four different browsers, with desktop Chrome, desktop Safari, mobile Chrome, and mobile Safari. We'd like to be able to track which hits are coming from Playwright, but the UA strings look identical to normal UA strings.

I know we can pass in our own string, but that overwrites the full string. I could hard code it per browser, I'd rather append something to the end of the existing UA string.

Here are the current user agent strings:

Running 8 tests using 4 workers
[desktop-chrome] › browse-urls/spec.js:15:7 › Browse multiple urls from file test › / page hit › When I navigate to /, then the page loads successfully
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4863.0 Safari/537.36
[mobile-chrome] › browse-urls/spec.js:15:7 › Browse multiple urls from file test › / page hit › When I navigate to /, then the page loads successfully
Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4863.0 Mobile Safari/537.36
[mobile-safari] › browse-urls/spec.js:15:7 › Browse multiple urls from file test › / page hit › When I navigate to /, then the page loads successfully
Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1
[desktop-safari] › browse-urls/spec.js:15:7 › Browse multiple urls from file test › / page hit › When I navigate to /, then the page loads successfully
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

---

Is it possible to get the existing UA strings from the device so that I can append to it in our project config?

/* Configure projects for major browsers */
{
  projects: [
    {
      name: "desktop-chrome",
      timeout: 60000,
      use: {
        userAgent: "playwright-desktop-chrome",
        ...devices["Desktop Chrome"],
      },
    },
    {
      name: "desktop-safari",
      timeout: 60000,
      use: {
        userAgent: "playwright-desktop-safari",
        ...devices["Desktop Safari"],
      },
    },
    {
      name: "mobile-chrome",
      timeout: 60000,
      use: {
        userAgent: "playwright-mobile-chrome",
        ...devices["Pixel 5"],
      },
    },
    {
      name: "mobile-safari",
      timeout: 60000,
      use: {
        userAgent: "playwright-mobile-safari",
        ...devices["iPhone 12"],
      },
    },
  ];
}

The end result would ideally be like this:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4863.0 Safari/537.36 playwright-desktop-chrome

Thank you!

[rwoll]

You can get the UA for the device and override+append in your project like so:

import { devices } from '@playwright/test';
…
  projects: [
    {
      name: "desktop-chrome",
      use: {
        ...devices["Desktop Chrome"], // spread to pick up defaults (including `userAgent`)
        userAgent: devices['Desktop Chrome'].userAgent + ' playwright-desktop-chrome' // get `userAgent`, append to it, and override; NB this line must come after the spread
      },
    },
…

Does this work for your project?

[dangayle]

@rwoll That is perfect. That's exactly what I was looking for.

[medabalimi-jagadeesh]

How can this be achieved in playwright-java?