Playwright实战-page页面操作指南

简介：在web页面自动化测试中，无论是刷新页面、获取url这样的单页面操作，还是多个tab页面切换，处理弹出式对话框这样的多页面操作，Playwright都提供了简洁有力的实现方法。

单页面操作

前面 介绍过browser，context，page三者多关系，page代表了context浏览器上下文的一个single tab或popup window实例：

// 创建页面
const page = await context.newPage();

// 导航目标页面
await page.goto('http://example.com');
// 定位&输入
await page.locator('#search').fill('query');

// 定位&点击
await page.locator('#submit').click();
console.log(page.url());

在单个页面上，可以执行各种操作，包括导航、后退、前进、刷新页面以及获取当前URL等。

页面导航： page.goto()

await page.goto('https://example.com');

页面后退: page.goBack()

Usage：

await page.goBack();
await page.goBack(options);

Options：

• timeout：以毫秒计算。默认为0，即没有timeout

• waitUntil：可选参数，检查操作是否成功。可以在这个可选参数中使用枚举 —— LOAD、DOMCONTENTLOADED、NETWORKIDLE、COMMIT。默认情况下使用 LOAD 状态

页面前进: page.goForward()

用户和参数同page.goBack()

页面刷新: page.reload()

用户和参数同page.goBack()

获取当前页面URL：page.url()

const currentURL = await page.url();

 返回值string

暂停：page.pause()

const currentURL = await page.pause();

• 暂停脚本执行，等待用户输入，例如点击继续，或者脚本调用resume()方法

获取当前页面title：page.title()

const currentURL = await page.title();

• 返回值stirng

多页面操作

每个浏览器上下文可以承载多个页面（tab标签页）。

每个页面都表现得像是一个焦点、活动的页面。不需要将页面置于前台。上下文内的页面遵循上下文级别的仿真，比如视口大小、自定义网络路由或浏览器语言设置。

// 创建两个页面
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

// 获取浏览器上下文的页面
const allPages = context.pages();

处理新tab页

在浏览器上下文上的页面事件可用于获取在上下文中创建的新页面。这可以用来处理由 target="_blank" 链接打开的新页面。

// 在点击之前开始等待新页面。注意没有 await。
const pagePromise = context.waitForEvent('page');
await page.getByText('打开新标签页').click();
const newPage = await pagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());

如果触发新页面的操作是未知的，则可以使用以下模式。

// 获取上下文中的所有新页面（包括弹出窗口）
context.on('page', async page => {
  await page.waitForLoadState();
  console.log(await page.title());
});

处理对话框dialog

监听popup

如果页面打开了一个弹出窗口（例如，由 target="_blank" 链接打开的页面），您可以通过监听页面上的 popup 事件来获取对其的引用。

这个事件是作为 browserContext.on('page') 事件的补充，但只针对与此页面相关的弹出窗口发出。

// 在点击之前开始等待弹出窗口。注意没有 await。
const popupPromise = page.waitForEvent('popup');
await page.getByText('打开弹出窗口').click();
const popup = await popupPromise;
// 等待弹出窗口加载。
await popup.waitForLoadState();
console.log(await popup.title());

如果触发弹出窗口的操作是未知的，则可以使用以下模式。

// 当弹出窗口打开时获取所有弹出窗口
page.on('popup', async popup => {
  await popup.waitForLoadState();
  console.log(await popup.title());
});

page.addlocatorHandler()

有时候也可以采用page.addlocatorHandler()方法，示例子代码如下：

await page.addLocatorHandler(
    page.getByText('对话框确认'),
    async () => {
        await page.getByText('确认').click();
    }
);

结论

对于页面操作，Playwright提供了丰富的方法实现单页面、多页面、对话框等不同场景自动化操作方式，帮助实现自动化测试任务。掌握这些方法技巧可以有效提高自动化测试效率