測試使用選項
簡介
除了設定測試執行程式之外,您也可以為 Browser 或 BrowserContext 設定模擬、網路和錄製選項。這些選項會傳遞到 Playwright 設定檔中的 use: {}
物件。
基本選項
為所有測試設定基本 URL 和儲存狀態:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
// Base URL to use in actions like `await page.goto('/')`.
baseURL: 'http://localhost:3000',
// Populates context with given storage state.
storageState: 'state.json',
},
});
選項 | 說明 |
---|---|
testOptions.baseURL | 用於情境中所有頁面的基本 URL。允許僅使用路徑進行導覽,例如 page.goto('/settings') 。 |
testOptions.storageState | 使用指定的儲存狀態填入情境。適用於簡化驗證,了解更多。 |
模擬選項
透過 Playwright 您可以模擬真實裝置,例如行動電話或平板電腦。請參閱我們的專案指南以了解更多關於裝置模擬的資訊。您也可以為所有測試或特定測試模擬 "geolocation"
、"locale"
和 "timezone"
,以及設定 "permissions"
來顯示通知或變更 "colorScheme"
。請參閱我們的模擬指南以了解更多。
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
// Emulates `'prefers-colors-scheme'` media feature.
colorScheme: 'dark',
// Context geolocation.
geolocation: { longitude: 12.492507, latitude: 41.889938 },
// Emulates the user locale.
locale: 'en-GB',
// Grants specified permissions to the browser context.
permissions: ['geolocation'],
// Emulates the user timezone.
timezoneId: 'Europe/Paris',
// Viewport used for all pages in the context.
viewport: { width: 1280, height: 720 },
},
});
選項 | 說明 |
---|---|
testOptions.colorScheme | 模擬 'prefers-colors-scheme' 媒體功能,支援的值有 'light' 和 'dark' |
testOptions.geolocation | 情境的地理位置。 |
testOptions.locale | 模擬使用者區域設定,例如 en-GB 、de-DE 等。 |
testOptions.permissions | 要授予情境中所有頁面的權限清單。 |
testOptions.timezoneId | 變更情境的時區。 |
testOptions.viewport | 用於情境中所有頁面的檢視區。 |
網路選項
可用於設定網路的選項:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
// Whether to automatically download all the attachments.
acceptDownloads: false,
// An object containing additional HTTP headers to be sent with every request.
extraHTTPHeaders: {
'X-My-Header': 'value',
},
// Credentials for HTTP authentication.
httpCredentials: {
username: 'user',
password: 'pass',
},
// Whether to ignore HTTPS errors during navigation.
ignoreHTTPSErrors: true,
// Whether to emulate network being offline.
offline: true,
// Proxy settings used for all pages in the test.
proxy: {
server: 'http://myproxy.com:3128',
bypass: 'localhost',
},
},
});
選項 | 說明 |
---|---|
testOptions.acceptDownloads | 是否自動下載所有附件,預設為 true 。了解更多關於下載的使用方式。 |
testOptions.extraHTTPHeaders | 包含每個請求都要發送的額外 HTTP 標頭的物件。所有標頭值都必須是字串。 |
testOptions.httpCredentials | HTTP 驗證的認證。 |
testOptions.ignoreHTTPSErrors | 是否在導覽期間忽略 HTTPS 錯誤。 |
testOptions.offline | 是否模擬網路離線。 |
testOptions.proxy | 用於測試中所有頁面的代理設定。 |
錄製選項
透過 Playwright 您可以捕獲螢幕截圖、錄製影片以及追蹤您的測試。預設情況下這些功能都是關閉的,但您可以在 playwright.config.js
檔案中設定 screenshot
、video
和 trace
選項來啟用它們。
追蹤檔案、螢幕截圖和影片將出現在測試輸出目錄中,通常為 test-results
。
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
// Capture screenshot after each test failure.
screenshot: 'only-on-failure',
// Record trace only when retrying a test for the first time.
trace: 'on-first-retry',
// Record video only when retrying a test for the first time.
video: 'on-first-retry'
},
});
選項 | 說明 |
---|---|
testOptions.screenshot | 捕獲測試的螢幕截圖。選項包括 'off' 、'on' 和 'only-on-failure' |
testOptions.trace | Playwright 可以在執行測試時產生測試追蹤。稍後,您可以檢視追蹤並透過開啟追蹤檢視器取得 Playwright 執行的詳細資訊。選項包括:'off' 、'on' 、'retain-on-failure' 和 'on-first-retry' |
testOptions.video | Playwright 可以為您的測試錄製影片。選項包括:'off' 、'on' 、'retain-on-failure' 和 'on-first-retry' |
其他選項
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
// Maximum time each action such as `click()` can take. Defaults to 0 (no limit).
actionTimeout: 0,
// Name of the browser that runs tests. For example `chromium`, `firefox`, `webkit`.
browserName: 'chromium',
// Toggles bypassing Content-Security-Policy.
bypassCSP: true,
// Channel to use, for example "chrome", "chrome-beta", "msedge", "msedge-beta".
channel: 'chrome',
// Run browser in headless mode.
headless: false,
// Change the default data-testid attribute.
testIdAttribute: 'pw-test-id',
},
});
選項 | 說明 |
---|---|
testOptions.actionTimeout | 每個 Playwright 動作的逾時時間(毫秒)。預設為 0 (無逾時)。了解更多關於逾時以及如何為單一測試設定逾時。 |
testOptions.browserName | 執行測試的瀏覽器名稱。預設為 'chromium'。選項包括 chromium 、firefox 或 webkit 。 |
testOptions.bypassCSP | 切換是否繞過內容安全政策。當 CSP 包含正式環境來源時很有用。預設為 false 。 |
testOptions.channel | 要使用的瀏覽器通道。了解更多關於不同的瀏覽器和通道。 |
testOptions.headless | 是否以無頭模式執行瀏覽器,意即執行測試時不顯示瀏覽器。預設為 true 。 |
testOptions.testIdAttribute | 變更 Playwright 定位器使用的預設 data-testid 屬性。 |
更多瀏覽器和情境選項
任何被 browserType.launch()、browser.newContext() 或 browserType.connect() 接受的選項都可以分別放入 use
區段中的 launchOptions
、contextOptions
或 connectOptions
。
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
launchOptions: {
slowMo: 50,
},
},
});
然而,最常見的選項如 headless
或 viewport
都可以直接在 use
區段中使用 - 請參閱基本選項、模擬或網路。
明確的情境建立和選項繼承
如果使用內建的 browser
佈置,呼叫 browser.newContext() 將建立一個繼承設定檔選項的情境:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
userAgent: 'some custom ua',
viewport: { width: 100, height: 100 },
},
});
一個說明初始情境選項已設定的範例測試:
test('should inherit use options on context when using built-in browser fixture', async ({
browser,
}) => {
const context = await browser.newContext();
const page = await context.newPage();
expect(await page.evaluate(() => navigator.userAgent)).toBe('some custom ua');
expect(await page.evaluate(() => window.innerWidth)).toBe(100);
await context.close();
});
設定範圍
您可以全域、依專案或依測試來設定 Playwright。例如,您可以透過將 locale
新增到 Playwright 設定檔的 use
選項來全域設定要使用的區域設定,然後使用設定檔中的 project
選項為特定專案覆寫它。您也可以透過在測試檔案中新增 test.use({})
並傳入選項來為特定測試覆寫它。
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
locale: 'en-GB'
},
});
您可以使用 Playwright 設定檔中的 project
選項為特定專案覆寫選項。
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
locale: 'de-DE',
},
},
],
});
您可以使用 test.use()
方法並傳入選項來為特定測試檔案覆寫選項。例如,要為特定測試以法語區域設定執行測試:
import { test, expect } from '@playwright/test';
test.use({ locale: 'fr-FR' });
test('example', async ({ page }) => {
// ...
});
在 describe 區塊內也是一樣。例如,要在 describe 區塊中以法語區域設定執行測試:
import { test, expect } from '@playwright/test';
test.describe('french language block', () => {
test.use({ locale: 'fr-FR' });
test('example', async ({ page }) => {
// ...
});
});
重設選項
您可以將選項重設為設定檔中定義的值。考慮以下設定了 baseURL
的設定檔:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
baseURL: 'https://playwright.dev',
},
});
您現在可以為檔案設定 baseURL
,也可以為單一測試選擇退出。
import { test } from '@playwright/test';
// 為這個檔案設定 baseURL。
test.use({ baseURL: 'https://playwright.dev/docs/intro' });
test('check intro contents', async ({ page }) => {
// 這個測試將使用上面定義的 "https://playwright.dev/docs/intro" 基本 URL。
});
test.describe(() => {
// 將值重設為設定檔中定義的值。
test.use({ baseURL: undefined });
test('can navigate to intro from the home page', async ({ page }) => {
// 這個測試將使用設定檔中定義的 "https://playwright.dev" 基本 URL。
});
});
如果您想要完全重設值為 undefined
,請使用長格式佈置標記法。
import { test } from '@playwright/test';
// 為這個檔案完全取消設定 baseURL。
test.use({
baseURL: [async ({}, use) => use(undefined), { scope: 'test' }],
});
test('no base url', async ({ page }) => {
// 這個測試將沒有基本 URL。
});