I'm trying to set some cookies using a globalSetup in Playwright
However If I go to the network tab when debugging using the npx playwright test --headed option to run tests, the cookies are not present.
The globalSetup is invoked and the cookies in the storage-state.json file —as storageState— are saved.
My project runs in localhost:3000 and I've tried several combination of domain in the injected cookie such as localhost, .localhost, 127.0.0.1:3000, localhost:3000, with no luck.
my global.ts
export default async function globalSetup() {
const now = new Date();
await prisma.user.upsert({
// some prisma upsert here
});
const storageStatePath = path.resolve(__dirname, 'storage-state.json');
// Check if the storage state file exists, and if it does, load the cookies
try {
const storageState = path.resolve(__dirname, 'storage-state.json');
const browser = await chromium.launch();
const context = await browser.newContext({ storageState });
await context.addCookies([testCookie]);
await context.storageState({ path: storageState });
// log context cookies
const cook = await context.cookies();
console.log(cook);
await browser.close();
} catch (err) {
console.error(`Error loading storage state:`);
}
// Save the cookie to the storage state file
const newStorageState = { cookies: [testCookie], origins: [] };
try {
await fs.writeFile(storageStatePath, JSON.stringify(newStorageState), 'utf8');
} catch (err) {
console.error(`Error saving storage state:`);
}
}
my playwright.config.ts
export default defineConfig({
// Look for test files in the "tests" directory, relative to this configuration file.
testDir: 'src/__tests__/e2e/',
// add global setup (auth mainly)
globalSetup: 'src/__tests__/e2e/setup/global.ts',
// Run all tests in parallel.
fullyParallel: true,
use: {
// Base URL to use in actions like `await page.goto('/')`.
baseURL: 'http://localhost:3000',
},
// Configure projects for major browsers.
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
storageState: 'src/__tests__/e2e/setup/storage-state.json',
},
},
],
});
and my super simple test
test.describe('', () => {
test('context available', async ({ page }) => {
// tried this too
// const context = await chromium.launchPersistentContext(userDataDir);
// const page = await context.newPage();
// await context.addCookies([testCookie]);
await page.pause();
await page.goto('/');
const productCardImage = page.locator('[datatest-id="product-card-image"]').first();
await productCardImage.click();
// rest of the test
});
});
I even tried generatin a test using codegen that navigates to google and a combination of domains google.com, .google, .google.com, google and with no luck, so I suspect it has to to with my globalSetup method.
this is the storage-state.json file being populated once the setup is executed.
{"cookies":[{"name":"next-auth.session-token","value":"d52f0c50-b8e3-4326-b48c-4d4a66fdeb64","url":"http://localhost:3000","expires":1678926378,"httpOnly":true,"secure":false,"sameSite":"Lax"}],"origins":[]}
And this is the project in case somebody want's to see the full code.
