Playwright Tutorial for Beginners 1 – Getting Started

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.

Hope You will learn Something. Happy Coding.😍

Visit my YouTube Channel as Well https://www.youtube.com/watch?v=JuIHQ9cLSEw&list=PLbIhkHxfUIItTdcyCb34uRIrPJbXBndIl&index=4