玩玩 Playwright — 測試案例來自資料集
「資料驅動測試(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 Testing 初體驗
為什麼用 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....
玩玩 Playwright - 整合 Azure DevOps CI
在現代 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 - 基本環境設定(TypeScript + VS Code)
在自動化測試的領域中,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 調整圖片大小
在撰寫和編輯 Azure Wiki 上的內容時,圖片是一種非常有用的方式,能可以更好地傳達訊息並增強文章的可讀性。但有時候圖片的大小會導致可讀性下降,這時候就需要調整圖片的大小,以符合頁面的版面設計或減少圖片的檔案大小。 第一種方式可以用 HTML Tag <IMG src="<圖片網址>" alt="圖片描述" style="width: 500px;"/> 但如果你的圖片是複製貼上來的,會存在於 Azure Wiki 這個 Repo,這時可以這樣設定去等比例縮放大小  或明確的給寬跟高 