[Question] I cannot set cookies properly - my page doesn't even load

I am using Playwright Test 1.23.1.
I am testing an eCommerce site. I have a scenario that loads the site for Europe or US depending on the cookies set in the browser.
So I want to do it inside a fixture file like this:

// common-fixtures.ts
export const authenticatedTestEU = authenticatedTest.extend<{}>({
  storageState: './euCustomerStorageState.json',
  setCookies: async ({ browser, page, baseURL }) => {
    const browserContext = await browser.newContext();
    const cookieValues = [
      {
        name: 'myCookie',
        value: 'myValue',
        url: baseURL
      },
    ];
    await browserContext.addCookies(cookieValues);
    console.log(await browserContext.cookies());
  },
}); 

authenticatedTest is an extension of playwright/test which contains a bunch of POMs used in the tests and the storageState for US Customer.
Then in my test, I do the following:

authenticatedTestEU.beforeEach(async ({ page, homePage, setCookies }) => {
  setCookies();
  await homePage.goto();
  await homePage.acceptCookies();
});

What happens is that in my console (Terminal) I can see that my cookie is added, but when I run the test it looks like this - a blank page and is stuck there:

The strange thing to me is that when I run the authenticatedTest for the US customer, then the browser has all the cookies loaded (I can see them in the Developer tools when I run the test). But when I print in the console browserContext.cookies() I don’t see all of my app’s cookies necessary for it to run - the ones I see in the Dev Tools. I can only see that the 1 cookie which I added is there, but the rest seems like they are not present. So I am a bit confused about how this works.

My expectation would be once I use the euCustomerStorageState,json, then all my cookies are loaded for the app and I just need to set the correct cookie value for the app to switch to the EU mode.

Can you please help to identify what am I doing wrong?
Thanks!

[rwoll]

Can you recommend any other better way to do it?

Nope, this sounds like the route to take. For example, if I were logging into github US and EU, I might do something like:

// global-setup.js
const { chromium } = require('@playwright/test');

const usLogin = async (browser) => {
  const context = await browser.newContext(); // create FRESH context 
  const page = await context.newPage();
  await page.goto('https://us.github.com/login'); // US URL
  await page.fill('input[name="login"]', 'user');
  await page.fill('input[name="password"]', 'password');
  await page.click('text=Sign in');
  await context.storageState({ path: 'us-storageState.json' });
  await context.close();
}

const euLogin = async (browser) => {
  const context = await browser.newContext(); // create FRESH context 
  const page = await context.newPage();
  await page.goto('https://eu.github.com/login'); // EU URL
  await page.fill('input[name="login"]', 'user');
  await page.fill('input[name="password"]', 'password');
  await page.click('text=Sign in');
  await context.storageState({ path: 'eu-storageState.json' });
  await context.close();
}


module.exports = async config => {
  const browser = await chromium.launch();
  await Promise.all([euLogin(browser), usLogin(browser)]);
  await browser.close();
};

(I made up the github domains for illustration purposes.)

[mareru]

@rwoll It works finally.
Hmm, the only thing I had to change was this:

 // global-setup.js
const { chromium } = require('@playwright/test');

const usLogin = async () => {
const browser = await chromium.launch();
  const context = await browser.newContext(); // create FRESH context 
  const page = await context.newPage();
  await page.goto('https://us.github.com/login'); // US URL
  await page.fill('input[name="login"]', 'user');
  await page.fill('input[name="password"]', 'password');
  await page.click('text=Sign in');
  await context.storageState({ path: 'us-storageState.json' });
  await context.close();
}

const euLogin = async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext(); // create FRESH context 
  const page = await context.newPage();
  await page.goto('https://eu.github.com/login'); // EU URL
  await page.fill('input[name="login"]', 'user');
  await page.fill('input[name="password"]', 'password');
  await page.click('text=Sign in');
  await context.storageState({ path: 'eu-storageState.json' });
  await context.close();
}


module.exports = async config => {
  // const browser = await chromium.launch();
  await Promise.all([euLogin(), usLogin()]);
  // await browser.close();
};

It didn’t like the fact to do it with the same browser instance. It would crash within this euLogin method - the page would close and it wouldn’t load the home page. I wonder why? hmm