Playwright tests not opening new tab url correctly

Question

I am trying to click on a button that opens a new tab in the same window using Playwright. When I run the test locally (headed) in VS code the flow works correctly. However when I run the tests in my GitLab CI (not headed) the tab still opens but it seems to truncate the entire query string parameters of the URL of the new tab.

The test is running on Chromium

This is the code I am running to open new tab:

  async cancelInsurance() {
        const popupPromise = this.page.waitForEvent('popup');
        await this.page.locator(Selectors.idpLink).click();
        const newTab = await popupPromise;
        console.log(newTab.url());
        await newTab.click(Selectors.cancelButton);
       
    }

example url:

1. Url in gitlab: https://test-environment.com/insurance_details.en-gb.html

2. Url locally (how it should open): https://test-environment.com/insurance_details.en-gb.html?&aid=100000&auth_key=12345

update: I ran DEBUG=pw:api:

  pw:api => locator.click started +1ms
  pw:api waiting for event "popup" +8ms
  pw:api   checking visibility of locator(':scope') +7ms
  pw:api waiting for locator('[data-testid="insurance-banner-card-view-details_testid"]') +2ms
  pw:api   locator resolved to <a target="_blank" aria-label="View insurance summary" data-testid="insurance-banner-card-view-details_testid" class="a83ed08757 c21c56c305 bf0537ecb5 ab98298258 af7297d90d" href="https://test-environment.com/insurance_details.en-gb.html">…</a> +2ms
  pw:api attempting click action +4ms
  pw:api   waiting for element to be visible, enabled and stable +0ms
  pw:api <= elementHandle.isHidden succeeded +2ms
  pw:api   element is visible, enabled and stable +29ms
  pw:api   scrolling into view if needed +0ms
  pw:api   done scrolling +1ms
  pw:api   performing click action +7ms
  pw:api   click action done +13ms
  pw:api   waiting for scheduled navigations to finish +0ms
  pw:api   navigations have finished +0ms
  pw:api <= locator.click succeeded +5ms
  pw:api   "load" event fired +750ms
  pw:api   navigated to "https://ct.pinterest.com/ct.html" +6ms
  pw:api   "commit" event fired +496ms
  pw:api   "commit" event fired +6ms
  pw:api   navigated to "https://test-environment/insurance_details.en-gb.html" +1ms
  pw:api <= page.waitForEvent succeeded +4ms
https://test-environment.com/insurance_details.en-gb.html
  pw:api => page.click started +2ms
  pw:api waiting for locator('button:has(span.e4adce92df:has-text("cancel"))') +14ms
  pw:api   "domcontentloaded" event fired +

Answer 1

This is the solution which helped me in the past with discrepancies arising out of headless ON and OFF. Let's see if this helps you too. In the headless ON mode, the browser agent was not respected. So i had to add the below code to make your application treat the same when in headless and headed mode. Try adding the below user agent code before launching the url.

await context.addInitScript(() => {
      Object.defineProperty(navigator, 'userAgentData', {
        get: () => ({
          brands: [{ brand: 'Google Chrome' }],
        }),
      })
    })