DEV Community

Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev on

Playwright Tutorial for Beginners 6 - Demo 1

Introduction

In previous tutorials, we learnt some basic concepts of testing with Playwright.

So in this tutorial, we will put some of the 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:

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
 
david1235678943 profile image
david

this blog is informative i like it.