Bài Tập 2: Viết Code Tốt Hơn¶

Yêu Cầu¶

Viết lại code từ bài tập 1 thành code tốt hơn, tuân thủ best practices.

Đề Bài¶

Code gốc (có vấn đề):

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

test('test add to cart', async ({ page }) => {
  await page.goto('https://practice.automationtesting.in/shop/');
  await page.locator('.product').nth(0).click();
  await page.locator('.add_to_cart_button').click();
  await page.waitForTimeout(5000);
  await page.locator('text=View Basket').click();
});

Hướng Dẫn¶

Bước 1: Liệt kê vấn đề cần sửa¶

Bước 2: Viết code cải thiện¶

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

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

  // Bước 2: Chọn sản phẩm
  // TODO: Dùng locator cụ thể thay vì .nth(0)
  await page.locator('_______________').click();

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

  // Bước 4: Chờ thông báo (không dùng waitForTimeout)
  // TODO: Chờ element thay vì chờ thời gian
  await page.locator('_______________').waitFor({ state: '_______________' });

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

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

Checklist Code Cải Thiện¶

□ Tên test mô tả rõ ràng
□ Không dùng waitForTimeout
□ Không dùng locator index
□ Có assertion đầy đủ
□ Locator ổn định
□ Code dễ đọc
□ Có comment giải thích

So Sánh¶

Tiêu chí	Code gốc	Code cải thiện
Tên test	"test add to cart"	?
Locator	.product.nth(0)	?
Chờ	waitForTimeout(5000)	?
Assertion	Không có	?

Gợi Ý¶

Click để xem solution

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

test('test add specific product to basket', async ({ page }) => {
  // Bước 1: Mở trang Shop
  await page.goto('https://practice.automationtesting.in/shop/');

  // Bước 2: Chọn sản phẩm cụ thể
  await page.locator('text=HTML5 Forms').click();

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

  // Bước 4: Chờ thông báo xuất hiện
  await page.locator('.woocommerce-message').waitFor({ state: 'visible' });

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

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

Nộp Bài¶

[ ] Code cải thiện hoàn chỉnh
[ ] Bảng so sánh
[ ] Checklist đánh giá