Bài Tập 2: Viết Test Thêm Giỏ Hàng

Yêu Cầu

Viết test case Playwright cho flow thêm sản phẩm vào giỏ hàng.

Thông Tin

• URL: https://practice.automationtesting.in/shop/
• Sản phẩm: HTML5 Forms
• Expected: Thông báo "Added to basket"

Hướng Dẫn

Bước 1: Tạo file test

Tạo file tests/add-to-cart.spec.ts

Bước 2: Viết code

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

test('test add to basket', async ({ page }) => {
  // Bước 1: Mở trang Shop
  await page.goto('_______________');

  // Bước 2: Click vào sản phẩm "HTML5 Forms"
  await page.locator('_______________').click();

  // Bước 3: Thêm vào giỏ
  await page.locator('_______________').click();

  // Bước 4: Kiểm tra thông báo
  await expect(page.locator('_______________')).toContainText('_______________');

  // Bước 5: Vào giỏ hàng
  await page.locator('_______________').click();

  // Bước 6: Kiểm tra sản phẩm trong giỏ
  await expect(page.locator('_______________')).toContainText('_______________');
});

Bước 3: Tìm locator

Dùng DevTools tìm locator cho:

• Sản phẩm "HTML5 Forms": _____
• Nút "Add to basket": _____
• Thông báo "Added to basket": _____
• Link "View Basket": _____
• Tên sản phẩm trong giỏ: _____

Bước 4: Chạy test

npx playwright test tests/add-to-cart.spec.ts

---

Checklist

□ File test được tạo
□ Code hoàn chỉnh
□ Locator đúng
□ Assertion đúng (thông báo + sản phẩm trong giỏ)
□ Test pass

---

Gợi Ý

Click để xem solution

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

test('test add to basket', async ({ page }) => {
  await page.goto('https://practice.automationtesting.in/shop/');

  await page.locator('text=HTML5 Forms').click();

  await page.locator('text=Add to basket').click();

  await expect(page.locator('.woocommerce-message')).toContainText('has been added');

  await page.locator('text=View Basket').click();

  await expect(page.locator('.product-name')).toContainText('HTML5 Forms');
});