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://');
// 等待元素并点击
await page.tap('text=Sign in');
// 输入文本
await page.fill('input[name="email"]', 'foo@');
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()方法创建了移动设备上下文。在这个上下文中,测试脚本可以像真实移动设备一样操作页面,实现对移动网站的自动化测试。
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://");
// ... 编写移动网站的测试脚本
chromium.close();
playwright.close();
}
}这个测试脚本连接到真实的Android设备,并在其中启动Chrome浏览器。通过在BrowserContext中配置移动设备参数,测试脚本可以实现对移动网站的真机测试。
总结
Playwright具备先进的跨浏览器测试和移动测试功能。理解Playwright的这两个测试能力及其实现原理,可以帮助我们编写出覆盖更广的测试脚本，三种语言的跨浏览器测试和移动测试示例也基本类似。
