PlayWright
https://playwright.dev/
以下為為 Microsoft PlayWright 測試工具教學。此為微軟推出的測試工具,包含錄製自動產生測試代碼與 trace 頁面查看測試的每個步驟與頁面結果,並且測試執行時間縮短為 cypress 的一半。
PlayWright 為免費使用安裝的工具,很適合用來自動化測試或是和 CI 工具整合。
安裝
npm i @playwright/test
範例
我們用 React 頁面為例:
import React, { useState } from 'react';
import './App.css';
function App() {
const [inputValue, setInputValue] = useState('');
const [submittedText, setSubmittedText] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleSubmit = () => {
setSubmittedText(inputValue);
setInputValue(''); // Clear the input field after submit
};
return (
<div>
<h1>Sample React Component</h1>
<input
type="text"
placeholder="Enter some text"
value={inputValue}
onChange={handleInputChange}
/>
<button onClick={handleSubmit}>Submit</button>
{submittedText && <p>Submitted Text: {submittedText}</p>}
</div>
);
}
export default App;
創建一個 Test folder 裡面包含檔案:SampleComponent.spec.js
const { test, expect } = require('@playwright/test');
test.describe('SampleComponent', () => {
test('should submit text and display it correctly', async ({ page }) => {
// Navigate to the page where your component is rendered
await page.goto('http://localhost:3000'); // Change URL to your local app
// Check if the input field, button, and text are present
const input = page.locator('input[placeholder="Enter some text"]');
const button = page.locator('button:has-text("Submit")');
const header = page.locator('h1');
await expect(header).toHaveText('Sample React Component');
// Fill the input field
await input.fill('Hello, Playwright!');
// Click the submit button
await button.click();
// Verify that the submitted text is displayed correctly
const submittedText = page.locator('p');
await expect(submittedText).toHaveText('Submitted Text: Hello, Playwright!');
// Ensure the input field is cleared after submit
await expect(input).toHaveValue('');
});
});
使用 Headed 模式
npx playwright test --headed
playWright 預設為 headless 模式,不開啟瀏覽器
Headed 必須先使用 npx playwright install`安裝 chromium
開啟錄製功能產生測試代碼
npx playwright codegen http://localhost:3000
使用後會出現一除錯視窗上面顯示我們在頁面上操作產生的測試代碼

產生 Trace
npx playwright test --trace on
之後會產生資料夾 test-results,在在更裡面的測試資歷夾會有 trace.zip,使用以下指令打開可以看到詳細測試執行流程
路徑名稱記得要更改為自己的 trace 產生的資料夾名稱
npx playwright show-trace ./test-results/tests-SampleComponent-Samp-xt-and-display-it-correctly/trace.zip

HTML 測試報告
npx playwright test --reporter=html

使用內建 VS Code 工具
安裝插件
之後記得把測試資料夾命名為 e2e,這個插件才能讀取到
或是可以使用它的初始化命令:
npm init playwright@latest --yes -- --quiet --browser=chromium --browser=firefox --browser=webkit --lang=js
之後就可以直接從介面控制測試
Last updated
Was this helpful?