End to End Testing with Playwright - A Simple Demo

Introduction

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

This article is a demo session of a tutorial series on playwright

So in this tutorial, we will put some of the playwright concepts into practice by writing a basic test script for an online store

Setting up our tests

installing Playwright via npm install --save-dev @playwright/test.

next, setup the configuration file in the root of the project directory:

//playwright.config.js
const { devices } = require('@playwright/dev');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
    projects: [
        name: 'chrome',
        use: { ...devices['Desktop Chrome'] }
    ],
    use: {
        launchOptions: {
            slowMo: 100,
            headless: false
        }
    }
};

module.exports = config;

This config file set Playwright to run the test on a desktop chrome browser.

Writing our test scripts

Using our demo, our test should perform the following, step-by-step:

fill out user details and login
select the Sauce Labs Bike Light product and add it to cart
view the cart and assert that the total price of the cart is $9.99

We will create a new file, demo-store.spec.js, and write the code below.

//demo-store.spec.js
const { test } = require('@playwright/test');

test('demo store cart store', async ({ page }) => {
    await page.goto('https://www.saucedemo.com/');
});

The code above opens the specified URL.

Next, we will fill up the Username and Password with the login details given for a standard user using the page.type() method:

const standardUser = {
    username: 'standard_user',
  password: 'secret_sauce'
};

await page.type('[placeholder=Username]', standardUser.username);
await page.type('[placeholder=Password]', standardUser.password);

await page.click('text=LOGIN');

We will click on the selected product name and add it to cart:

await page.click('text=Sauce Labs Bike Light');
await page.click('text=ADD TO CART');

Then assert the total price in the cart:

const totalPrice = page.locator('.inventory_item_price');
expect(await totalPrice.textContent()).toBe('$9.99');

Combining the whole scripts would look like this:

// demo-store.spec.js
const { test, expect } = require('@playwright/test');

test('demo store cart store', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');

  // login credentials
  const standardUser = {
    username: 'standard_user',
    password: 'secret_sauce'
  };

  await page.type('[placeholder=Username]', standardUser.username);
  await page.type('[placeholder=Password]', standardUser.password);
  await page.click('text=LOGIN');

  await page.click('text=Sauce Labs Bike Light');
  await page.click('text=ADD TO CART');

  await page.click('.shopping_cart_link');

  const totalPrice = page.locator('.inventory_item_price');
  expect(await totalPrice.textContent()).toBe('$9.99');
});

Running the test script

npx run playwright test demo-store.spec.js

The video above is generated with Playwright, so we will talk about generating videos and screenshots next before proceeding to write assertions for our test cases.