自動(dòng)化測試工具-Playwright（快速上手）

作者：Meng 2022-07-04 09:00:36

本篇將介紹另一款強(qiáng)大而易用的 UI 自動(dòng)化測試工具-Playwright。

1、前言

一提到 UI 自動(dòng)化測試工具，首要推薦的必屬是 Selenium，其優(yōu)勢在于跨平臺、跨語言、完全開源、對商業(yè)用戶也沒有任何限制、支持分布式、擁有成熟的社區(qū)與學(xué)習(xí)文檔等，目前已經(jīng)迭代更新到 4 版本。那么缺點(diǎn)也有，比如環(huán)境配置、加載效率低、運(yùn)行速度慢等。

除了 Selenium 就沒有別的工具推薦了嗎？當(dāng)然不是，還有很多優(yōu)秀的工具，比如 Cypress、Robot Framework 等。

本篇將介紹另一款強(qiáng)大而易用的 UI 自動(dòng)化測試工具-Playwright。

2、簡介

微軟開源自動(dòng)化測試工具 Playwright，支持主流瀏覽器，包括：Chrome、Firefox、Safari 等，同時(shí)支持以無頭模式、有頭模式運(yùn)行，并提供了同步、異步的 API，可以結(jié)合 Pytest 測試框架使用，并且支持瀏覽器端的自動(dòng)化腳本錄制等功能。

特點(diǎn)：

1、跨瀏覽器。Playwright 支持所有現(xiàn)代渲染引擎，包括Chromium、WebKit 和 Firefox。

2、跨平臺。在 Windows、Linux 和 macOS 上進(jìn)行本地或 CI、無頭或有頭測試。

3、跨語言。在 TypeScript、JavaScript、Python、.NET、Java 中使用Playwright API。

4、測試移動(dòng)網(wǎng)絡(luò)。適用于 Android 和 Mobile Safari 的 Google Chrome 原生移動(dòng)仿真。相同的渲染引擎適用于您的桌面和云端。

官網(wǎng)地址：

https://playwright.dev。

GitHub地址：

https://github.com/microsoft/playwright。

3、安裝

Playwright 支持跨語言，本篇將以 Python 進(jìn)行講解。

首先要安裝 Python（有 Python 環(huán)境）。

之后打開命令行，輸入安裝命令即可。

pip install --upgrade pip
pip install playwright
playwright install

4、交互模式

Playwright 支持交互模式，即運(yùn)行單行代碼或者代碼塊，能立即給出運(yùn)行結(jié)果。

由于 Playwright 支持同步和異步的 API，那么應(yīng)先了解一下什么是同步和異步？

同步，可以理解為在執(zhí)行完一個(gè)函數(shù)或方法之后，一直等待系統(tǒng)返回值或消息，這時(shí)程序是出于阻塞的，只有接收到返回的值或消息后才往下執(zhí)行其他的命令。

異步，執(zhí)行完函數(shù)或方法后，不必阻塞性地等待返回值或消息，只需要向系統(tǒng)委托一個(gè)異步過程，那么當(dāng)系統(tǒng)接收到返回值或消息時(shí)，系統(tǒng)會自動(dòng)觸發(fā)委托的異步過程，從而完成一個(gè)完整的流程。

下面以操作打開瀏覽器，訪問百度首頁，關(guān)閉瀏覽器為例。

（1）同步命令

打開命令行，輸入 python。

進(jìn)入到 Python 交互模式中，輸入如下命令：

from playwright.sync_api import sync_playwright
playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://www.baidu.com/")
browser.close()
playwright.stop()

輸入訪問百度首頁命令，瀏覽器頁面會同時(shí)跳轉(zhuǎn)到百度首頁，同時(shí)命令行輸出響應(yīng)與請求的信息。

（2）異步命令

打開命令行，輸入 python -m asyncio。

進(jìn)入到 Python 交互模式中，輸入如下命令：

