Playwright Testing using JavaScript – Configuration

by
Playwright Testing using JavaScript – Configuration

In this article, we will cover how to configure different types of testing options in Playwright Testing. Playwright Test provides options to configure the default browser, page, and context fixtures. It allows you to run the browser in headless more or headed mode, to take screenshots and record videos or to specify a test to run, etc.

You can provide the configuration globally in the configuration file or locally in a test file.

Prerequisite:

  • You should have already gone through the first article i.e. Project Setup.
  • You should have basic knowledge of JavaScript.

You can clone the base project structure from my GitHub or you can create it from scratch as explained in the previous playwright article.

Playwright provides two types of configurations to configure the different options –

  1. Global Configuration
  2. Local Configuration

Global Configuration

While setup a new playwright project, it creates a configuration file i.e. playwright.config.js. This is the global configuration file of the playwright project. In this file options or contents are divided into a few sections i.e.

  • general config
  • use
  • projects

1. General config

In this section, test-related general configuration properties are defined, which are listed below –

  • timeout — defines the maximum time limit for each test. It is also known as base timeout for all tests. The default timeout is defined as 30 seconds.
  • testDir — defines a directory setup that will be scanned for test files.
  • snapshotDir — defines the location where snapshots will be stored.
  • outputDir — defines the location where test results are stored in videos or snapshots format.
  • retries – defines the retry count, if any test fails, it will retry the execution for the given value. The default reties value is defined as 0, and for continuous integration, it is 2.
  • fullyParallel — it allows running the tests in parallel mode. By default, the value is defined as true.
  • workers — these are the OS processes that run independently in separate browsers. It depends on your machine’s memory limit and how many of those resources will be created to execute the test suite.
  • reporter — defines the report type that will be generated after the test execution. It accepts a single string or array of arrays. Built-in reporters that playwright provides – dot, html, json, junit, github, list, null, line.
  • expect — this is related to assertions within tests. Here you can override the default timeout (by default it is 5000 milliseconds).
  • forbidOnly — allows skipping any test that is defined as .only tag. Usually, You can run a single test by providing .only tag, but if you want to skip only 1 test case then it is useful in that case.
  • testIgnore — Glob patterns or regular expressions that should be ignored when looking for the test files. For example, **/test-assets.
  • testMatch — Glob patterns or regular expressions that match test files. For example, **/exa/*.spec.js. By default, Playwright Test runs .*(test|spec)\.(js|ts|mjs) files.
const config = {

  testDir: './tests',
  
  timeout: 30 * 1000,

  snapshotDir: "./output/snaps",

  expect: {
    timeout: 5000
  },
  
  fullyParallel: true,
  
  forbidOnly: !!process.env.CI,
  
  retries: process.env.CI ? 2 : 0,
  
  workers: process.env.CI ? 1 : undefined,
  
  reporter: 'html',

  testMatch: ["example.spec.js"],

};

2. Use

There are commonly used options for various scenarios, which are listed below –

  • actionTimeout — defines the timeout for each Playwright action in milliseconds. Defaults to 0 (no timeout).
  • acceptDownloads —  accepts boolean and it is really useful for testing the file downloads functionality of the app.
  • navigationTimeout — defines the timeout for a page to load. It happens to page.goto().
  • baseURL — base URL used for all pages in the context. Allows navigating by using just the path, for example page.goto("/path").
  • browserName — Name of the browser that will run the tests, one of Chromium, Firefox, or WebKit. By default, the value is defined as chromium.
  • headless — Whether to run the browser in headless mode.
  • viewport — Viewport used for all pages in the context.
  • screenshot — used to take the screenshots.
  • video — used to record the videos of tests.
  • trace — used to record the traces of tests.
  • colorScheme — allows us to test the functionality of application in different color scheme. you can set the value as dark, light, no-preference.
use: {
    acceptDownloads: true,

    actionTimeout: 0,

    baseURL: 'https://testingwithsk.in',

    colorScheme: 'dark',

    viewport: { width: 1280, height: 720 },

    headless: false,

    screenshot: 'only-on-failure',

    trace: 'retain-on-failure',

    video: 'on-first-retry',

    browserName: 'firefox'
  }

3. Projects

This section defines how you use it to test on different browsers and devices. For each project object, you can provide its own properties from the use section:

projects: [
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
      baseURL: 'https://testingwithsk.in',
      colorScheme: 'light',
    },
  },

  {
    name: 'firefox',
    use: {
      ...devices['Desktop Firefox'],
      baseURL: 'https://testingwithsk.in',
      colorScheme: 'light',
    },
  },

  {
    name: 'webkit',
    use: {
      ...devices['Desktop Safari'],
      baseURL: 'https://testingwithsk.in',
      colorScheme: 'light',
    },
  }
]

Local Configuration

For local configuration, you can add test.use(options) in a test file or test.describe(title, callback) block to override some options —

// @ts-check
const { test, expect } = require('@playwright/test');
const { projects } = require('../playwright.config');

// Adding the Local configuration
test.use({
  baseURL: "https://playwright.dev/",
  viewport: { width: 900, height: 900 },
  colorScheme: 'dark'
});

test('homepage has title and links to intro page', async ({ page }) => {
  await page.goto('/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // create a locator
  const getStarted = page.getByRole('link', { name: 'Get started' });

  // Expect an attribute "to be strictly equal" to the value.
  await expect(getStarted).toHaveAttribute('href', '/docs/intro');

  // Click the get started link.
  await getStarted.click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

In the same way , you can configure the local configuration inside describe block —

// @ts-check
const { test, expect } = require('@playwright/test');
const { projects } = require('../playwright.config');

test.describe("Suite Name", () => {

  // Adding the Local configuration inside the test.describe
  test.use({
    baseURL: "https://playwright.dev/",
    viewport: { width: 900, height: 900 },
    colorScheme: 'dark'
  });

  test('homepage has title and links to intro page', async ({ page }) => {
    await page.goto('/');

    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle(/Playwright/);

    // create a locator
    const getStarted = page.getByRole('link', { name: 'Get started' });

    // Expect an attribute "to be strictly equal" to the value.
    await expect(getStarted).toHaveAttribute('href', '/docs/intro');

    // Click the get started link.
    await getStarted.click();

    // Expects the URL to contain intro.
    await expect(page).toHaveURL(/.*intro/);
  });
});

Some Useful Configurations

There are some mostly used configurations like taking screenshots, recording videos, and tracing the test cases.

Automatic Screenshots

You can make Playwright Test that capture screenshots for you — control it with the screenshot option. By default, screenshots are off.

screenshot: ‘off’ — Do not capture screenshots.

screenshot: ‘on’ — Capture screenshots after each test.

screenshot: ‘only-on-failure’ — Capture screenshots after each test failure.

Screenshots will be stored in the test output directory, test-results.

Record Video

Playwright Test can record videos for your tests, controlled it with video option. By default, videos are also off.

video: ‘off’ — Do not record video.

video: ‘on’ — Record video for each test.

video: ‘retain-on-failure’ — Record video for each test, but remove all videos from successful test runs.

video: ‘on-first-retry’ — Record video only when retrying a test for the first time.

Video files will be stored in the test output directory, test-results.

Record Test Trace

Playwright Test can produce test traces while running the tests. In the end, you can view the trace and get detailed information about Playwright’s execution by opening Trace Viewer. It is controlled with trace option. By default tracing is off .

trace: ‘off’ — Do not record trace.

trace: ‘on’ — Record trace for each test.

trace: ‘retain-on-failure’ — Record trace for each test, but remove all traces from successful test runs.

trace: ‘on-first-retry’ — Record trace only when retrying a test for the first time.

Trace files will be stored in the test output directory, test-results.

Custom configuration file

Playwright Test will automatically pick up playwright.config.js. But if you want to use a custom configuration file then we need to specify the file path in the command line by using --config option.

npx playwright test --config=customFile.config.js

Conclusion

So, the playwright provides two types of configurations local and global. And the other way to configure is to make another custom configuration file and provide the path of that file while executing the test case. That’s all for this article, but you can find a lot on Playwright website. This is completely taken from my own experience and projects that I have worked on. I hope this helped you a lot to understand the playwright config file. We’ll meet in the next article with the next topic.

Resources

You might Like

💖 If you like this article please make sure to Like, Comment, and Share it with your friends and colleagues.

Follow us on our social networks –

Previous Article
Next Article