發行說明
版本 1.47
Network 頁籤改進
UI 模式和追蹤檢視器中的 Network 頁籤有幾個不錯的改進:
- 按資產類型和 URL 過濾
- 更好地顯示查詢字串參數
- 字體資產預覽
--tsconfig
CLI 選項
預設情況下,Playwright 將使用啟發式方法查找每個匯入文件的最近 tsconfig。您現在可以在命令列中指定一個 tsconfig 文件,Playwright 將對所有匯入文件使用它,而不僅僅是測試文件:
# Pass a specific tsconfig
npx playwright test --tsconfig tsconfig.test.json
APIRequestContext 現在接受 URLSearchParams
和 string
作為查詢參數
您現在可以將 URLSearchParams
和 string
作為查詢參數傳遞給 APIRequestContext:
test('query params', async ({ request }) => {
const searchParams = new URLSearchParams();
searchParams.set('userId', 1);
const response = await request.get(
'https://jsonplaceholder.typicode.com/posts',
{
params: searchParams // or as a string: 'userId=1'
}
);
// ...
});
雜項
mcr.microsoft.com/playwright:v1.47.0
現在提供基於 Ubuntu 24.04 Noble 的 Playwright 映像。要使用基於 22.04 jammy 的映像,請改用mcr.microsoft.com/playwright:v1.47.0-jammy
。- 在 page.removeAllListeners()、browser.removeAllListeners() 和 browserContext.removeAllListeners() 中新增了
behavior
選項,以等待正在進行的監聽器完成。 - 現在可以通過將
cert
和key
作為緩衝區傳遞,而不是文件路徑,從記憶體中傳遞 TLS 客戶端證書。 - 現在可以在 HTML 報告中的新分頁中打開
text/html
內容類型的附件。這對於在 Playwright 測試報告中包含第三方報告或其他 HTML 內容並將其分發給您的團隊非常有用。 - locator.selectOption() 中的
noWaitAfter
已被棄用。 - 我們已經看到 Webkit 中的 WebGL 在 GitHub Actions
macos-13
上表現不正常的報告。我們建議將 GitHub Actions 升級到macos-14
。
瀏覽器版本
- Chromium 129.0.6668.29
- Mozilla Firefox 130.0
- WebKit 18.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 128
- Microsoft Edge 128
版本 1.46
TLS Client Certificates
Playwright 現在允許您提供客戶端證書,以便伺服器可以根據 TLS 客戶端驗證來驗證它們。
以下程式碼片段設定用於 https://example.com
的客戶端憑證:
import { defineConfig } from '@playwright/test';
export default defineConfig({
// ...
use: {
clientCertificates: [{
origin: 'https://example.com',
certPath: './cert.pem',
keyPath: './key.pem',
passphrase: 'mysecretpassword',
}],
},
// ...
});
你也可以將客戶端證書提供給特定的test project或作為browser.newContext()和apiRequest.newContext()的參數。
--only-changed
cli option
新的 CLI 選項 --only-changed
只會執行自上次 git 提交或特定 git "ref" 以來已更改的測試檔案。這也會執行所有匯入任何已更改檔案的測試檔案。
# Only run test files with uncommitted changes
npx playwright test --only-changed
# Only run test files changed relative to the "main" branch
npx playwright test --only-changed=main
元件測試: 新的 router
fixture
此次發佈引入了一個實驗性的 router
固定裝置,用於攔截和處理元件測試中的網路請求。有兩種使用 router 固定裝置的方法:
- 呼叫
router.route(url, handler)
,其行為類似於 page.route()。 - 呼叫
router.use(handlers)
並傳遞 MSW 函式庫 的請求處理器給它。
這裡是一個在測試中重複使用現有 MSW 處理器的範例。
import { handlers } from '@src/mocks/handlers';
test.beforeEach(async ({ router }) => {
// install common handlers before each test
await router.use(...handlers);
});
test('example test', async ({ mount }) => {
// test as usual, your handlers are active
// ...
});
此裝置僅在元件測試中可用。
UI Mode / Trace Viewer Updates
- 測試註釋現在顯示在 UI 模式中。
- 文字附件的內容現在會在附件窗格中內嵌顯示。
- 新設定可顯示/隱藏路由操作,如 route.continue()。
- 請求方法和狀態顯示在網路詳細資訊標籤中。
- 新按鈕可將來源檔案位置複製到剪貼簿。
- Metadata 窗格現在顯示
baseURL
。
雜項
- 新的
maxRetries
選項在 apiRequestContext.fetch(),當ECONNRESET
網路錯誤時會重試。 - 新選項來 封裝一個 fixture,以最小化 fixture 在測試報告和錯誤訊息中的曝光。
- 新選項來提供一個 自訂 fixture 標題,用於測試報告和錯誤訊息中。
瀏覽器版本
- Chromium 128.0.6613.18
- Mozilla Firefox 128.0
- WebKit 18.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 127
- Microsoft Edge 127
版本 1.45
時鐘
利用新的 Clock API 允許在測試中操作和控制時間,以驗證與時間相關的行為。此 API 涵蓋許多常見情境,包括:
- 使用預定義時間進行測試;
- 保持一致的時間和計時器;
- 監控不活動狀態;
- 手動計時。
// Initialize clock and let the page load naturally.
await page.clock.install({ time: new Date('2024-02-02T08:00:00') });
await page.goto('http://localhost:3333');
// Pretend that the user closed the laptop lid and opened it again at 10am,
// Pause the time once reached that point.
await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));
// Assert the page state.
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');
// Close the laptop lid again and open it at 10:30am.
await page.clock.fastForward('30:00');
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:30:00 AM');
請參閱時鐘指南以獲取更多資訊。
測試執行器
-
新的 CLI 選項
--fail-on-flaky-tests
,在任何不穩定的測試時將退出碼設置為1
。請注意,預設情況下,當所有失敗的測試在重試後恢復時,測試運行器會以退出碼0
退出。使用此選項,在這種情況下測試運行將失敗。 -
新的環境變量
PLAYWRIGHT_FORCE_TTY
控制內建的list
、line
和dot
報告器是否假設為即時終端。例如,當您的 CI 環境無法很好地處理 ANSI 控制序列時,這可能有助於停用 tty 行為。或者,如果您計劃後處理輸出並處理控制序列,即使沒有即時終端,也可以啟用 tty 行為。# 避免輸出 ANSI 控制序列的 TTY 功能
PLAYWRIGHT_FORCE_TTY=0 npx playwright test
# 啟用 TTY 功能,假設終端寬度為 80
PLAYWRIGHT_FORCE_TTY=80 npx playwright test -
新選項 testConfig.respectGitIgnore 和 testProject.respectGitIgnore 控制在搜索測試時是否排除匹配
.gitignore
模式的文件。 -
新屬性
timeout
現在可用於自定義的 expect 匹配器。此屬性考慮playwright.config.ts
和expect.configure()
。import { expect as baseExpect } from '@playwright/test';
export const expect = baseExpect.extend({
async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
// 當未指定 timeout 選項時,使用配置的超時時間。
const timeout = options?.timeout ?? this.timeout;
// ... 實現斷言 ...
},
});
雜項
-
方法 locator.setInputFiles() 現在支援上傳目錄,適用於
<input type=file webkitdirectory>
元素。await page.getByLabel('Upload directory').setInputFiles(path.join(__dirname, 'mydir'));
-
多個方法如 locator.click() 或 locator.press() 現在支援
ControlOrMeta
修改鍵。此鍵在 macOS 上對應Meta
,在 Windows 和 Linux 上對應Control
。// 按下常用的鍵盤快捷鍵 Control+S 或 Meta+S 來觸發 "儲存" 操作。
await page.keyboard.press('ControlOrMeta+S'); -
在 apiRequest.newContext() 中新增屬性
httpCredentials.send
,允許總是發送Authorization
標頭或僅在回應401 Unauthorized
時發送。 -
在 apiRequestContext.dispose() 中新增選項
reason
,此選項將包含於因上下文釋放而中斷的進行中操作的錯誤訊息中。 -
在 browserType.launchServer() 中新增選項
host
,允許接受指定地址上的 websocket 連接,而不是未指定的0.0.0.0
。 -
Playwright 現在支援 Ubuntu 24.04 上的 Chromium、Firefox 和 WebKit。
-
v1.45 是 macOS 12 Monterey 收到 WebKit 更新的最後一個版本。請更新 macOS 以繼續使用最新的 WebKit。
瀏覽器版本
- Chromium 127.0.6533.5
- Mozilla Firefox 127.0
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 126
- Microsoft Edge 126
版本 1.44
新的 API
無障礙聲明
-
expect(locator).toHaveAccessibleName() 檢查元素是否具有指定的可存取名稱:
const locator = page.getByRole('button');
await expect(locator).toHaveAccessibleName('Submit'); -
expect(locator).toHaveAccessibleDescription() 檢查元素是否具有指定的可存取描述:
const locator = page.getByRole('button');
await expect(locator).toHaveAccessibleDescription('Upload a photo'); -
expect(locator).toHaveRole() 檢查元素是否具有指定的 ARIA 角色:
const locator = page.getByTestId('save-button');
await expect(locator).toHaveRole('button');
定位器處理程式
- 執行使用 page.addLocatorHandler() 添加的處理程式後,Playwright 現在將等待觸發處理程式的覆蓋層不再可見。你可以使用新的
noWaitAfter
選項選擇退出此行為。 - 你可以在 page.addLocatorHandler() 中使用新的
times
選項來指定處理程式應該執行的最大次數。 - page.addLocatorHandler() 中的處理程式現在接受定位器作為參數。
- 新的 page.removeLocatorHandler() 方法用於移除先前添加的定位器處理程式。
const locator = page.getByText('This interstitial covers the button');
await page.addLocatorHandler(locator, async overlay => {
await overlay.locator('#close').click();
}, { times: 3, noWaitAfter: true });
// Run your tests that can be interrupted by the overlay.
// ...
await page.removeLocatorHandler(locator);
其他選項
-
multipart
選項在apiRequestContext.fetch()
中現在接受FormData
並支援具有相同名稱的重複欄位。const formData = new FormData();
formData.append('file', new File(['let x = 2024;'], 'f1.js', { type: 'text/javascript' }));
formData.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
context.request.post('https://example.com/uploadFiles', {
multipart: formData
}); -
expect(callback).toPass({ intervals })
現在可以在 testConfig.expect 中全域配置expect.toPass.intervals
選項或在 testProject.expect 中按專案配置。 -
expect(page).toHaveURL(url)
現在支援ignoreCase
選項。 -
testProject.ignoreSnapshots 允許按專案配置是否跳過截圖期望。
Reporter API
- 新方法 suite.entries() 以聲明順序返回子測試套件和測試案例。suite.type 和 testCase.type 可用於區分列表中的測試案例和套件。
- Blob 報告器現在允許使用單一選項
outputFile
覆蓋報告文件路徑。相同的選項也可以指定為PLAYWRIGHT_BLOB_OUTPUT_FILE
環境變數,這在 CI/CD 上可能更方便。 - JUnit 報告器現在支持
includeProjectInTestName
選項。
命令列
-
--last-failed
CLI 選項,用於只執行上一次失敗的測試。首先執行所有測試:
$ npx playwright test
執行 103 個測試,使用 5 個工作者
...
2 個失敗
[chromium] › my-test.spec.ts:8:5 › two ─────────────────────────────────────────────────────────
[chromium] › my-test.spec.ts:13:5 › three ──────────────────────────────────────────────────────
101 個通過 (30.0s)現在修復失敗的測試並再次使用
--last-failed
選項執行 Playwright:$ npx playwright test --last-failed
執行 2 個測試,使用 2 個工作者
2 個通過 (1.2s)
瀏覽器版本
- Chromium 125.0.6422.14
- Mozilla Firefox 125.0.1
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 124
- Microsoft Edge 124
版本 1.43
新的 API
-
方法 browserContext.clearCookies() 現在支援過濾器,只移除部分 cookies。
// 清除所有 cookies。
await context.clearCookies();
// 新增: 清除具有特定名稱的 cookies。
await context.clearCookies({ name: 'session-id' });
// 新增: 清除特定域名的 cookies。
await context.clearCookies({ domain: 'my-origin.com' }); -
新模式
retain-on-first-failure
用於 testOptions.trace。在此模式下,trace 會在每次測試的第一次執行時記錄,但不會在重試時記錄。當測試執行失敗時,trace 檔案會被保留,否則會被移除。import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
trace: 'retain-on-first-failure',
},
}); -
新屬性 testInfo.tags 在測試執行期間暴露測試標籤。
test('example', async ({ page }) => {
console.log(test.info().tags);
}); -
新方法 locator.contentFrame() 將 Locator 物件轉換為 FrameLocator。當你已經獲得一個 Locator 物件,並且稍後希望與框架內的內容互動時,這會很有用。
const locator = page.locator('iframe[name="embedded"]');
// ...
const frameLocator = locator.contentFrame();
await frameLocator.getByRole('button').click(); -
新方法 frameLocator.owner() 將 FrameLocator 物件轉換為 Locator。當你已經獲得一個 FrameLocator 物件,並且稍後希望與
iframe
元素互動時,這會很有用。const frameLocator = page.frameLocator('iframe[name="embedded"]');
// ...
const locator = frameLocator.owner();
await expect(locator).toBeVisible();
UI Mode Updates
- 查看測試清單中的標籤。
- 輸入
@fast
或點擊標籤本身以標籤過濾。 - 新增快捷鍵:
- "F5" 執行測試。
- "Shift F5" 停止執行測試。
- "Ctrl `" 切換測試輸出。
瀏覽器版本
- Chromium 124.0.6367.8
- Mozilla Firefox 124.0
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 123
- Microsoft Edge 123
版本 1.42
新的 API
- 新方法 page.addLocatorHandler() 註冊了一個回呼,當指定的元素變得可見時將會被呼叫並可能阻止 Playwright 操作。回呼可以去除覆蓋層。這裡有一個範例,當 cookie 對話框出現時將其關閉:
// Setup the handler.
await page.addLocatorHandler(
page.getByRole('heading', { name: 'Hej! You are in control of your cookies.' }),
async () => {
await page.getByRole('button', { name: 'Accept all' }).click();
});
// Write the test as usual.
await page.goto('https://www.ikea.com/');
await page.getByRole('link', { name: 'Collection of blue and white' }).click();
await expect(page.getByRole('heading', { name: 'Light and easy' })).toBeVisible();
expect(callback).toPass()
timeout 現在可以透過expect.toPass.timeout
選項在全域或在專案設定中配置- electronApplication.on('console') 事件在 Electron 主程序呼叫 console API 方法時觸發。
electronApp.on('console', async msg => {
const values = [];
for (const arg of msg.args())
values.push(await arg.jsonValue());
console.log(...values);
});
await electronApp.evaluate(() => console.log('hello', 5, { foo: 'bar' }));
- 新語法 用於為測試添加標籤(測試標題中的 @-符號仍然支持):
test('test customer login', {
tag: ['@fast', '@login'],
}, async ({ page }) => {
// ...
});
使用 --grep
命令列選項來僅執行具有特定標籤的測試。
npx playwright test --grep @fast
--project
命令列標誌 現在支援 '*' 萬用字元:
npx playwright test --project='*mobile*'
- 新語法 用於測試註釋:
test('test full report', {
annotation: [
{ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
{ type: 'docs', description: 'https://playwright.dev/docs/test-annotations#tag-tests' },
],
}, async ({ page }) => {
// ...
});
- page.pdf() 接受兩個新選項
tagged
和outline
。
公告
- ⚠️ Ubuntu 18 已不再支援。
瀏覽器版本
- Chromium 123.0.6312.4
- Mozilla Firefox 123.0
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 122
- Microsoft Edge 123
版本 1.41
新的 API
- 新方法 page.unrouteAll() 移除所有由 page.route() 和 page.routeFromHAR() 註冊的路由。可選擇等待正在進行的路由完成,或忽略來自它們的任何錯誤。
- 新方法 browserContext.unrouteAll() 移除所有由 browserContext.route() 和 browserContext.routeFromHAR() 註冊的路由。可選擇等待正在進行的路由完成,或忽略來自它們的任何錯誤。
- 新選項
style
在 page.screenshot() 和 locator.screenshot() 中,允許在截圖前向頁面添加自定義 CSS。 - 新選項
stylePath
用於方法 expect(page).toHaveScreenshot() 和 expect(locator).toHaveScreenshot(),在截圖時應用自定義樣式表。 - 新選項
fileName
用於 Blob reporter,指定要建立的報告名稱。
瀏覽器版本
- Chromium 121.0.6167.57
- Mozilla Firefox 121.0
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 120
- Microsoft Edge 120
版本 1.40
測試程式碼產生器更新
產生斷言的新工具:
- "Assert visibility" 工具生成 expect(locator).toBeVisible()。
- "Assert value" 工具生成 expect(locator).toHaveValue()。
- "Assert text" 工具生成 expect(locator).toContainText()。
這裡是一個帶有斷言的生成測試範例:
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page.getByLabel('Breadcrumbs').getByRole('list')).toContainText('Installation');
await expect(page.getByLabel('Search')).toBeVisible();
await page.getByLabel('Search').click();
await page.getByPlaceholder('Search docs').fill('locator');
await expect(page.getByPlaceholder('Search docs')).toHaveValue('locator');
});
新的 API
- 選項
reason
在 page.close(), browserContext.close() 和 browser.close()。關閉原因會報告所有因關閉而中斷的操作。 - 選項
firefoxUserPrefs
在 browserType.launchPersistentContext()。
其他變更
- 方法 download.path() 和 download.createReadStream() 在下載失敗和取消時會拋出錯誤。
- Playwright docker image 現在附帶 Node.js v20。
瀏覽器版本
- Chromium 120.0.6099.28
- Mozilla Firefox 119.0
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 119
- Microsoft Edge 119
版本 1.39
將自訂匹配器添加到你的 expect
你可以透過提供自訂匹配器來擴展 Playwright 斷言。這些匹配器將可用於 expect 物件。
import { expect as baseExpect } from '@playwright/test';
export const expect = baseExpect.extend({
async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
// ... see documentation for how to write matchers.
},
});
test('pass', async ({ page }) => {
await expect(page.getByTestId('cart')).toHaveAmount(5);
});
請參閱完整範例文件。
合併測試夾具
您現在可以合併來自多個檔案或模組的測試夾具:
import { mergeTests } from '@playwright/test';
import { test as dbTest } from 'database-test-utils';
import { test as a11yTest } from 'a11y-test-utils';
export const test = mergeTests(dbTest, a11yTest);
import { test } from './fixtures';
test('passes', async ({ database, page, a11y }) => {
// use database and a11y fixtures.
});
合併自訂 expect 比對器
現在你可以合併來自多個檔案或模組的自訂 expect 比對器:
import { mergeTests, mergeExpects } from '@playwright/test';
import { test as dbTest, expect as dbExpect } from 'database-test-utils';
import { test as a11yTest, expect as a11yExpect } from 'a11y-test-utils';
export const test = mergeTests(dbTest, a11yTest);
export const expect = mergeExpects(dbExpect, a11yExpect);
import { test, expect } from './fixtures';
test('passes', async ({ page, database }) => {
await expect(database).toHaveDatabaseUser('admin');
await expect(page).toPassA11yAudit();
});
隱藏實作細節: box 測試步驟
你可以將 test.step() 標記為 "boxed",以便其中的錯誤指向步驟呼叫位置。
async function login(page) {
await test.step('login', async () => {
// ...
}, { box: true }); // Note the "box" option here.
}
Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
... error details omitted ...
14 | await page.goto('https://github.com/login');
> 15 | await login(page);
| ^
16 | });
請參閱 test.step() 文件以獲取完整範例。
新的 API
瀏覽器版本
- Chromium 119.0.6045.9
- Mozilla Firefox 118.0.1
- WebKit 17.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 118
- Microsoft Edge 118
版本 1.38
UI Mode Updates
- 放大時間範圍。
- 網路面板重新設計。
新的 API
- browserContext.on('weberror')
- locator.pressSequentially()
- The reporter.onEnd() now reports
startTime
and total runduration
.
棄用
- 以下方法已被棄用: page.type(), frame.type(), locator.type() 和 elementHandle.type()。請改用 locator.fill(),其速度更快。僅在頁面上有特殊鍵盤處理且需要逐個按鍵時,才使用 locator.pressSequentially()。
重大變更: Playwright 不再自動下載瀏覽器
注意: 如果你正在使用
@playwright/test
套件, 這個變更不會影響你。
Playwright 建議使用 @playwright/test
套件並通過 npx playwright install
命令下載瀏覽器。如果你遵循這個建議,對你來說沒有任何改變。
然而,直到 v1.38,安裝 playwright
套件而不是 @playwright/test
確實會自動下載瀏覽器。現在情況不再如此,我們建議通過 npx playwright install
命令顯式下載瀏覽器。
v1.37 及更早版本
playwright
套件在 npm install
期間下載瀏覽器,而 @playwright/test
則沒有。
v1.38 及之後
playwright
和 @playwright/test
套件在 npm install
時不會下載瀏覽器。
推薦遷移
執行 npx playwright install
在 npm install
之後下載瀏覽器。例如,在你的 CI 配置中:
- run: npm ci
- run: npx playwright install --with-deps
替代遷移選項 - 不推薦
添加 @playwright/browser-chromium
、@playwright/browser-firefox
和 @playwright/browser-webkit
作為相依套件。這些套件會在 npm install
時下載相應的瀏覽器。請確保所有 Playwright 套件的版本保持同步:
// package.json
{
"devDependencies": {
"playwright": "1.38.0",
"@playwright/browser-chromium": "1.38.0",
"@playwright/browser-firefox": "1.38.0",
"@playwright/browser-webkit": "1.38.0"
}
}
瀏覽器版本
- Chromium 117.0.5938.62
- Mozilla Firefox 117.0
- WebKit 17.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 116
- Microsoft Edge 116
版本 1.37
新的 npx playwright merge-reports
工具
如果你在多個分片上執行測試,現在可以使用新的 merge-reports
CLI 工具將所有報告合併到單一 HTML 報告(或任何其他報告)中。
使用 merge-reports
工具需要以下步驟:
-
在 CI 上執行時,將新的 "blob" reporter 添加到 config 中:
playwright.config.tsexport default defineConfig({
testDir: './tests',
reporter: process.env.CI ? 'blob' : 'html',
});"blob" reporter 將生成包含所有測試執行資訊的 ".zip" 文件。
-
將所有 "blob" 報告複製到單一共享位置並執行
npx playwright merge-reports
:
npx playwright merge-reports --reporter html ./all-blob-reports
閱讀更多在 我們的文件。
📚 Debian 12 Bookworm 支援
Playwright 現在支援 Debian 12 Bookworm(x86_64 和 arm64)上的 Chromium、Firefox 和 WebKit。如遇到任何問題,請告訴我們!
Linux 支援看起來像這樣:
Ubuntu 20.04 | Ubuntu 22.04 | Debian 11 | Debian 12 | |
---|---|---|---|---|
Chromium | ✅ | ✅ | ✅ | ✅ |
WebKit | ✅ | ✅ | ✅ | ✅ |
Firefox | ✅ | ✅ | ✅ | ✅ |
UI Mode Updates
- UI Mode 現在會遵守專案相依性。您可以通過在專案列表中勾選/取消勾選來控制要遵守的相依性。
- 測試的控制台日誌現在顯示在控制台標籤中。
瀏覽器版本
- Chromium 116.0.5845.82
- Mozilla Firefox 115.0
- WebKit 17.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 115
- Microsoft Edge 115
版本 1.36
🏝️ 夏季維護版本發佈。
瀏覽器版本
- Chromium 115.0.5790.75
- Mozilla Firefox 115.0
- WebKit 17.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 114
- Microsoft Edge 114
版本 1.35
重點
-
UI mode is now available in VSCode Playwright extension via a new "Show trace viewer" button:
-
UI mode and trace viewer mark network requests handled with page.route() and browserContext.route() handlers, as well as those issued via the API testing:
-
New option
maskColor
for methods page.screenshot(), locator.screenshot(), expect(page).toHaveScreenshot() and expect(locator).toHaveScreenshot() to change default masking color:await page.goto('https://playwright.dev');
await expect(page).toHaveScreenshot({
mask: [page.locator('img')],
maskColor: '#00FF00', // green
}); -
New
uninstall
CLI command to uninstall browser binaries:$ npx playwright uninstall # remove browsers installed by this installation
$ npx playwright uninstall --all # remove all ever-install Playwright browsers -
Both UI mode and trace viewer now could be opened in a browser tab:
$ npx playwright test --ui-port 0 # open UI mode in a tab on a random port
$ npx playwright show-trace --port 0 # open trace viewer in tab on a random port
⚠️ 重大變更
-
playwright-core
二進位檔已從playwright
重新命名為playwright-core
。所以如果你使用playwright-core
CLI,請確保更新名稱:$ npx playwright-core install # 使用 playwright-core 時安裝瀏覽器的新方式
此變更 不會 影響
@playwright/test
和playwright
套件使用者。
瀏覽器版本
- Chromium 115.0.5790.13
- Mozilla Firefox 113.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 114
- Microsoft Edge 114
版本 1.34
重點
-
UI Mode 現在顯示步驟、fixtures 和附件:
-
新屬性 testProject.teardown 用於指定需要在此專案和所有相依專案完成後執行的專案。Teardown 用於清理此專案獲取的任何資源。
一個常見的模式是具有相應
teardown
的setup
相依性:playwright.config.tsimport { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'setup',
testMatch: /global.setup\.ts/,
teardown: 'teardown',
},
{
name: 'teardown',
testMatch: /global.teardown\.ts/,
},
{
name: 'chromium',
use: devices['Desktop Chrome'],
dependencies: ['setup'],
},
{
name: 'firefox',
use: devices['Desktop Firefox'],
dependencies: ['setup'],
},
{
name: 'webkit',
use: devices['Desktop Safari'],
dependencies: ['setup'],
},
],
}); -
新方法
expect.configure
用於建立預先配置的 expect 實例,具有其自己的預設值,如timeout
和soft
。const slowExpect = expect.configure({ timeout: 10000 });
await slowExpect(locator).toHaveText('Submit');
// 總是進行軟性斷言。
const softExpect = expect.configure({ soft: true }); -
新選項
stderr
和stdout
在 testConfig.webServer 中配置輸出處理:playwright.config.tsimport { defineConfig } from '@playwright/test';
export default defineConfig({
// 在開始測試之前運行本地開發伺服器
webServer: {
command: 'npm run start',
url: 'http://127.0.0.1:3000',
reuseExistingServer: !process.env.CI,
stdout: 'pipe',
stderr: 'pipe',
},
}); -
新的 locator.and() 用於建立同時匹配兩個定位器的定位器。
const button = page.getByRole('button').and(page.getByTitle('Subscribe'));
-
新事件 browserContext.on('console') 和 browserContext.on('dialog') 用於訂閱來自給定瀏覽器上下文的任何頁面的對話框和控制台訊息。使用新方法 consoleMessage.page() 和 dialog.page() 來確定事件來源。
⚠️ 重大變更
-
npx playwright test
如果你安裝了playwright
和@playwright/test
兩者將不再有效。沒有必要同時安裝兩者,因為你可以直接從@playwright/test
導入瀏覽器自動化 API:automation.tsimport { chromium, firefox, webkit } from '@playwright/test';
/* ... */ -
Node.js 14 不再受支援,因為它在 2023 年 4 月 30 日達到生命週期終點。
瀏覽器版本
- Chromium 114.0.5735.26
- Mozilla Firefox 113.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 113
- Microsoft Edge 113
版本 1.33
定位器更新
-
使用 locator.or() 建立一個符合任一定位器的定位器。考慮一個情境,你想點擊 "New email" 按鈕,但有時會彈出安全設定對話框。在這種情況下,你可以等待 "New email" 按鈕或對話框並相應地操作:
const newEmail = page.getByRole('button', { name: 'New email' });
const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();
if (await dialog.isVisible())
await page.getByRole('button', { name: 'Dismiss' }).click();
await newEmail.click(); -
在 locator.filter() 中使用新的選項
hasNot
和hasNotText
來找到不符合某些條件的元素。const rowLocator = page.locator('tr');
await rowLocator
.filter({ hasNotText: 'text in column 1' })
.filter({ hasNot: page.getByRole('button', { name: 'column 2 button' }) })
.screenshot(); -
使用新的 web-first 斷言 expect(locator).toBeAttached() 確保元素存在於頁面的 DOM 中。不要與 expect(locator).toBeVisible() 混淆,後者確保元素既已附加又可見。
新的 API
- locator.or()
- 新選項
hasNot
在 locator.filter() - 新選項
hasNotText
在 locator.filter() - expect(locator).toBeAttached()
- 新選項
timeout
在 route.fetch() - reporter.onExit()
⚠️ 重大變更
mcr.microsoft.com/playwright:v1.33.0
現在提供基於 Ubuntu Jammy 的 Playwright 映像。要使用基於 focal 的映像,請改用mcr.microsoft.com/playwright:v1.33.0-focal
。
瀏覽器版本
- Chromium 113.0.5672.53
- Mozilla Firefox 112.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 112
- Microsoft Edge 112
版本 1.32
準備推出 UI 模式 (預覽)
新的 UI Mode 讓你可以探索、執行和除錯測試。內建監看模式。
與新標誌 --ui
互動:
npx playwright test --ui
新的 API
- 新選項
updateMode
和updateContent
在 page.routeFromHAR() 和 browserContext.routeFromHAR()。 - 鏈接現有的定位器物件,詳情請參見 定位器文件。
- 新屬性 testInfo.testId。
- 方法 tracing.startChunk() 中的新選項
name
。
⚠️ 元件測試中的重大變更
注意: 僅限元件測試, 不影響端到端測試。
@playwright/experimental-ct-react
現在僅支援 React 18。- 如果你正在使用 React 16 或 17 進行元件測試,請將
@playwright/experimental-ct-react
替換為@playwright/experimental-ct-react17
。
瀏覽器版本
- Chromium 112.0.5615.29
- Mozilla Firefox 111.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 111
- Microsoft Edge 111
版本 1.31
新的 API
-
新屬性 testProject.dependencies 用於配置專案之間的相依性。
使用相依性允許全域設定產生追蹤和其他工件,請參閱測試報告中的設定步驟等。
playwright.config.tsimport { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'setup',
testMatch: /global.setup\.ts/,
},
{
name: 'chromium',
use: devices['Desktop Chrome'],
dependencies: ['setup'],
},
{
name: 'firefox',
use: devices['Desktop Firefox'],
dependencies: ['setup'],
},
{
name: 'webkit',
use: devices['Desktop Safari'],
dependencies: ['setup'],
},
],
}); -
新的斷言 expect(locator).toBeInViewport() 確保定位器指向與視口相交的元素,根據 intersection observer API。
const button = page.getByRole('button');
// 確保元素的至少一部分與視口相交。
await expect(button).toBeInViewport();
// 確保元素完全在視口外。
await expect(button).not.toBeInViewport();
// 確保元素至少有一半與視口相交。
await expect(button).toBeInViewport({ ratio: 0.5 });
雜項
- 現在可以在單獨的視窗中打開追蹤檢視器中的 DOM 快照。
- 新方法
defineConfig
用於playwright.config
。 - 方法 route.fetch() 的新選項
Route.fetch.maxRedirects
。 - Playwright 現在支援 Debian 11 arm64。
- 官方 docker images 現在包含 Node 18 而不是 Node 16。
⚠️ 元件測試中的重大變更
注意: 僅限元件測試, 不影響端到端測試。
playwright-ct.config
設定檔案用於component testing 現在需要呼叫 defineConfig
。
// Before
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = {
// ... config goes here ...
};
export default config;
將 config
變數定義替換為 defineConfig
呼叫:
// After
import { defineConfig, devices } from '@playwright/experimental-ct-react';
export default defineConfig({
// ... config goes here ...
});
瀏覽器版本
- Chromium 111.0.5563.19
- Mozilla Firefox 109.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 110
- Microsoft Edge 110
版本 1.30
瀏覽器版本
- Chromium 110.0.5481.38
- Mozilla Firefox 108.0.2
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 109
- Microsoft Edge 109
版本 1.29
新的 API
-
新方法 route.fetch() 和 route.fulfill() 的新選項
json
:await page.route('**/api/settings', async route => {
// 獲取原始設定。
const response = await route.fetch();
// 強制設定主題為預定義值。
const json = await response.json();
json.theme = 'Solorized';
// 使用修改後的資料完成。
await route.fulfill({ json });
}); -
新方法 locator.all() 用於遍歷所有匹配的元素:
// 檢查所有的複選框!
const checkboxes = page.getByRole('checkbox');
for (const checkbox of await checkboxes.all())
await checkbox.check(); -
locator.selectOption() 現在可以通過值或標籤匹配:
<select multiple>
<option value="red">Red</div>
<option value="green">Green</div>
<option value="blue">Blue</div>
</select>await element.selectOption('Red');
-
重試程式碼塊直到所有斷言通過:
await expect(async () => {
const response = await page.request.get('https://api.example.com');
await expect(response).toBeOK();
}).toPass();在 我們的文件 中閱讀更多資訊。
-
測試失敗時自動捕獲全頁截圖:
playwright.config.tsimport { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
screenshot: {
mode: 'only-on-failure',
fullPage: true,
}
}
});
雜項
- Playwright Test 現在遵循
jsconfig.json
。 - 新選項
args
和proxy
用於 androidDevice.launchBrowser()。 - 方法中的選項
postData
route.continue() 現在支援 Serializable 值。
瀏覽器版本
- Chromium 109.0.5414.46
- Mozilla Firefox 107.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 108
- Microsoft Edge 108
版本 1.28
Playwright 工具
- 在 VSCode 中於游標處記錄。 你可以執行測試,將游標定位在測試結束處並繼續生成測試。
- VSCode 中的即時定位器。 你可以在 VSCode 中懸停並編輯定位器,以在打開的瀏覽器中高亮顯示它們。
- CodeGen 中的即時定位器。 使用 "Explore" 工具為頁面上的任何元素生成定位器。
- 程式碼產生器和 Trace Viewer 深色主題。 自動從作業系統設定中獲取。
測試執行器
-
配置重試次數和測試超時時間,使用 test.describe.configure() 為文件或測試設定。
// 文件中的每個測試將重試兩次,並有 20 秒的超時時間。
test.describe.configure({ retries: 2, timeout: 20_000 });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {}); -
使用 testProject.snapshotPathTemplate 和 testConfig.snapshotPathTemplate 來配置控制由 expect(page).toHaveScreenshot() 和 expect(value).toMatchSnapshot() 生成的快照位置的模板。
playwright.config.tsimport { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
});
新的 API
瀏覽器版本
- Chromium 108.0.5359.29
- Mozilla Firefox 106.0
- WebKit 16.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 107
- Microsoft Edge 107
版本 1.27
定位器
使用這些新的 API,寫定位器是一種樂趣:
- page.getByText() 根據文本內容定位。
- page.getByRole() 根據 ARIA role、ARIA attributes 和 accessible name 定位。
- page.getByLabel() 根據關聯標籤的文本定位表單控制項。
- page.getByTestId() 根據
data-testid
屬性(其他屬性可配置)定位元素。 - page.getByPlaceholder() 根據佔位符定位輸入框。
- page.getByAltText() 根據文本替代內容(通常是圖像)定位元素。
- page.getByTitle() 根據標題定位元素。
await page.getByLabel('User Name').fill('John');
await page.getByLabel('Password').fill('secret-password');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Welcome, John!')).toBeVisible();
所有相同的方法也可在 Locator、FrameLocator 和 Frame 類別上使用。
其他亮點
-
workers
選項在playwright.config.ts
中現在接受百分比字串來使用部分可用的 CPU。你也可以在命令列中傳遞它:npx playwright test --workers=20%
-
html reporter 的新選項
host
和port
。import { defineConfig } from '@playwright/test';
export default defineConfig({
reporter: [['html', { host: 'localhost', port: '9223' }]],
}); -
新欄位
FullConfig.configFile
可供測試 reporter 使用,指定 config 檔案的路徑(如果有的話)。 -
如 v1.25 中所宣布,Ubuntu 18 將於 2022 年 12 月起不再支援。除此之外,從下一個 Playwright 版本開始,Ubuntu 18 上將不再有 WebKit 更新。
行為變更
-
expect(locator).toHaveAttribute() with an empty value does not match missing attribute anymore. 例如, 當
button
沒有disabled
屬性時,以下程式碼片段將會成功。await expect(page.getByRole('button')).toHaveAttribute('disabled', '');
-
命令列選項
--grep
和--grep-invert
先前錯誤地忽略了在配置中指定的grep
和grepInvert
選項。現在它們會一起應用。
瀏覽器版本
- Chromium 107.0.5304.18
- Mozilla Firefox 105.0.1
- WebKit 16.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 106
- Microsoft Edge 106
版本 1.26
斷言
- 新選項
enabled
用於 expect(locator).toBeEnabled。 - expect(locator).toHaveText 現在可以穿透開放的 shadow roots。
- 新選項
editable
用於 expect(locator).toBeEditable。 - 新選項
visible
用於 expect(locator).toBeVisible。
其他亮點
- 新選項
maxRedirects
用於 apiRequestContext.get() 和其他函式以限制重定向次數。 - 新的命令列標誌
--pass-with-no-tests
允許在未找到檔案時測試套件通過。 - 新的命令列標誌
--ignore-snapshots
用於跳過快照期望,例如expect(value).toMatchSnapshot()
和expect(page).toHaveScreenshot()
。
行為變更
一堆 Playwright API 已經支援 waitUntil: 'domcontentloaded'
選項。例如:
await page.goto('https://playwright.dev', {
waitUntil: 'domcontentloaded',
});
在 1.26 之前,這會等待所有 iframes 觸發 DOMContentLoaded
事件。
為了符合網頁規範,'domcontentloaded'
值僅等待目標框架觸發 'DOMContentLoaded'
事件。使用 waitUntil: 'load'
來等待所有的 iframes。
瀏覽器版本
- Chromium 106.0.5249.30
- Mozilla Firefox 104.0
- WebKit 16.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 105
- Microsoft Edge 105
版本 1.25
VSCode Extension
- 觀看你的測試即時執行 & 保持開發工具開啟。
- 選擇選擇器。
- 從當前頁面狀態記錄新測試。
測試執行器
-
test.step() 現在返回 step 函式的值:
test('should work', async ({ page }) => {
const pageTitle = await test.step('get title', async () => {
await page.goto('https://playwright.dev');
return await page.title();
});
console.log(pageTitle);
}); -
新的
'interrupted'
測試狀態。 -
通過 CLI 旗標啟用追蹤:
npx playwright test --trace=on
。
公告
- 🎁 我們現在提供 Ubuntu 22.04 Jammy Jellyfish docker 映像檔:
mcr.microsoft.com/playwright:v1.34.0-jammy
。 - 🪦 這是最後一個支援 macOS 10.15 的版本(從 1.21 起已被棄用)。
- 🪦 這是最後一個支援 Node.js 12 的版本,我們建議升級到 Node.js LTS(16)。
- ⚠️ Ubuntu 18 現在已被棄用,並將於 2022 年 12 月起不再支援。
瀏覽器版本
- Chromium 105.0.5195.19
- Mozilla Firefox 103.0
- WebKit 16.0
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 104
- Microsoft Edge 104
版本 1.24
🌍 在 playwright.config.ts
中的多個 Web 伺服器
啟動多個網頁伺服器、資料庫或其他程序,方法是傳遞一組配置:
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: [
{
command: 'npm run start',
url: 'http://127.0.0.1:3000',
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
{
command: 'npm run backend',
url: 'http://127.0.0.1:3333',
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
}
],
use: {
baseURL: 'http://localhost:3000/',
},
});
🐂 Debian 11 Bullseye 支援
Playwright 現在支援 Debian 11 Bullseye 在 x86_64 上的 Chromium、Firefox 和 WebKit。如果您遇到任何問題,請告訴我們!
Linux 支援看起來像這樣:
| | Ubuntu 20.04 | Ubuntu 22.04 | Debian 11 | :--- | :---: | :---: | :---: | :---: | | Chromium | ✅ | ✅ | ✅ | | WebKit | ✅ | ✅ | ✅ | | Firefox | ✅ | ✅ | ✅ |
🕵️ 匿名描述
現在可以呼叫 test.describe() 來建立沒有標題的套件。這對於使用 test.use() 為一組測試提供共同選項很有用。
test.describe(() => {
test.use({ colorScheme: 'dark' });
test('one', async ({ page }) => {
// ...
});
test('two', async ({ page }) => {
// ...
});
});
🧩 元件測試更新
Playwright 1.24 Component Tests 引入了 beforeMount
和 afterMount
hooks。使用這些來設定你的應用程式進行測試。
例如,這可以用來設定 App 路由在 Vue.js 中:
import { test } from '@playwright/experimental-ct-vue';
import { Component } from './mycomponent';
test('should work', async ({ mount }) => {
const component = await mount(Component, {
hooksConfig: {
/* anything to configure your app */
}
});
});
import { router } from '../router';
import { beforeMount } from '@playwright/experimental-ct-vue/hooks';
beforeMount(async ({ app, hooksConfig }) => {
app.use(router);
});
在 Next.js 中類似的配置如下所示:
import { test } from '@playwright/experimental-ct-react';
import { Component } from './mycomponent';
test('should work', async ({ mount }) => {
const component = await mount(<Component></Component>, {
// Pass mock value from test into `beforeMount`.
hooksConfig: {
router: {
query: { page: 1, per_page: 10 },
asPath: '/posts'
}
}
});
});
import router from 'next/router';
import { beforeMount } from '@playwright/experimental-ct-react/hooks';
beforeMount(async ({ hooksConfig }) => {
// Before mount, redefine useRouter to return mock value from test.
router.useRouter = () => hooksConfig.router;
});
版本 1.23
網路重播
現在你可以將網路流量記錄到 HAR 檔案中,並在你的測試中重新使用這些流量。
記錄網路到 HAR 檔案:
npx playwright open --save-har=github.har.zip https://github.com/microsoft
或者,您可以以程式方式記錄 HAR:
const context = await browser.newContext({
recordHar: { path: 'github.har.zip' }
});
// ... do stuff ...
await context.close();
使用新方法 page.routeFromHAR() 或 browserContext.routeFromHAR() 從 HAR 檔案提供匹配的回應:
await context.routeFromHAR('github.har.zip');
在我們的文件中閱讀更多內容。
進階路由
你現在可以使用 route.fallback() 來延遲路由到其他處理程序。
考慮以下範例:
// Remove a header from all requests.
test.beforeEach(async ({ page }) => {
await page.route('**/*', async route => {
const headers = await route.request().allHeaders();
delete headers['if-none-match'];
await route.fallback({ headers });
});
});
test('should work', async ({ page }) => {
await page.route('**/*', async route => {
if (route.request().resourceType() === 'image')
await route.abort();
else
await route.fallback();
});
});
注意,新方法 page.routeFromHAR() 和 browserContext.routeFromHAR() 也參與路由並且可以被延遲。
Web-First Assertions Update
- 新方法 expect(locator).toHaveValues() 可斷言
<select multiple>
元素的所有選定值。 - 方法 expect(locator).toContainText() 和 expect(locator).toHaveText() 現在接受
ignoreCase
選項。
元件測試更新
- 支援 Vue2,透過
@playwright/experimental-ct-vue2
套件。 - 支援 create-react-app 中
.js
檔案的元件測試。
了解更多關於使用 Playwright 進行元件測試。
雜項
-
如果有服務工作者阻礙了你的操作,你現在可以使用新的上下文選項
serviceWorkers
輕鬆停用它:playwright.config.tsexport default {
use: {
serviceWorkers: 'block',
}
}; -
使用
.zip
路徑作為recordHar
上下文選項會自動壓縮生成的 HAR:const context = await browser.newContext({
recordHar: {
path: 'github.har.zip',
}
}); -
如果你打算手動編輯 HAR,考慮使用
"minimal"
HAR 錄製模式,該模式僅記錄重播所需的必要資訊:const context = await browser.newContext({
recordHar: {
path: 'github.har',
mode: 'minimal',
}
}); -
Playwright 現在可以在 Ubuntu 22 amd64 和 Ubuntu 22 arm64 上執行。我們還發佈了新的 docker 映像
mcr.microsoft.com/playwright:v1.34.0-jammy
。
⚠️ 重大變更 ⚠️
WebServer 現在被認為是“準備就緒”,如果對指定 url 的請求具有以下任何 HTTP 狀態碼:
200-299
300-399
(new)400
,401
,402
,403
(new)
版本 1.22
重點
-
元件測試(預覽)
Playwright Test 現在可以測試你的 React、Vue.js 或 Svelte 元件。你可以在真實瀏覽器中執行元件時,使用 Playwright Test 的所有功能(例如平行化、模擬和除錯)。
這是一個典型的元件測試範例:
App.spec.tsximport { test, expect } from '@playwright/experimental-ct-react';
import App from './App';
// 讓我們在深色模式下測試元件!
test.use({ colorScheme: 'dark' });
test('should render', async ({ mount }) => {
const component = await mount(<App></App>);
// 與任何 Playwright 測試一樣,斷言定位器文本。
await expect(component).toContainText('React');
// 或者截圖 🚀
await expect(component).toHaveScreenshot();
// 或使用任何 Playwright 方法
await component.click();
});閱讀更多在我們的文件。
-
角色選擇器允許通過其 ARIA role、ARIA attributes 和 accessible name 選擇元素。
// 點擊一個可訪問名稱為 "log in" 的按鈕
await page.locator('role=button[name="log in"]').click();閱讀更多在我們的文件。
-
新的 locator.filter() API 用於篩選現有定位器
const buttons = page.locator('role=button');
// ...
const submitButton = buttons.filter({ hasText: 'Submit' });
await submitButton.click(); -
新的 web-first 斷言 expect(page).toHaveScreenshot() 和 expect(locator).toHaveScreenshot() 等待截圖穩定並增強測試可靠性。
新的斷言具有截圖特定的預設值,例如:
- 停用動畫
- 使用 CSS 縮放選項
await page.goto('https://playwright.dev');
await expect(page).toHaveScreenshot();新的 expect(page).toHaveScreenshot() 將截圖保存到與 expect(value).toMatchSnapshot() 相同的位置。
版本 1.21
重點
-
新的角色選擇器允許通過其 ARIA role、ARIA attributes 和 accessible name 選擇元素。
// 點擊一個可訪問名稱為 "log in" 的按鈕
await page.locator('role=button[name="log in"]').click();閱讀更多在 我們的文件。
-
page.screenshot() 中的新
scale
選項,用於較小尺寸的截圖。 -
page.screenshot() 中的新
caret
選項,用於控制文本插入符號。預設為"hide"
。 -
新方法
expect.poll
用於等待任意條件:// 輪詢該方法直到返回預期結果。
await expect.poll(async () => {
const response = await page.request.get('https://api.example.com');
return response.status();
}).toBe(200);expect.poll
支持大多數同步匹配器,如.toBe()
、.toContain()
等。閱讀更多在 我們的文件。
行為變更
- 執行 TypeScript 測試時,ESM 支援現在預設啟用。不再需要
PLAYWRIGHT_EXPERIMENTAL_TS_ESM
環境變數。 mcr.microsoft.com/playwright
docker 映像不再包含 Python。請使用mcr.microsoft.com/playwright/python
作為預先安裝 Python 的 Playwright-ready docker 映像。- Playwright 現在支援通過 locator.setInputFiles API 上傳大文件(數百 MB)。
瀏覽器版本
- Chromium 101.0.4951.26
- Mozilla Firefox 98.0.2
- WebKit 15.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 100
- Microsoft Edge 100
版本 1.20
重點
-
新選項用於方法 page.screenshot(), locator.screenshot() 和 elementHandle.screenshot():
- 選項
animations: "disabled"
將所有 CSS 動畫和過渡倒帶到一致的狀態 - 選項
mask: Locator[]
掩蓋給定的元素,用粉紅色#FF00FF
方框覆蓋它們。
- 選項
-
expect().toMatchSnapshot()
現在支持匿名快照:當快照名稱缺失時,Playwright Test 將自動生成一個:expect('Web is Awesome <3').toMatchSnapshot();
-
新的
maxDiffPixels
和maxDiffPixelRatio
選項用於使用expect().toMatchSnapshot()
進行細粒度的截圖比較:expect(await page.screenshot()).toMatchSnapshot({
maxDiffPixels: 27, // 允許不超過 27 個不同的像素。
});最方便的是在 testConfig.expect 中一次性指定
maxDiffPixels
或maxDiffPixelRatio
。 -
Playwright Test 現在添加了 testConfig.fullyParallel 模式。預設情況下,Playwright Test 在文件之間並行。在完全並行模式下,單個文件內的測試也會並行執行。您還可以使用
--fully-parallel
命令行標誌。playwright.config.tsexport default {
fullyParallel: true,
}; -
testProject.grep 和 testProject.grepInvert 現在可以按項目配置。例如,您現在可以使用
grep
配置煙霧測試項目:playwright.config.tsexport default {
projects: [
{
name: 'smoke tests',
grep: /@smoke/,
},
],
}; -
Trace Viewer 現在顯示 API 測試請求。
-
locator.highlight() 視覺上顯示元素以便於偵錯。
公告
- 我們現在提供一個指定的 Python docker 映像
mcr.microsoft.com/playwright/python
。如果你使用 Python,請切換到它。這是最後一個包含 Python 在我們的 javascriptmcr.microsoft.com/playwright
docker 映像中的版本。 - v1.20 是最後一個為 macOS 10.15 Catalina 接收 WebKit 更新的版本。請更新 macOS 以繼續使用最新和最好的 WebKit!
瀏覽器版本
- Chromium 101.0.4921.0
- Mozilla Firefox 97.0.1
- WebKit 15.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 99
- Microsoft Edge 99
版本 1.19
Playwright Test Update
-
Playwright Test v1.19 現在支援軟性斷言。失敗的軟性斷言
不會終止測試執行,但會標記測試為失敗。
// 進行一些檢查,即使失敗也不會停止測試...
await expect.soft(page.locator('#status')).toHaveText('Success');
await expect.soft(page.locator('#eta')).toHaveText('1 day');
// ... 並繼續測試以檢查更多內容。
await page.locator('#next-page').click();
await expect.soft(page.locator('#title')).toHaveText('Make another order');閱讀更多 我們的文件。
-
現在您可以將自訂的期望訊息作為第二個參數傳遞給
expect
和expect.soft
函式,例如:await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
錯誤訊息會如下所示:
Error: should be logged in
Call log:
- expect.toBeVisible with timeout 5000ms
- waiting for "getByText('Name')"
2 |
3 | test('example test', async({ page }) => {
> 4 | await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
| ^
5 | });
6 |閱讀更多 我們的文件。
-
預設情況下,單個文件中的測試會按順序執行。如果您在單個文件中有許多獨立的測試,現在可以使用 test.describe.configure() 並行執行它們。
其他更新
-
定位器現在支援
has
選項,以確保其內包含另一個定位器:await page.locator('article', {
has: page.locator('.highlight'),
}).click();閱讀更多在 locator documentation。
-
page.screenshot() 和 locator.screenshot() 現在自動隱藏閃爍的插入點
-
Playwright Codegen 現在產生定位器和框架定位器
-
新選項
url
在 testConfig.webServer 中,以確保您的網頁伺服器在測試執行前已準備就緒 -
新的 testInfo.errors 和 testResult.errors 包含所有失敗的斷言和軟斷言。
可能在 Playwright Test 全域設定中造成重大變更
這個變更不太可能影響你,如果你的測試繼續像以前一樣執行,則不需要採取任何行動。
我們注意到,在少數情況下,要執行的測試集是通過環境變數在全域設定中配置的。我們還注意到一些應用程式在全域拆解中後處理報告器的輸出。如果你正在做其中之一,了解更多。
瀏覽器版本
- Chromium 100.0.4863.0
- Mozilla Firefox 96.0.1
- WebKit 15.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 98
- Microsoft Edge 98
版本 1.18
定位器改進
-
每個 locator 現在可以選擇性地按其包含的文字進行過濾:
await page.locator('li', { hasText: 'my item' }).locator('button').click();
閱讀更多在 locator documentation。
測試 API 改進
改進的 TypeScript 支援
- Playwright Test 現在尊重
tsconfig.json
的baseUrl
和paths
,所以你可以使用別名 - 有一個新的環境變數
PW_EXPERIMENTAL_TS_ESM
,允許在你的 TS 程式碼中匯入 ESM 模組,無需編譯步驟。匯入 esm 模組時不要忘記.js
後綴。按如下方式執行你的測試:
npm i --save-dev @playwright/test@1.18.0-rc1
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test
建立 Playwright
npm init Playwright
命令現在已經普遍可供您使用:
# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project
這將建立一個 Playwright 測試配置文件,可選擇性地添加範例、GitHub Action 工作流程和第一個測試 example.spec.ts
。
新的 API 和變更
- 新的
testCase.repeatEachIndex
API acceptDownloads
選項現在預設為true
重大變更: 自訂配置選項
自訂配置選項是一種方便的方法,可以用不同的值來參數化專案。了解更多在此指南。
以前,任何透過 test.extend() 引入的裝置都可以在 testProject.use 配置部分中被覆蓋。例如,
// WRONG: THIS SNIPPET DOES NOT WORK SINCE v1.18.
// fixtures.js
const test = base.extend({
myParameter: 'default',
});
// playwright.config.js
module.exports = {
use: {
myParameter: 'value',
},
};
正確的方式是在配置文件中使固定裝置參數化,是在定義固定裝置時指定 option: true
。例如,
// CORRECT: THIS SNIPPET WORKS SINCE v1.18.
// fixtures.js
const test = base.extend({
// Fixtures marked as "option: true" will get a value specified in the config,
// or fallback to the default value.
myParameter: ['default', { option: true }],
});
// playwright.config.js
module.exports = {
use: {
myParameter: 'value',
},
};
瀏覽器版本
- Chromium 99.0.4812.0
- Mozilla Firefox 95.0
- WebKit 15.4
此版本也針對以下穩定頻道進行了測試:
- Google Chrome 97
- Microsoft Edge 97
版本 1.17
Frame 定位器
Playwright 1.17 準備推出 frame locators - 一個頁面上 iframe 的定位器。Frame locators 捕捉足以獲取 iframe
的邏輯,然後在該 iframe 中定位元素。Frame locators 預設是嚴格的,會等待 iframe
出現,並且可以用於 Web-First 斷言。
框架定位器可以使用 page.frameLocator() 或 locator.frameLocator() 方法來建立。
const locator = page.frameLocator('#my-iframe').locator('text=Submit');
await locator.click();
更多資訊請參見 我們的文件。
Trace Viewer 更新
Playwright Trace Viewer 現在可在線使用,網址為 https://trace.playwright.dev!只需拖放你的 trace.zip
文件即可檢查其內容。
注意: 追蹤檔案不會上傳到任何地方; trace.playwright.dev 是一個 progressive web application,在本地處理追蹤。
- Playwright Test 追蹤現在預設包含來源(這些可以用追蹤選項關閉)
- 追蹤檢視器現在顯示測試名稱
- 新的追蹤 Metadata 頁籤包含瀏覽器詳細資訊
- 快照現在有 URL 欄
HTML Report Update
- HTML 報告現在支援動態篩選
- 報告現在是一個單一靜態 HTML 檔案,可以通過電子郵件發送或作為 slack 附件。
Ubuntu ARM64 支援 + 更多
-
Playwright 現在支援 Ubuntu 20.04 ARM64。你現在可以在 Apple M1 和 Raspberry Pi 上的 Docker 中執行 Playwright 測試。
-
你現在可以使用 Playwright 在 Linux 上安裝穩定版本的 Edge:
npx playwright install msedge
新的 API
- Tracing 現在支援
'title'
選項 - Page 導航支援新的
'commit'
等待選項 - HTML reporter 獲得了新的設定選項
testConfig.snapshotDir
選項testInfo.parallelIndex
testInfo.titlePath
testOptions.trace
有新的選項expect.toMatchSnapshot
支援子目錄reporter.printsToStdio()
版本 1.16
🎭 Playwright 測試
API 測試
Playwright 1.16 準備推出新的 API Testing,讓你可以直接從 Node.js 發送請求到伺服器!現在你可以:
- 測試你的伺服器 API
- 在測試中訪問 web 應用程式之前準備伺服器端狀態
- 在瀏覽器中執行一些操作後驗證伺服器端後置條件
要代表 Playwright 的 Page 發出請求,使用 new page.request API:
import { test, expect } from '@playwright/test';
test('context fetch', async ({ page }) => {
// Do a GET request on behalf of page
const response = await page.request.get('http://example.com/foo.json');
// ...
});
要從 node.js 對 API 端點進行獨立請求,請使用 新的request
fixture:
import { test, expect } from '@playwright/test';
test('context fetch', async ({ request }) => {
// Do a GET request on behalf of page
const response = await request.get('http://example.com/foo.json');
// ...
});
在我們的 API 測試指南 中了解更多資訊。
回應攔截
現在可以通過將 API 測試 與 請求攔截 結合來進行回應攔截。
例如,我們可以模糊頁面上的所有圖像:
import { test, expect } from '@playwright/test';
import jimp from 'jimp'; // image processing library
test('response interception', async ({ page }) => {
await page.route('**/*.jpeg', async route => {
const response = await page._request.fetch(route.request());
const image = await jimp.read(await response.body());
await image.blur(5);
await route.fulfill({
response,
body: await image.getBufferAsync('image/jpeg'),
});
});
const response = await page.goto('https://playwright.dev');
expect(response.status()).toBe(200);
});
閱讀更多關於回應攔截。
新的 HTML 報告器
試試新的 HTML reporter,可以使用 --reporter=html
或在 playwright.config.ts
檔案中加入 reporter
項目:
$ npx playwright test --reporter=html
The HTML reporter 擁有所有關於測試及其失敗的資訊,包括顯示追蹤和圖像工件。
閱讀更多關於我們的報告器。
🎭 Playwright 函式庫
locator.waitFor
等待定位器解析為具有給定狀態的單個元素。預設為 state: 'visible'
。
在處理清單時特別方便:
import { test, expect } from '@playwright/test';
test('context fetch', async ({ page }) => {
const completeness = page.locator('text=Success');
await completeness.waitFor();
expect(await page.screenshot()).toMatchSnapshot('screen.png');
});
閱讀更多關於 locator.waitFor()。
Docker support for Arm64
Playwright Docker image 現在已經為 Arm64 發佈,因此可以在 Apple Silicon 上使用。
了解更多關於 Docker integration 的資訊。
🎭 Playwright Trace Viewer
- 在 trace viewer 中的 web-first 斷言
- 使用
npx playwright show-trace
執行 trace viewer,並將 trace 檔案拖放到 trace viewer PWA - API 測試已整合到 trace viewer
- 更好的動作目標視覺歸因
閱讀更多關於 Trace Viewer 的資訊。
瀏覽器版本
- Chromium 97.0.4666.0
- Mozilla Firefox 93.0
- WebKit 15.4
此版本的 Playwright 也針對以下穩定頻道進行了測試:
- Google Chrome 94
- Microsoft Edge 94
版本 1.15
🎭 Playwright 函式庫
🖱️ 滑鼠滾輪
使用 mouse.wheel() 現在可以垂直或水平滾動。
📜 新的 Headers API
先前無法獲取回應的多個標頭值。現在這是可能的,並且提供了額外的輔助函式:
- request.allHeaders()
- request.headersArray()
- request.headerValue()
- response.allHeaders()
- response.headersArray()
- response.headerValue()
- response.headerValues()
🌈 強制色彩模擬
現在可以通過在 browser.newContext() 中傳遞 forced-colors
CSS 媒體特性或呼叫 page.emulateMedia() 來模擬它。
新的 API
- page.route() 接受新的
times
選項來指定此路由應匹配的次數。 - page.setChecked() 和 locator.setChecked() 被引入來設置複選框的選中狀態。
- request.sizes() 返回給定 http 請求的資源大小資訊。
- tracing.startChunk() - 開始一個新的追蹤塊。
- tracing.stopChunk() - 停止一個新的追蹤塊。
🎭 Playwright 測試
🤝 test.parallel()
在相同檔案中平行執行測試
test.describe.parallel('group', () => {
test('runs in parallel 1', async ({ page }) => {
});
test('runs in parallel 2', async ({ page }) => {
});
});
根據預設,單個文件中的測試會按順序執行。如果你在一個文件中有許多獨立的測試,你現在可以使用 test.describe.parallel(title, callback) 平行執行它們。
🛠 添加 --debug
CLI 旗標
使用 npx playwright test --debug
將啟用 Playwright Inspector 以便您偵錯測試。
瀏覽器版本
- Chromium 96.0.4641.0
- Mozilla Firefox 92.0
- WebKit 15.0
版本 1.14
🎭 Playwright 函式庫
⚡️ 新的 "strict" 模式
選擇器模糊性是自動化測試中的常見問題。"strict" 模式確保您的選擇器指向單一元素,否則會拋出錯誤。
將 strict: true
傳入你的動作呼叫中以選擇加入。
// This will throw if you have more than one button!
await page.click('button', { strict: true });
📍 新的 定位器 API
Locator 代表頁面上元素的視圖。它捕捉了足夠的邏輯,以便在任何給定時刻檢索元素。
兩者之間的區別在於 Locator 和 ElementHandle 是後者指向特定的元素,而 Locator 捕捉如何檢索該元素的邏輯。
另外,定位器預設是**「嚴格」的**!
const locator = page.locator('button');
await locator.click();
了解更多資訊請參閱文件。
🧩 實驗性 React 和 Vue 選擇器引擎
React 和 Vue 選擇器允許通過其元件名稱和/或屬性值選擇元素。語法與屬性選擇器非常相似,並支持所有屬性選擇器運算符。
await page.locator('_react=SubmitButton[enabled=true]').click();
await page.locator('_vue=submit-button[enabled=true]').click();
了解更多在 react selectors 文件 和 vue selectors 文件。
✨ 新的 nth
和 visible
選擇器引擎
// select the first button among all buttons
await button.click('button >> nth=0');
// or if you are using locators, you can use first(), nth() and last()
await page.locator('button').first().click();
// click a visible button
await button.click('button >> visible=true');
🎭 Playwright 測試
✅ Web-First Assertions
expect
現在支援許多新的網頁優先斷言。
考慮以下範例:
await expect(page.locator('.status')).toHaveText('Submitted');
Playwright Test 將會重新測試具有選擇器 .status
的節點,直到獲取的節點具有 "Submitted"
文本。它將會重新獲取節點並反覆檢查,直到滿足條件或達到超時。你可以傳遞這個超時時間,或者在測試配置中通過 testProject.expect
值進行配置。
預設情況下,斷言的超時時間未設置,因此它將永遠等待,直到整個測試超時。
所有新斷言的列表:
expect(locator).toBeChecked()
expect(locator).toBeDisabled()
expect(locator).toBeEditable()
expect(locator).toBeEmpty()
expect(locator).toBeEnabled()
expect(locator).toBeFocused()
expect(locator).toBeHidden()
expect(locator).toBeVisible()
expect(locator).toContainText(text, options?)
expect(locator).toHaveAttribute(name, value)
expect(locator).toHaveClass(expected)
expect(locator).toHaveCount(count)
expect(locator).toHaveCSS(name, value)
expect(locator).toHaveId(id)
expect(locator).toHaveJSProperty(name, value)
expect(locator).toHaveText(expected, options)
expect(page).toHaveTitle(title)
expect(page).toHaveURL(url)
expect(locator).toHaveValue(value)
⛓ 序列模式與 describe.serial
宣告一組應該始終序列執行的測試。如果其中一個測試失敗,所有後續測試都會被跳過。組中的所有測試會一起重新嘗試。
test.describe.serial('group', () => {
test('runs first', async ({ page }) => { /* ... */ });
test('runs second', async ({ page }) => { /* ... */ });
});
了解更多資訊,請參閱 文件。
🐾 Steps API with test.step
將長測試拆分為多個步驟,使用 test.step()
API:
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await test.step('Log in', async () => {
// ...
});
await test.step('news feed', async () => {
// ...
});
});
步驟資訊在報告器 API 中公開。
🌎 執行測試前啟動 web server
要在測試期間啟動伺服器,請在設定檔中使用webServer
選項。伺服器將等待給定的 url 可用後再執行測試,並且在建立上下文時,該 url 將作為baseURL
傳遞給 Playwright。
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: {
command: 'npm run start', // command to launch
url: 'http://127.0.0.1:3000', // url to await for
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
});
瞭解更多在文件。
瀏覽器版本
- Chromium 94.0.4595.0
- Mozilla Firefox 91.0
- WebKit 15.0
版本 1.13
Playwright 測試
- ⚡️ 準備推出 Reporter API,已經用於建立 Allure Playwright reporter。
- ⛺️ 新的
baseURL
fixture 來支援測試中的相對路徑。
Playwright
- 🖖 程式化拖放支援 通過 page.dragAndDrop() API。
- 🔎 增強的 HAR 包含請求和回應的 body 大小。通過 browser.newContext() 中的
recordHar
選項使用。
工具
- Playwright Trace Viewer 現在顯示參數、返回值和
console.log()
呼叫。 - Playwright Inspector 可以產生 Playwright Test 測試。
新的和全面修訂的指南
瀏覽器版本
- Chromium 93.0.4576.0
- Mozilla Firefox 90.0
- WebKit 14.2
新的 Playwright API
- 新的
baseURL
選項在 browser.newContext() 和 browser.newPage() - response.securityDetails() 和 response.serverAddr()
- page.dragAndDrop() 和 frame.dragAndDrop()
- download.cancel()
- page.inputValue(), frame.inputValue() 和 elementHandle.inputValue()
- 新的
force
選項在 page.fill(), frame.fill(), 和 elementHandle.fill() - 新的
force
選項在 page.selectOption(), frame.selectOption(), 和 elementHandle.selectOption()
版本 1.12
⚡️ 準備推出 Playwright Test
Playwright Test 是一個新的測試執行器,由 Playwright 團隊從頭開始構建,專門滿足端到端測試需求:
- 在所有瀏覽器中執行測試。
- 平行執行測試。
- 享受開箱即用的上下文隔離和合理的預設值。
- 在失敗時捕捉影片、截圖和其他檔案。
- 將你的 POMs 整合為可擴展的裝置。
安裝:
npm i -D @playwright/test
簡單測試 tests/foo.spec.ts
:
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://playwright.dev/');
const name = await page.innerText('.navbar__title');
expect(name).toBe('Playwright');
});
執行:
npx playwright test
👉 閱讀更多在 Playwright Test 文件。
🧟♂️ 準備推出 Playwright Trace Viewer
Playwright Trace Viewer 是一個新的 GUI 工具,幫助在程式碼執行後探索記錄的 Playwright Traces。Playwright Traces 讓你檢查:
- 每個 Playwright 操作前後的頁面 DOM
- 每個 Playwright 操作前後的頁面渲染
- 腳本執行期間的瀏覽器網路
追蹤是使用新的 browserContext.tracing API 記錄的:
const browser = await chromium.launch();
const context = await browser.newContext();
// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://playwright.dev');
// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });
稍後使用 Playwright CLI 檢查追蹤:
npx playwright show-trace trace.zip
這將開啟以下 GUI:
👉 閱讀更多在 trace viewer documentation。
瀏覽器版本
- Chromium 93.0.4530.0
- Mozilla Firefox 89.0
- WebKit 14.2
此版本的 Playwright 也針對以下穩定頻道進行了測試:
- Google Chrome 91
- Microsoft Edge 91
新的 API
reducedMotion
選項在 page.emulateMedia(), browserType.launchPersistentContext(), browser.newContext() 和 browser.newPage()- browserContext.on('request')
- browserContext.on('requestfailed')
- browserContext.on('requestfinished')
- browserContext.on('response')
tracesDir
選項在 browserType.launch() 和 browserType.launchPersistentContext()- 新的 browserContext.tracing API 命名空間
- 新的 download.page() 方法
版本 1.11
🎥 新 影片: Playwright: A New Test Automation Framework for the Modern Web (slides)
- 我們討論了 Playwright
- 展示了幕後的工程工作
- 進行了具有新功能的現場展示 ✨
- 特別感謝 applitools 主辦這個活動並邀請我們!
瀏覽器版本
- Chromium 92.0.4498.0
- Mozilla Firefox 89.0b6
- WebKit 14.2
新的 API
- 支援 非同步判斷 在 API 中的方法,如 page.waitForRequest() 和其他方法
- 新的 模擬裝置: Galaxy S8, Galaxy S9+, Galaxy Tab S4, Pixel 3, Pixel 4
- 新的方法:
- page.waitForURL() 等待 URL 導航
- video.delete() 和 video.saveAs() 管理螢幕錄影
- 新的選項:
- 在 browser.newContext() 方法中的
screen
選項來模擬window.screen
尺寸 - 在 page.check() 和 page.uncheck() 方法中的
position
選項 trial
選項在 page.check(), page.uncheck(), page.click(), page.dblclick(), page.hover() 和 page.tap() 中進行試運行操作
- 在 browser.newContext() 方法中的
版本 1.10
- Playwright for Java v1.10 現在已經穩定!
- 使用新頻道 API在Google Chrome和Microsoft Edge穩定頻道上執行 Playwright。
- 在 Mac 和 Windows 上,Chromium 截圖速度快。
捆綁的瀏覽器版本
- Chromium 90.0.4430.0
- Mozilla Firefox 87.0b10
- WebKit 14.2
此版本的 Playwright 也針對以下穩定頻道進行了測試:
- Google Chrome 89
- Microsoft Edge 89
新的 API
- browserType.launch() 現在接受新的 'channel' 選項。閱讀更多在我們的文件。
版本 1.9
- Playwright Inspector 是一個新的 GUI 工具來編寫和除錯你的測試。
- 逐行除錯你的 Playwright 腳本,具有播放、暫停和逐步執行功能。
- 透過錄製使用者操作來編寫新腳本。
- 透過懸停在元素上來產生元素選擇器。
- 設定
PWDEBUG=1
環境變數來啟動 Inspector
- 在有頭模式下使用 page.pause() 暫停腳本執行。暫停頁面會啟動 Playwright Inspector 進行除錯。
- CSS 選擇器的新 has-text 偽類。
:has-text("example")
匹配任何包含"example"
的元素,可能在子元素或後代元素內。查看更多範例。 - 頁面對話框在執行期間現在會自動關閉,除非配置了
dialog
事件的監聽器。了解更多資訊。 - Playwright for Python 現在穩定,具有慣用的蛇形命名法 API 和預建的 Docker 映像 來在 CI/CD 中執行測試。
瀏覽器版本
- Chromium 90.0.4421.0
- Mozilla Firefox 86.0b10
- WebKit 14.1
新的 API
版本 1.8
-
根據佈局選擇元素 使用
:left-of()
,:right-of()
,:above()
和:below()
。 -
Playwright 現在包括 命令列介面,前身為 playwright-cli。
npx playwright --help
-
page.selectOption() 現在會等待選項出現。
-
新的方法來斷言元素狀態 如 page.isEditable()。
新的 API
- elementHandle.isChecked()
- elementHandle.isDisabled()
- elementHandle.isEditable()
- elementHandle.isEnabled()
- elementHandle.isHidden()
- elementHandle.isVisible()
- page.isChecked()
- page.isDisabled()
- page.isEditable()
- page.isEnabled()
- page.isHidden()
- page.isVisible()
- New option 'editable' in elementHandle.waitForElementState()。
瀏覽器版本
- Chromium 90.0.4392.0
- Mozilla Firefox 85.0b5
- WebKit 14.1
版本 1.7
- 新 Java SDK: Playwright for Java 現在與 JavaScript、Python 和 .NET bindings 相當。
- 瀏覽器儲存 API: 新的便利 API 用於儲存和加載瀏覽器儲存狀態(cookies、本地儲存),以簡化具有身份驗證的自動化場景。
- 新 CSS 選擇器: 我們聽取了您對更靈活選擇器的反饋,並重新設計了選擇器的實現。Playwright 1.7 推出了新的 CSS 擴展,並且很快會有更多更新。
- 新網站: playwright.dev 的文件網站已更新,現在使用 Docusaurus 構建。
- 支持 Apple Silicon: 用於 WebKit 和 Chromium 的 Playwright 瀏覽器二進制文件現在已為 Apple Silicon 構建。
新的 API
- browserContext.storageState() 來獲取當前狀態以供後續重用。
storageState
選項在 browser.newContext() 和 browser.newPage() 中設定瀏覽器上下文狀態。
瀏覽器版本
- Chromium 89.0.4344.0
- Mozilla Firefox 84.0b9
- WebKit 14.1