Playwright Tutorial for Beginners 6 - Demo 1
Tags: testing, beginners, playwright, softwaretesting
Published: 2023-04-16 17:14:22

---
title: Playwright Tutorial for Beginners 6 - Demo 1
published: true
date: 2023-04-16 13:06:00 UTC
tags: testing, beginners, playwright, softwaretesting
canonical_url: https://blog.zt4ff.dev/playwright-tutorial-for-beginners-6-demo
series: Testing with Playwright
---

## 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](https://www.saucedemo.com/)

![demo-ecommerce-page.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1641909399958/i8ivAeByi.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/');
});

```

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

```

![demo-1-video.gif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1641909425263/vprn9ZLqb.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.