Playwright基礎篇（三）：測試案例實作

2025年2月15日 testing

實作第一個測試：Apple網站購物流程

流程分析與測試目標

在開始編寫測試腳本前，我們需要先清楚定義測試目標和流程。對於本範例，我們將模擬用戶在 Apple 官網選購 iPad 的完整流程：

訪問 Apple 官網
導航至 iPad 產品頁面
選擇特定 iPad 型號（11吋 iPad）
選擇產品規格（顏色、儲存容量等）
加入購物車
驗證購物車內容是否正確

這個測試案例涵蓋了典型的電子商務網站核心功能，對於小企業的網站測試有很高的參考價值。

前置準備工作

在開始編寫測試前，我們需要完成以下準備工作：

建立專案結構：我們將採用頁面物件模式（Page Object Model）來組織代碼，這樣可以提高代碼的可維護性和重用性。
頁面物件分析：識別測試中涉及的主要頁面元素，例如：
- 顏色選擇器
- 儲存容量選項
- 連線類型選項（Wi-Fi）
- 各種附加選項（雕刻、Apple Pencil、鍵盤等）
- 購買選項
- 「加入購物袋」按鈕
建立適當的文件結構：

my-playwright-project/
├── tests/
│   └── example.spec.ts  # 測試腳本
├── pages/
│   └── ProductPage.ts   # 產品頁面物件
└── ...

編寫測試腳本

讓我們看看如何實現整個測試流程。

訪問 Apple 官網與導航

首先，我們需要建立測試的基本結構並導航至 iPad 產品頁面：

// tests/example.spec.ts

import { test, expect } from '@playwright/test';
import { ProductPage } from '../pages/ProductPage.ts';

test('Add to Bag Flow', async ({ page }) => {
  const productPage = new ProductPage(page);

  // Step 1: Go to iPad page
  await page.goto('https://www.apple.com/');
  await page.getByLabel('iPad', { exact: true }).click();
  await page.getByRole('link', { name: 'iPad New' }).click();
  await page.getByRole('link', { name: 'Pre-order iPad 11-inch' }).click();

  // 後續步驟將在這裡加入...
});

這段代碼做了以下事情：

導入必要的 Playwright 測試工具
導入我們自定義的 ProductPage 頁面物件
創建一個名為 ‘Add to Bag Flow’ 的測試
訪問 Apple 官網
依次點擊導航至 iPad 產品頁面的元素

產品頁面物件定義

在編寫測試腳本之前，我們先定義產品頁面物件，以便更好地組織和重用代碼：

// pages/ProductPage.ts
import { expect, Locator, Page } from '@playwright/test';

export class ProductPage {
  readonly page: Page;
  readonly colorLocator: Locator;
  readonly storageLocator: Locator;
  readonly wifiLocator: Locator;
  readonly engravingLocator: Locator;
  // 依照命名規則向下完成readonly的定義...

  constructor(page: Page) {
    this.page = page;
    this.colorLocator = page.locator('#root').locator('text="Pink"'); 
    this.storageLocator = page.locator('#root').locator('text="256GB"');
    this.wifiLocator = page.locator('#root').locator('text="Wi-FiEvery iPad can connect"');
    this.engravingLocator = page.locator('text="No engraving"');
  }

  // 方法定義將在下方繼續...
}

頁面物件包含了頁面上的所有關鍵元素定位器，這些定位器使用了 Playwright 的多種選擇器方式，如文本、角色等。

選擇產品規格

現在，讓我們實現產品頁面物件中的方法，用於選擇各種產品規格：

// ProductPage.ts 中的方法
async selectColor(color: string) {
  const colorLocator = this.page.locator(`text="${color}"`).first();
  await colorLocator.waitFor({ state: 'visible', timeout: 10000 });
  await colorLocator.click();
}

async selectStorageOption(storage: string) {
  // 等待存儲選項出現
  await this.page.waitForSelector(`input[name="dimensionCapacity"][value="${storage.toLowerCase()}"]`, { timeout: 20000 });
  // 獲取存儲容量的 radio 按鈕元素
  const storageLocator = this.page.locator(`input[name="dimensionCapacity"][value="${storage.toLowerCase()}"]`);
  // 確保元素可見
  await storageLocator.waitFor({ state: 'visible', timeout: 20000 });
  // 確保元素滾動到視口內
  await storageLocator.scrollIntoViewIfNeeded();
  // 強制點擊（如果正常點擊不起作用時使用）
  await storageLocator.click({ force: true });
}

