【原】Playwright系列：第7章 Playwright跨浏览器与移动测试

开源优测 2023-04-27 发布于广东

展开全文

Playwright支持跨浏览器测试和移动端测试,可以实现对不同浏览器和移动设备的自动化测试。

跨浏览器测试原理

Playwright可以启动和控制Chromium(Chrome)、Firefox、WebKit(Safari)三个浏览器引擎。我们可以编写测试脚本,一次对三个浏览器进行测试,实现真正的跨浏览器测试。

跨浏览器测试的主要步骤如下:

1. 安装Playwright,它会自动下载Chromium、Firefox和WebKit的执行环境。

2. 在测试脚本中,使用playwright.chromium()、playwright.firefox()和playwright.webkit()获取对应浏览器类型。

3. 使用browserType.launch()启动不同的浏览器,获取Browser实例。

4. 使用Browser实例控制对应的浏览器,创建Page和ElementHandle等,实现测试逻辑。

5. 比较不同浏览器中的测试结果,确保在所有浏览器中运行正常。

6. 使用browser.close()关闭所有的浏览器。

7. (可选)生成跨浏览器测试报告,更直观地展现测试结果。

移动端测试原理

Playwright可以通过以下方式模拟移动端环境进行测试:

1. 使用device参数启动浏览器,指定移动设备条件,如viewport、userAgent等。

2. 使用browser.newContext()新建移动设备上下文,以更精细的方式配置移动端环境。

3. 安装Android/iOS环境,从而在真实设备上运行测试。Playwright可以通过USB连接真机,使用ADB/Xcode启动浏览器并控制。

4. 使用browser.newPage()在移动设备上下文或真机浏览器中创建页面,编写移动端的测试逻辑。

5. 检查移动端网页的UI、交互等是否符合预期。

6. (可选)生成移动端测试报告。

实际上,Playwright是首个同时支持跨浏览器测试、模拟移动测试和真机测试的浏览器自动化框架。这使得它具有广泛的测试场景覆盖能力。

Python示例 - 跨浏览器测试

from playwright.sync_api import sync_playwright
def run(playwright):    chromium = playwright.chromium    firefox = playwright.firefox    webkit = playwright.webkit        browser = chromium.launch()    page = browser.new_page()    page.goto("http:///")    chromium_user_agent = page.locator("text=User-Agent String:").text_content()        browser = firefox.launch()    page = browser.new_page()    page.goto("http:///")    firefox_user_agent = page.locator("text=User-Agent String:").text_content()        browser = webkit.launch()    page = browser.new_page()    page.goto("http:///")    webkit_user_agent = page.locator("text=User-Agent String:").text_content()        print(chromium_user_agent)    print(firefox_user_agent)    print(webkit_user_agent)        browser.close()    browser.close()    browser.close()
with sync_playwright() as playwright:    run(playwright)

这个测试脚本分别启动了Chromium、Firefox和WebKit,访问了同一个网址,并获取了不同浏览器的User-Agent字符串,从而实现了跨浏览器测试。

Node.js示例 - 移动端测试

const { webkit } = require('playwright');(async () => {    const browser = await webkit.launch({        headless: false,        slowMo: 50    });    // 创建移动设备上下文    const context = await browser.newContext({        viewport: { width: 360, height: 640, isMobile: true },        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1'    });    // 在移动设备上下文中创建页面    const page = await context.newPage();     await page.goto('http://m.');    // 等待元素并点击    await page.tap('text=Sign in');    // 输入文本    await page.fill('input[name="email"]', 'foo@bar.com');    await page.fill('input[name="password"]', '123456');    // 等待元素并点击    await page.tap('text=Sign in');    // 检查标题是否包含登录成功信息    expect(await page.title()).toContain('Home');    await browser.close();})();

这个测试脚本启动了WebKit浏览器,使用device参数和newContext()方法创建了移动设备上下文。在这个上下文中,测试脚本可以像真实移动设备一样操作页面,实现对m.移动网站的自动化测试。

Java示例 - 真机测试

import com.microsoft.playwright.*;
public class Example {    public static void main(String[] args) {        Playwright playwright = Playwright.create();        // 连接到真实Android设备        AndroidDevice android = playwright.android();        AndroidBrowserType chrome = android.chromium();        AndroidBrowser chromium = chrome.launch();        // 创建浏览器上下文        BrowserContext context = chromium.newBrowserContext(        viewportSize: new Size(411, 731),        deviceScaleFactor: 3.0,        isMobile: true);        // 在上下文中创建页面        Page page = context.newPage();          page.navigate("http://m.");        // ... 编写移动网站的测试脚本        chromium.close();        playwright.close();    }}