A better global setup in Playwright with project dependencies

In this example we will explore how to use a better global setup in playwright with project dependencies. Project dependencies are a list of projects that need to run before the tests in another project run. They can be useful for configuring the global setup actions so that one project depends on this running first. Using dependencies allows global setup to produce traces and other artifacts.

What are project dependencies?

Project dependencies are a better way of doing global setup. To add a dependency, so that one project depends on another project, create a separate project in the Playwright config for your setup tests, where each test in this project will be a step in the setup routine.

Every time you run a test from the basic project, it will first run the tests from the setup project.

playwright.config.js

import { defineConfig } from '@playwright/test';
export default defineConfig({
  projects: [
   {
      name: 'global setup config',
      testMatch: '**/*global-setup.js',
      teardown: 'global teardown config',
    },
    {
      name: 'global teardown config',
      testMatch: '**/*global-teardown.js',
    },
    {
      name: 'e2e tests',
      testMatch: '**/*global-setup.spec.js',
      dependencies: ['global setup config'],
    }, 
  ],
});

By using project dependencies, the HTML report will show the setup tests, the trace viewer will record traces of the setup, and you can use the inspector to inspect the DOM snapshot of the trace of your setup tests and you can also use fixtures.

Creating a global setup

When working with tests that have a dependency, the dependency will always run first and once all tests from this project have passed, then the other projects will run in parallel.

import { test as setup, expect } from '@playwright/test';
import { chromium } from 'playwright';
import { globalState } from '../shared.js';

setup('Global setup', async ({ }) => {

  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // Example: login for login page
  await page.goto('https://skptricks.github.io/learncoding/selenium-demo/login%20registration%20page/Register.html');
  await page.locator("id=regUsername").fill("Sumit");
  await page.locator("id=regEmail").fill("Sumit@gmail.com");
  await page.locator("id=regPassword").fill("Skptricks");
  await page.locator("[name=submitregistrationform]").click();
  await expect(page.locator("//h1")).toContainText("405 Not Allowed")
  
  // setting value for shared data accesible within global setup and teardown.
  globalState.data = "Sumit Kumar Pradhan" ;  

  // Access store value in any where in project.
  process.env.JWT_Token = 'dad7sd8as8ds8d7asd9';

  // Or a more complicated data structure as JSON:
  process.env.JSON_Data = JSON.stringify({ some: 'data' });
  
  await browser.close();
  console.log("complete the execution for global setup...")

});

Creating a global teardown

You can also teardown your setup by adding a testProject.teardown property to your setup project. Teardown will run after all dependent projects have run. See the teardown guide for more information.

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

teardown('global teardown', async ({ }) => {  
  
  console.log("complete the execution for global teardown...")
  
});

Create a e2e tests project

This is a sample code for specs file, It will run after global setup complete it's execution and once specs file execution is completed, it will run global teardown setup.

const { test } = require('@playwright/test');

test('example test1', async ({browser}) => {
  // Retrieve the browser from the process environment
  
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.skptricks.com');

  console.log("Access shared data in global setup - process.env.JWT_Token : ", process.env.JWT_Token);
  console.log("Access shared data in global setup - process.env.JSON_Data : ", process.env.JSON_data);
  // ... rest of the test
});

test('example test2', async ({browser}) => {
  // Retrieve the browser from the process environment
  
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.google.com');
  
  // ... rest of the test
});

Output :

D:\playwright Project\Playwright-tutorial>npx playwright test --project="e2e tests" --headed

Running 4 tests using 2 workers

  ✓  1 [global setup config] › tests\global-setup.js:5:6 › Global setup (3.2s)                                                         
complete the execution for global setup...
  ✓  2 [e2e tests] › tests\global-setup.spec.js:4:1 › example test1 (4.7s)                                                             
  ✓  3 [e2e tests] › tests\global-setup.spec.js:17:1 › example test2 (2.2s)
Access shared data in global setup - process.env.JWT_Token :  dad7sd8as8ds8d7asd9
Access shared data in global setup - process.env.JSON_Data :  {"some":"data"}
  ✓  4 [global teardown config] › tests\global-teardown.js:4:9 › global teardown (10ms)                                                
complete the execution for global teardown...

  4 passed (12.5s)

To open last HTML report run:

  npx playwright show-report html-report