Playwright可以在所有瀏覽器中實現快速、可靠和強大的自動化測試。
這是我介紹Playwright自動化測試工具的第三篇幅，爲什麼選擇Playwright？根據官方文檔介紹，這裏將介紹Playwright的特點，以便於幫助你快速的瞭解Playwright。
特點
- 支持所有瀏覽器
- 快速可靠的執行
- 強大的自動化功能
- 與你的工作流集成
注:
- 單講特點比較乾巴巴，所以，大部分特點我都配了例子。
- 官方文檔默認例子爲 JavaScript，這裏也使用JavaScript。JavaScript其他還挺簡單的。
- 評論區不用問Playwright的使用細節哈~！去官方文檔找答案。
支持所有瀏覽器
- 在Chromium, Firefox 和 WebKit上運行測試：Google Chrome和Microsoft Edge都是基於Chromium項目，Apple Safari基於WebKit，還有Mozilla 的Firefox。
const { chromium, webkit, firefox } = require('playwright');
(async () => {
const browser = await chromium.launch();
// const browser = await webkit.launch();
// const browser = await firefox.launch();
const page = await browser.newPage();
await page.goto('http://www.baidu.com/');
await page.screenshot({ path: `example.png` });
await browser.close();
})();
擴展：
WebKit是Apple開源的瀏覽器引擎，Apple Safari就是基於WebKit開發。Chromium是開源瀏覽器項目，早期使用的也是WebKit內核，後來在WebKit的基礎上fork了一個分支叫Blink，然後自己維護。
- 測試移動端：通過設置驅動模式可以模擬移動瀏覽器的效果。
const { webkit, devices } = require('playwright');
const iPhone11 = devices['iPhone 11 Pro'];
(async () => {
const browser = await webkit.launch();
const context = await browser.newContext({
...iPhone11,
locale: 'en-US',
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: ['geolocation']
});
const page = await context.newPage();
await page.goto('https://m.baidu.com');
await page.screenshot({ path: 'colosseum-iphone.png' });
await browser.close();
})();
- Headless 和 headful: Playwright支持所有平臺和瀏覽器上使用Headless模式和Headful模式。Headful非常適合調試。Headless運行更快，也可以更方便的在CI/雲平臺上運行。
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({headless: false});
// ...
})();
headless 默認開啓，設置爲false，即爲 headful模式，可以看到自動化的過程。
快速可靠的執行
- 自動等待: Playwright 可以自動等待元素，這將會提高自動化的穩定性，簡化測試的編寫。
- 瀏覽器上下文並行：對具有瀏覽器上下文的多個並行、隔離的執行環境，重用單個瀏覽器實例。
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({headless: false, slowMo: 50 });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('http://www.testpub.cn/login');
await page.fill("#inputUsername", 'admin');
await page.fill("#inputPassword", 'admin123456');
await page.click('"Sign in"');
await page.close();
const page2 = await context.newPage();
await page2.goto("http://www.testpub.cn/guest_manage/")
await browser.close();
})();
我來解釋一下，比如第一條用例執行了登錄，第二條用例直接通過上下文創建一個新的頁面去執行登錄之後的功能，即保證了用例的相對獨立性，又減少了用例的重複操作。
- 有彈性的選擇元素：Palywright可以依賴面向用戶的字符串，如文本內容和可訪問性標籤來選擇元素。這些字符串比與DOM結構緊密耦合的選擇器更有彈性。
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
例如上面的元素一看就不太好定位，用戶到的是一個按鈕，名字叫Sign in，那麼可以用這個定位方式。
await page.click('"Sign in"');
強大的自動化能力
- 支持多個域、頁面和表單： Palywright是一個 進程外（out-of-process） 自動化驅動程序，它不受頁內JavaScript執行範圍的限制，可以自動處理多個頁面的場景。
// Create two pages
const pageOne = await context.newPage();
const pageTwo = await context.newPage();
// Get pages of a brower context
const allPages = context.pages();
- 強大的網絡控制： Palywright引入上下文範圍的網絡攔截存根和模擬網絡請求。
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({headless: false, slowMo: 50 });
const context = await browser.newContext({ acceptDownloads: true });
const page = await context.newPage();
await page.goto('https://pypi.org/project/selenium/#files');
const [ download ] = await Promise.all([
page.waitForEvent('download'),
page.click('#files > table > tbody > tr:nth-child(2) > th > a')
]);
const path = await download.path();
console.log("path", path);
await browser.close();
})();
在 HTTP 認證，文件下載、網絡請求響應方面都有很強的控制能力。
- 覆蓋所有場景的功能：支持文件下載、上傳，進程外表單，輸入、點擊，甚至是手機上流行的暗黑模式。
// Create context with dark mode
const context = await browser.newContext({
colorScheme: 'dark' // or 'light'
});
與你的工作流程集成
- 一行命令安裝：運行
npm i playwright自動下載瀏覽器依賴，讓你的團隊快速上手。 - 支持TypeScript：Playwright 附帶內置的自動完成類型和其他收益。
- 調試工具：通過 VS Code 完成自動化的調試。
- 語言綁定：Playwright 支持多種編程語言，這個前面的文章有介紹。
- 在CI上部署測試：你要可以使用Docker鏡像，Playwright默認也是headless模式，你可以在任何環境上執行。