Maximizing Test Efficiency: Reuse Authentication using Global Setup in Playwright Tests

A new feature has been introduced with Playwright Version 1.31 that allows for configuring dependencies between projects. This article covers how to maximize test efficiency by reusing the authentication in your Playwright NodeJs test project.

Step breakdown:

• Step 01: Update the Playwright version
• Step 02: Create a global setup file
• Step 03: Import setup dependencies
• Step 04: Make a directory to store the authFile for future use
• Step 05: Define the authFile path
• Step 06: Write the login/auth script in the setup file
• Step 07: Configure the “playwright.config.js” file to use the global setup
• Step 08: Write a test script reusing authentication

Step 01: Update the Playwright version

In order to use the new feature your Playwright version should be 1.31 or above. Use the following npm command to update your Playwright version.

npm install @playwright/test@latest

Make sure to install the browsers once after updating the version.

npx playwright install

Step 02: Create a global setup file

Create a file named “auth.setup.js” in the test directory. Note that the file name can be any because you can define the test file name matches later in the config file.

Step 03: Import setup dependencies

Import the following dependencies to the created setup file.

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

Step 04: Make a directory to store the authFile for future use

You can store this authFile anywhere but it will be better if you can save this in a proper way like below.

• Create a folder called “playwright” in the root directory
• Create a subfolder called “.auth” inside the “playwright” folder

Then that “.auth” folder will be used to save the authFile in JSON format.

Step 05: Define the authFile path

Add the following lines to define the authFile path in your setup file. The JSON file name can be anything.

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

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

Step 06: Write the login/auth script in the setup file

This can be done in two ways.

Method 01: Use GUI to login

import { test as setup } from '@playwright/test';
const authFile = 'playwright/.auth/user.json';

setup('authenticate', async ({ page }) => {
  
  await page.locator("xpath=//*[@id='email']").fill('example@abc.com');
  await page.locator("xpath=//*[@id='password']").fill('Password');
  await page.locator("xpath=//button[@id='login-button']").click();
  await page.context().storageState({ path: authFile });

});

Method 02: Use an API request and save the necessary cookies in the browser

import { test as setup } from '@playwright/test';
const authFile = 'playwright/.auth/user.json';

setup('authenticate', async ({ page }) => {
  
  //getCookiesUsingAuthEndpoint() method should be written separately
  const cookies = await getCookiesUsingAuthEndpoint('example@abc.com', 'Password');
  
  await page.context().addCookies(cookies);

  await page.context().storageState({ path: authFile });

});

Step 07: Configure the “playwright.config.js” file to use the global setup

There is a project section in your playwright config file. The created setup file should be defined in there in order to execute and save the auth file.

The setup project is named the global setup project name and the file name regex. This can be modified according to your needs. The name property will be used to add this as a dependency.

// Setup project
{ name: 'setup', testMatch: /.*\.setup\.js/ },

Let’s see a look at the projects section.

projects: [

    // Setup project
    { name: 'setup', testMatch: /.*\.setup\.js/ },

    {
      name: "chrome",
      use: { 
        ...devices["Desktop Chrome"],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: { 
        ...devices['Desktop Firefox'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
    {
      name: 'safari',
      use: { 
        ...devices['Desktop Safari'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    }
  ],

Each browser is capable of reusing the authentication state, which results in a single login for each test run.

Step 08: Write a test script reusing authentication

Just do it normally. The browser is already authenticated. :)

import { test } from '@playwright/test';

test('test', async ({ page }) => {
  // page is authenticated
});

Conclusion

In general, utilizing authentication reuse can significantly save time and improve the speed of your tests. However, it’s crucial to ensure that your tests do not alter the server-side state. If your tests involve server-side settings or related aspects, it’s essential to utilize distinct test user accounts. Additionally, it’s vital to confirm that your authentication approach is not limited to a particular browser (Authentication is not browser specific).