Playwright Tutorial for Beginners 1

What is Playwright?

From the documentation’s definition, Playwright is a tool that “enables reliable end-to-end testing for modern web apps”.

What does end-to-end testing mean?

End-to-end testing is, simply, a technique that aims to verify an entire software from beginning to end to make sure that the application flow behaves as expected.

Running end-to-end on a typical to-do list webpage would be testing the application flow as a real user would. Which can include:

adding new todos
deleting todos
completing a todo etc.

Key features of Playwright

cross-browser support
cross-platform support (Windows, Linux, macOS, locally or CI etc)
cross-language support (TypeScript, JavaScript, Java, .NET, Python)
Auto-waits etc.

In a couple of next tutorials, we will touch these concepts and even practise with occasional demo site testing.

Prerequisites for this tutorial

NodeJS installed
npm - (installed by default once NodeJS is installed. We can verify by running npm --version to check the installed version

Installing Playwright

Playwright can be run by third parties test runners like Jest. But for the purpose of this tutorial, we will use the test runner provided by Playwright:

npm install -D @playwright/test

The -D flag saves the modules as devDependencies.

Then run this command to install supported browsers:

npx playwright install

Creating our first test

We will create a file called first_test.spec.js and write the following code into the file.

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

test('visits Google page', async ({ page }) => {
  await page.goto('https://google.com');
  const pageTitle = await page.title();
  expect(pageTitle).toBe('Google');
});

Then run this command to run the test npx run playwright first_test.spec.js:

Basic configuration

We need to create a configuration file to utilize some of the features Playwright has to offer. We will create a playwright.config.js in the root directory of our project:

// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};

module.exports = config;

The configuration file allows Playwright to run your test using these devices provided in the configuration file.

Playwright Tutorial for Beginners 1 - Getting Started