async selectWiFiOption() {
  try {
    // 使用 input 元素的 value 屬性定位 Wi-Fi 選項
    const wifiLocator = this.page.locator('input[name="dimensionConnection"][value="wifi"]');
    // 等待元素可見
    await wifiLocator.waitFor({ state: 'visible', timeout: 20000 });
    // 滾動元素到視口內
    await wifiLocator.scrollIntoViewIfNeeded();
    // 確保元素可見
    await wifiLocator.waitFor({ state: 'visible', timeout: 20000 });
    // 確保元素滾動到視口內
    await wifiLocator.scrollIntoViewIfNeeded();
    // 強制點擊（如果正常點擊不起作用時使用）
    await wifiLocator.click({ force: true });
  } catch (error) {
    console.error('Error selecting Wi-Fi option:', error);
    throw error;
  }
}

// 其他選項的方法...
async selectEngravingOption() {
  await this.engravingLocator.click();
}
// 依此類推...

這些方法包含了:

智能等待（確保元素加載和可見）
錯誤處理
滾動頁面（確保元素在視口內）

選擇付款選項並加入購物袋

接下來，實現選擇付款方式和加入購物袋的方法：

// ProductPage.ts 中的更多方法
async selectPurchaseOption() {
  // 等待 "fullprice" 選項可見，確保頁面完全加載
  const purchaseLocator = this.page.locator('input[name="purchase_option_group"][value="fullprice"]');
  await purchaseLocator.waitFor({ state: 'visible', timeout: 20000 });
  // 確保購買選項滾動到視口內
  await purchaseLocator.scrollIntoViewIfNeeded();
  // 點擊該購買選項
  await purchaseLocator.check(); // 適用於 radio 按鈕
}

async selectAppleCareOption() {
  await this.appleCareLocator.click();
}

async addToBag() {
  const addToBagButton = this.page.getByRole('button', { name: 'Add to Bag' });
  await addToBagButton.waitFor({ state: 'visible', timeout: 10000 });
  await addToBagButton.click();
}

async verifyProductInBag(productName: string) {
  await expect(this.page.locator(`text="${productName}"`)).toBeVisible();
}

這些方法處理了:

選擇全額購買選項（而非分期付款）
選擇是否添加 AppleCare+
點擊「加入購物袋」按鈕
驗證產品是否成功加入購物袋

完整測試流程

現在，我們將所有步驟組合起來，完成整個測試腳本：

// tests/example.spec.ts 完整版
import { test, expect } from '@playwright/test';
import { ProductPage } from '../pages/ProductPage.ts';

test('Add to Bag Flow', async ({ page }) => {
  const productPage = new ProductPage(page);

  // Step 1: Go to iPad page
  await page.goto('https://www.apple.com/');
  await page.getByLabel('iPad', { exact: true }).click();
  await page.getByRole('link', { name: 'iPad New' }).click();
  await page.getByRole('link', { name: 'Pre-order iPad 11-inch' }).click();

  // Step 2: Perform actions on ProductPage
  await productPage.selectColor('Pink');  // 選擇粉色
  await productPage.selectStorageOption('512GB');  // 選擇 512GB 儲存容量
  await productPage.selectWiFiOption();  // 選擇 Wi-Fi 選項
  
  // 驗證 Wi-Fi 選項是否已選中
  const wifiInput = page.locator('input[name="dimensionConnection"][value="wifi"]:checked');
  await expect(wifiInput).toBeChecked();
  
  await productPage.selectEngravingOption();  // 選擇不刻字
  await productPage.selectApplePencilOption();  // 選擇不購買 Apple Pencil
  await productPage.selectKeyboardOption();  // 選擇不購買鍵盤
  await productPage.selectTradeInOption();  // 選擇不折抵
  
  // 選擇「全額付款」購買選項
  await productPage.selectPurchaseOption();
  
  // 驗證「全額付款」選項是否已選中
  const purchaseInput = page.locator('input[name="purchase_option_group"][value="fullprice"]:checked');
  await expect(purchaseInput).toBeChecked();
  
  await productPage.selectAppleCareOption();  // 選擇不購買 AppleCare+
  await productPage.addToBag();  // 加入購物袋

  // Step 3: 驗證產品是否已成功加入購物袋
  await productPage.verifyProductInBag('11-inch iPad Wi-Fi 512GB - Pink');

  // 截圖
  const generateScreenshotName = () => `screenshot_${Date.now()}.png`;
  await page.screenshot({ path: generateScreenshotName() });
});