Rayrun
← Back to Discord Forum

Testing SvelteKit app, my cookies aren't being set until after the page renders

jameyiguessposted in #help-playwright
Open in Discord
jameyiguess
jameyiguess

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();
});
image.png

This thread is trying to answer question "How to set cookies before the page renders in a SvelteKit app using Playwright?"

9 replies
jameyiguess
jameyiguess

A different approach, same exact results:

jameyiguess
jameyiguess
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();
});
jameyiguess
jameyiguess

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.

jameyiguess
jameyiguess

Also, for logs, if you add stdout: "pipe" to your playwright config, it will print your logs.

jameyiguess
jameyiguess

I'm wondering if this is something to file a bug about?

Most likely its your backend which removes the cookies again and not Playwright. If you have a minimal reproduction, feel free to file an issue.

jameyiguess
jameyiguess

There is no backend in this issue, though. I always keep my tests isolated. So I was just trying use to get the PW browser context to have those cookies, which it does on dev tool inspection, but for some reason in the SvelteKit hooks, event.cookies is undefined.

jameyiguess
jameyiguess

So @mxschmitt it feels like it's a problematic interplay between PW and SK, but I really couldn't be sure.

jameyiguess
jameyiguess

I'll take your advice and make an MVP app of this problem.

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.