Testing SvelteKit app, my cookies aren't being set until after the page renders
Hi all,
I've tried so many different configurations to get cookies set before the page renders, but it's failing to work. I read all the docs about configuring auth (since this is for testing JWT auth), I've read about storageState, I've tried using browser.newContext, and right now I'm attempting to get cookies set before visiting the page by using test.use. But all paths lead to the same behavior:
I can see the correct cookies in the PW browser after the test fails, but if I log them at page render time (or put them in the actual HTML), they are undefined.
(Also, how can I see my SS logs? I'm putting them in my SK hooks, which are definitely running because I'm setting arbitrary data for the $page store and they appear on the rendered page, and the logs print out when running the dev server, but I can't find them anywhere with PW. I would have guessed they'd be in the PW runner logs, especially since I can see other stuff in there prefixed with [WebServer], but nothing of mine. It's really difficult to debug non browser-side stuff without my logs.)
test.use({
storageState: {
cookies: [
{ name: "tyf_jwt", value: "eyJhb...", ...},
{ name: "tyf_rt", value: "eyJhb...", ... },
]
}
});
test("should be logged in", async ({ page }) => {
await page.goto("/");
await expect(page.getByRole("button", { name: "log out" })).toBeVisible();
});
This thread is trying to answer question "How to set cookies before the page renders in a SvelteKit app using Playwright?"
test("should be logged in", async ({ browser }) => {
const context = await browser.newContext();
await context.addCookies(cookies); // same as before, and they appear in the PW browser inspector
const page = await context.newPage();
await page.goto("/");
await expect(page.getByRole("button", { name: "log out" })).toBeVisible();
await page.close();
});For posterity, I couldn't figure this out, so I'm doing something grosser but functional:
I'm using the concurrently package to run the preview server alongside a tiny express app that serves up all the mock data I need from the backend.
This allows the test app to call "real" endpoints and let the natural flow set cookies etc. It also means I don't have to figure out how to mock or silence backend server calls, or see all the no-op failures for them in the test logs.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.