← Back to Discord Forum

Authentication - correct flow

10°BPM Israelposted in #help-playwright
Open in Discord
10°BPM Israel
10°BPM Israel

Could you help me understand the correct flow to perform an authentication?

I followed the documentation and performed the following steps:

  1. I created a playwright/.auth folder and put 2 files in it "user.json" and "auth.setup.ts"

auth.setup.ts code:

import { test as setup } from '@playwright/test'

const authFile = 'playwright/.auth/user.json'

setup('authenticate', async ({ page }) => {
    await page.goto('/')
    await page.fill('#username', 'test')
    await page.fill('#password', 'test')
    await page.click('button[type="submit"]')

    await page.waitForURL('/')
    await page.context().storageState({ path: authFile })
  1. I ran the X script to generate a json, and then I put it inside the same folder as the auth.setup.ts file yarn playwright codegen http://localhost:3000 --save-storage=user.json

  2. in my playwright.config.ts file I added the key storageState: "playwright/.auth/user.json" inside the use object.

I also added setup to the array of projects and placed it as a dependency on chromium:

projects: [
        { name: 'setup', testMatch: /\/playwright\/\.auth\/.*\.setup\.ts/ },

            name: 'chromium',
            use: { ...devices['Desktop Chrome'], storageState: './playwright/.auth/user.json' },
            dependencies: ['setup']

The behavior I expected is that before the tests my setup was executed, causing authentication to happen and cookies to be set correctly for all tests. Could you help me please?

I apologize for the silly question, but I'm really stuck

This thread is trying to answer question "Could you help me understand the correct flow to perform an authentication?"

1 reply

Thought there are videos in the "Videos" section, would suggest you watch it... There are others you should be able to find on youtube that cover this as well.


Sure, let's dive into how to perform authentication with Playwright.

Creating an Authenticated Browser State

Playwright uses isolated environments called browser contexts for testing. You can load an authenticated state, which eliminates the need to authenticate in every test and speeds up execution.

Storing Authenticated Browser State

No matter your authentication strategy, it's best to store the authenticated browser state on the file system. Create a playwright/.auth directory and add it to your .gitignore. Your authentication routine will save the authenticated browser state to a file in this directory.

Shared Account Approach

If your tests don't modify server-side state and can run simultaneously with the same account, authenticate once in the setup project, save the state, and reuse it in each test.

Different Accounts or Server-Side Modifications

If your tests modify server-side state or need different accounts for parallel testing, use different accounts for each test.

Testing Multiple Roles

To test how multiple authenticated roles interact in a single test, use multiple BrowserContexts and Pages with different storage states.

Here's how to implement these steps with Playwright's API:

// Create a setup project that prepares an authenticated browser state for all other tests.
// Specify storageState for each individual test file or group instead of setting it in the config.
page.context().storageState({ path: userFile }) // Save the authenticated state for a specific test.
test.use({ storageState: 'playwright/.auth/admin.json' }) // Specify the storage state for a particular test or group.

By following these steps, you can ensure efficient reuse of authenticated browser states in your tests.

Related Discord Threads

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.