Hi, 我是 Kyle 👋

「資料驅動測試（data-driven testing）」，你可以用迴圈或是參數化的方式，把多筆資料注入到同一個 test case 裡執行 方法一：使用 test.describe 搭配迴圈 import { test, expect } from '@playwright/test'; const testData = [ { input: 'user1', expected: 'Hello user1!' }, { input: 'user2', expected: 'Hello user2!' }, // 其餘48筆... ]; for (const data of testData) { test(`Should greet ${data.input}`, async ({ page }) => { await page.goto('https://example.com'); await page.fill('#name-input', data.input); await page.click('#submit-button'); const message = await page.textContent('#greeting'); expect(message).toBe(data.expected); }); } 方法二：使用 test.each（Playwright v1.31 以上支援） import { test, expect } from '@playwright/test'; const testData = [ ['user1', 'Hello user1!...

為什麼用 Playwright 測 API？ 雖然我們常用 Postman、curl 或 Jest 來測 API，但若你的專案已經使用 Playwright 做 E2E 測試，那麼善用同一套框架處理 API 測試，不僅可減少工具切換，還能將 UI 流程與 API 驗證整合在一起，提升測試維運的一致性。 Playwright 提供的 request 模組，讓我們可以像在用 fetch 一樣操作 HTTP 請求，非常方便。 開始寫第一個 API 測試 安裝 Playwright 如果你尚未安裝 Playwright，可以透過下列指令快速安裝： npm init playwright@latest 選擇 TypeScript 或 JavaScript 都可以，本篇範例以 TypeScript 為例。 撰寫 API 測試 假設我們有一個簡單的 API：https://jsonplaceholder.typicode.com/posts/1 我們來撰寫一個測試，驗證它回傳的內容正確： import { test, expect, request } from '@playwright/test'; test('GET /posts/1 should return a valid post', async () => { const apiContext = await request....

在現代 Web 開發流程中，自動化測試已經成為持續整合（CI）不可或缺的一環。而 Playwright 作為一個功能強大的 E2E 測試框架，搭配 Azure DevOps Pipeline，可以有效地讓我們在每次 commit 或 PR 時，自動進行跨瀏覽器測試，確保系統品質。 本文將介紹如何從零開始，將 Playwright 測試整合進 Azure DevOps CI 流程。 環境準備 專案初始化 npm init -y npm install -D @playwright/test npx playwright install 新增基本測試檔案（如 tests/example.spec.ts） import { test, expect } from '@playwright/test'; test('首頁標題應正確', async ({ page }) => { await page.goto('https://study4.tw'); await expect(page).toHaveTitle(/study4/); }); 在 package.json 中加入測試腳本 "scripts": { "test": "npx playwright test" } 設定 Azure DevOps Pipeline 在專案根目錄新增 .azure-pipelines.yml trigger: - main pool: vmImage: 'ubuntu-latest' steps: - task: NodeTool@0 inputs: versionSpec: '18....

在自動化測試的領域中，Playwright 是一款由 Microsoft 開發的現代化 E2E 測試框架，支援多瀏覽器（Chromium、Firefox、WebKit）、多語言（JavaScript、TypeScript、Python、Java、.NET），非常適合用來測試 Web 應用。 今天我們就來簡單玩玩 Playwright，透過 TypeScript + VS Code 快速搭建一個測試環境，並實作一個基本案例：打開 Google，搜尋「study4」，點擊第一個搜尋結果，並驗證網址是否為 https://study4.tw。 開始之前：準備好你的環境 請先確保你已安裝以下工具： Node.js（建議版本 18 以上） Visual Studio Code 步驟一：建立專案 mkdir playwright-ts-demo cd playwright-ts-demo npm init -y 步驟二：安裝 Playwright 與 TypeScript 支援 npm install -D playwright typescript ts-node @types/node Playwright 安裝後可以支援 Chromium、Firefox、WebKit 等瀏覽器的自動操作。 步驟三：建立 TypeScript 設定檔 tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "CommonJS", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "outDir": "dist" }, "include": ["src"] } 步驟四：撰寫測試腳本 建立 src 資料夾，新增一個檔案 searchStudy4....

在撰寫和編輯 Azure Wiki 上的內容時，圖片是一種非常有用的方式，能可以更好地傳達訊息並增強文章的可讀性。但有時候圖片的大小會導致可讀性下降，這時候就需要調整圖片的大小，以符合頁面的版面設計或減少圖片的檔案大小。 第一種方式可以用 HTML Tag <IMG src="<圖片網址>" alt="圖片描述" style="width: 500px;"/> 但如果你的圖片是複製貼上來的，會存在於 Azure Wiki 這個 Repo，這時可以這樣設定去等比例縮放大小  或明確的給寬跟高