from playwright.async_api import async_playwright
playwright = await async_playwright().start()
browser = await playwright.chromium.launch(headless=False)
page = await browser.new_page()
await page.goto("https://www.baidu.com/")
await browser.close()
await playwright.stop()

輸入訪問百度首頁命令，瀏覽器頁面也會同時(shí)跳轉(zhuǎn)到百度首頁，命令行也會輸出響應(yīng)與請求的信息。

5、錄制模式

Playwright 帶有命令行工具（錄制功能），可用于記錄用戶交互并生成代碼（Java、Python等）。其實(shí)就是類似于 Selenium IDE。

（1）常規(guī)錄制

打開命令行，輸入：

playwright codegen baidu.com

自動(dòng)打開瀏覽器，并跳轉(zhuǎn)到百度首頁。

同時(shí)也彈出錄制窗口，可以看到是錄制中，腳本語言為 Python。

通過操作（點(diǎn)擊、輸入等）瀏覽器頁面，腳本也會自動(dòng)增加操作的步驟。

此外，錄制工具還可以獲取元素的定位。點(diǎn)擊停止錄制，之后再點(diǎn)擊 Explore 后，在頁面點(diǎn)擊想要定位的元素，即可獲取到該元素定位的值。

最后將錄制的腳本復(fù)制出來，可做適當(dāng)?shù)恼{(diào)整。

調(diào)整后的腳本代碼：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# 公眾號：AllTests軟件測試
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    # Open new page
    page = context.new_page()
    # Go to https://www.baidu.com/
    page.goto("https://www.baidu.com/")
    # Click input[name="wd"]
    page.locator("input[name=\"wd\"]").click()
    # Fill input[name="wd"]
    page.locator("input[name=\"wd\"]").fill("自動(dòng)化測試")
    # Click text=百度一下
    page.locator("text=百度一下").click()
    # ---------------------
    context.close()
    browser.close()
with sync_playwright() as playwright:
    run(playwright)

（2）模擬移動(dòng)設(shè)備錄制

open 可以模擬移動(dòng)設(shè)備和平板設(shè)備。

例如模擬 iPhone 13 訪問作者的 CSDN。

playwright open --device="iPhone 13" blog.csdn.net/wangmcn

如圖：模擬 iPhone 13 打開瀏覽器的效果。

6、編寫模式

使用 IDE（如 PyCharm、Visual Studio Code 等）進(jìn)行編寫代碼并運(yùn)行程序。

（1）啟動(dòng)瀏覽器（無頭模式）

Playwright 可以啟動(dòng)三種瀏覽器中的 chromium、firefox、webkit 任何一種。

示例操作如下，打開瀏覽器、跳轉(zhuǎn)百度、屏幕截圖、輸出頁面標(biāo)題、關(guān)閉瀏覽器。

腳本代碼：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# 公眾號：AllTests軟件測試
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://www.baidu.com/")
    page.screenshot(path="example.png")
    print(page.title())
    browser.close()

運(yùn)行結(jié)果：控制臺輸出頁面標(biāo)題。

（2）啟動(dòng)瀏覽器（有頭模式）

默認(rèn)情況下，Playwright 以無頭模式運(yùn)行瀏覽器。要查看瀏覽器 UI（有頭模式），請?jiān)趩?dòng)瀏覽器時(shí)傳遞 headless=False 標(biāo)志，還可以使用 slow_mo 來減慢執(zhí)行速度。

腳本代碼：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# 公眾號：AllTests軟件測試
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=50)
    page = browser.new_page()
    page.goto("https://www.baidu.com/")
    page.screenshot(path="example.png")
    print(page.title())
    browser.close()

（3）異步

Playwright 支持 API 的兩種變體：同步和異步。

支持異步，如果你的項(xiàng)目使用 asyncio，則應(yīng)該使用 async API。

腳本代碼：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# 公眾號：AllTests軟件測試
import asyncio
from playwright.async_api import async_playwright
async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://www.baidu.com/")
        print(await page.title())
        await browser.close()

asyncio.run(main())