Exercise example solution

Teachers example solution for the exercise.

import { test, expect } from '@playwright/test'

// We create an array of strings containing the test usernames for the store
const users = ['standard_user', 'locked_out_user', 'problem_user', 'performance_glitch_user', 'error_user', 'visual_user']

// We loop through all of the usernames and perform all the tests per user
for (const user of users) {

  // This 'describe' block describes a set of tests which we can do automatic setups/teardowns etc. A "test suite"
  test.describe(`saucedemo tests for ${user}`, () => {

    // This test is done before every single test in this 'describe' block
    // Since Playwright always starts a new browser environment per test, we do not need a teardown
    test.beforeEach(async ({ page }) => {
      await page.goto('https://www.saucedemo.com');
      await page.locator('[data-test="username"]').click();
      await page.locator('[data-test="username"]').fill(user);     
      await page.locator('[data-test="password"]').fill('secret_sauce');
      await page.locator('[data-test="login-button"]').click();
    });


    test('products_visibility', async ({ page }) => {
      await expect(page.locator('[data-test="title"]')).toHaveText('Products')
    });

    test('add_one_product', async ({ page }) => {
      await page.locator('[data-test="add-to-cart-sauce-labs-backpack"]').click();
      await page.locator('[data-test="shopping-cart-link"]').click();

      await expect(page.locator('[data-test="item-4-title-link"]')).toHaveText('Sauce Labs Backpack');
      await expect(page.locator('[data-test="item-quantity"]')).toHaveText('1');
    });

    test('add_multiple_products', async ({ page }) => {
      await page.locator('[data-test="add-to-cart-sauce-labs-backpack"]').click();
      await page.locator('[data-test="add-to-cart-sauce-labs-bike-light"]').click();
      await page.locator('[data-test="add-to-cart-sauce-labs-bolt-t-shirt"]').click();
      await page.locator('[data-test="shopping-cart-link"]').click();

      await expect(page.locator('[data-test="item-4-title-link"]')).toHaveText('Sauce Labs Backpack');
      await expect(page.locator('[data-test="item-0-title-link"]')).toHaveText('Sauce Labs Bike Light');
      await expect(page.locator('[data-test="item-1-title-link"]')).toHaveText('Sauce Labs Bolt T-Shirt');
    });

    test('delete_product', async ({ page }) => {
      await page.locator('[data-test="add-to-cart-sauce-labs-backpack"]').click();
      await page.locator('[data-test="shopping-cart-link"]').click();

      // Note that we do not necessarily need to check the correct text here, since we only add and remove one item
      await expect(page.locator('[data-test="item-4-title-link"]')).toBeVisible();
      await page.locator('[data-test="remove-sauce-labs-backpack"]').click();

      // Here you can see we used .not to negate the equasion. Same as !==
      await expect(page.locator('[data-test="item-4-title-link"]')).not.toBeVisible();
    });

    test('order_a_lamp', async ({ page }) => {
      await page.locator('[data-test="add-to-cart-sauce-labs-bike-light"]').click();
      await page.locator('[data-test="shopping-cart-link"]').click();
      await page.locator('[data-test="checkout"]').click();
      await page.locator('[data-test="firstName"]').fill('John');
      await page.locator('[data-test="lastName"]').fill('Doe');
      await page.locator('[data-test="postalCode"]').fill('12345');
      await page.locator('[data-test="continue"]').click();
      await expect(page.locator('[data-test="title"]')).toHaveText('Checkout: Overview');
    });

  });

}