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
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
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)
this blog is informative i like it.