DEV Community

Cover image for End to End Testing with Playwright - A Simple Demo
Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev

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

demo-ecommerce-page.PNG

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/');
});
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Then assert the total price in the cart:

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

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');
});
Enter fullscreen mode Exit fullscreen mode

Running the test script

npx run playwright test demo-store.spec.js
Enter fullscreen mode Exit fullscreen mode

demo-1-video.gif.gif

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.

Top comments (1)

Collapse
 
liviufromendtest profile image
Liviu Lupei

Cool article.

Have you ever tried Endtest?

The syntax is even more easier to read:

endtest