Playwright系列：第13章 Playwright实用技巧

在 Playwright 测试中,我们经常会遇到一些实用场景,如等待页面加载、处理弹窗、上传下载文件等。本章我们将学习 Playwright 中的一些常用技巧,在测试脚本中运用这些技巧可以实现复杂的测试场景,也让测试脚本更加健壮。

页面等待方法在测试中,我们经常需要等待页面某些元素加载完成或某些条件满足后再进行下一步操作。

Playwright 提供了几种等待方法:

- page.waitForTimeout(timeout):静态等待,等待指定时长。

- page.waitForSelector(selector):等待元素选择器匹配某元素。

- page.waitForXPath(xpath):等待xpath表达式匹配某元素。

- page.waitForFunction(fn):等待自定义函数返回真值。

- element.waitForElementState(state):等待元素达到某状态,如visible、enabled等。

Python示例

# 等待10秒 page.waitForTimeout(10000)
# 等待#foo元素出现page.waitForSelector('#foo')
# 等待直到页面标题是'Playwright'page.waitForFunction('() => document.title === "Playwright"')
# 等待#submit按钮可点击submit_btn.waitForElementState('enabled') 

处理JavaScript弹窗

在测试过程中,页面可能会弹出alert、confirm或prompt等弹窗。我们需要处理这些弹窗,才能继续测试流程。

- page.evaluateHandle('alert("Hello world!")'):弹出alert弹窗
- page.acceptDialog():接受当前弹窗
- page.dismissDialog():关闭当前弹窗
- page.expectDialog():等待弹窗出现,返回弹窗消息示例:

// 弹出alert弹窗page.evaluateHandle("alert('This is alert!')");
// 等待alert弹窗,并接受page.expectDialog(dialog -> dialog.accept());
// 弹出confirm弹窗,并关闭page.evaluate("confirm('Are you sure?')");page.dismissDialog();
// 弹出prompt弹窗,输入值并接受  page.evaluate("prompt('What is your name?')");page.expectDialog(dialog -> dialog.accept("John"));

上传和下载文件

在测试场景中,我们可能需要上传文件进行测试,也可能需要验证文件下载功能。Playwright 提供了专门的 API 用于上传和下载文件。

- page.setFileInputFiles(selector, files):选择文件上传域,上传指定文件
- page.onDownload(downloadItem):添加下载事件监听器,可以获取下载文件信息

Python示例:

# 上传文件page.setFileInputFiles('input[type=file]', ['/tmp/test.png'])
# 下载文件后保存 page.onDownload(downloadItem)download_link.click()download_item.saveAs('/tmp/downloaded.png')

存储和读取 Cookie

在测试中,我们经常需要在不同 page 或浏览器上共享 Cookie,以实现登录后的跨页面测试等功能。

- context.cookies([url]):获取上下文的Cookie,可选传URL过滤
- context.setCookies(cookies):设置上下文的Cookie

 java示例:

// 获取当前页面的CookieMap<String, Object> cookies = page.context().cookies();
// 设置CookieMap<String, Object> cookie = new HashMap<>();cookie.put("name", "John");page.context().setCookies(cookie); 
// 在新页面读取Cookiepage2 = page.context().newPage();// page2 可以读取刚才设置的Cookie,实现跨页面登录测试 

移动设备视窗调整

在移动设备上测试时,我们可能需要调整设备视窗来适应不同设备或调试移动界面。Playwright 提供了 device.setViewportSize() 方法实现视窗调整。

Python示例:

# 将视窗调整为宽360,高640device.setViewportSize(width=360, height=640)# 将视窗调整为iPhone 6视窗device.setViewportSize(device.viewportSize['iPhone 6'])

Playwright断言库推荐

在测试中,我们需要使用断言来验证测试结果是否如预期。除了 Playwright 内置的少量断言外,我们可以使用第三方断言库获得更丰富的断言功能。

这里推荐两款支持 Playwright 的断言库:

- `expect-playwright`:Playwright 官方推荐的断言库,API 与 Jest expect 类似,提供丰富的 Playwright 相关断言。

- `chai`:功能强大的通用断言库,可以通过 `chai-playwright` 扩展包使用 Playwright 相关断expect-playwright言。

expect-playwright示例

await expect(page).toHaveTitle('Playwright');await expect(text).toBeVisible();  // 元素可见断言await expect(button).toBeDisabled(); // 元素不可点击断言

chai示例:

chai.use(chaiPlaywright(playwright));expect(page).to.have.title('Playwright'); expect(text).to.be.visible;expect(button).to.be.disabled;

总结

本章介绍的 Playwright 技巧涵盖了测试过程中常见的实用场景,包括等待处理、文件操作、Cookie 使用、视窗调整和断言等。

熟练掌握这些技巧可以让我们的测试脚本变得更加健壮和高效。除了本章提到的技巧外,Playwright 还有其他高级功能可供运用,可以参考官方文档进行探索。