There are options to configure how Playwright functions in our test.

In this tutorial, we will not focus on these configurations options rather, we will majorly focus on how to configure Playwright.

How can we configure Playwright?

Global configuration

Create playwright.config.js or playwright.config.ts in the root of your project. When you run the test normally, Playwright automatically picks up the configuration file and make use of it.

For instance:

// @ts-check

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  use: {
    headless: false,
    video: 'on-first-retry',
  },
    projects: [{ name: 'chrome', use: { ...devices['Desktop Chrome'] } }],
};

module.exports = config;

Using a separate file for configuration

We can have a different js or ts file for configuration.

Why would we ever need this? It makes sense when we want to run how to test in different ways (using different configurations). For instance, where we want to run a test using all device types and also want to run the same test using only chrome with code coverage.

So run your test with the --config flag to define the path to our config file:

npx run playwright test --config=test/chrome_coverage.config.js

Local configuration

We can use test.use to override some options for a file or a test.describe block:

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

test.describe('override config options', () => {
  test.use({ headless: false });

  test('some test', async ({ page }) => {
    // ..
  });
});