Playwright之---页面操作API

官网：Page | Playwright

以下是 Playwright 浏览器 API 页面操作的详细解读，涵盖了常用的操作，如导航、元素交互、截图、执行 JavaScript 等。

1. 页面创建与导航

a. 创建页面

页面（Page）是 Playwright 中表示一个浏览器标签页的对象。可以通过浏览器上下文（BrowserContext）来创建页面。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch(); // 启动浏览器实例
  const context = await browser.newContext(); // 创建浏览器上下文
  const page = await context.newPage(); // 创建新页面
})();

b. 页面导航

Playwright 提供了多种方法来进行页面导航，支持同步和异步操作。

• page.goto(url)：导航到指定的 URL
• page.reload()：重新加载页面
• page.reload({ waitUntil: 'networkidle' })：等待网络空闲时再重新加载页面

await page.goto('https://example.com'); // 导航到网页

2. 元素选择与交互

Playwright 提供了多种方法来选择页面上的元素并与之交互（点击、输入文本等）。

a. 元素选择

// 通过 alt 获取 
<img alt='Playwright logo'>
await page.getByAltText('Playwright logo').click();


// 允许通过关联或元素的文本aria-labelledby或者aria-label属性来定位输入元素。
<input aria-label="Username">

await page.getByLabel('Username').fill('john');


// 允许通过占位符文本定位输入元素。
<input type="email" placeholder="name@example.com" />
await page
    .getByPlaceholder('name@example.com')
    .fill('playwright@microsoft.com');


// 允许通过ARIA 角色、ARIA 属性和可访问名称来定位元素。
<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>

await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();

await page.getByRole('checkbox', { name: 'Subscribe' }).check();

await page.getByRole('button', { name: /submit/i }).click();

// 您可以通过文本子字符串、精确字符串或正则表达式来定位：
<div>Hello <span>
page.getByText('Hello', { exact: true });

// 允许通过元素的标题属性来定位元素。
<span title='Issues count'>25 issues</span>
await expect(page.getByTitle('Issues count')).toHaveText('25 issues');

3. 等待与等待条件

在进行页面操作时，等待某些条件的完成非常重要，Playwright 提供了多种等待机制。

a. 等待元素可见

• page.waitForSelector(selector)：等待选择器匹配的元素可见。

await page.waitForSelector('div#result', { state: 'visible' });

b. 等待特定条件

• page.waitForEvent(event)：等待特定的事件发生，如 load, domcontentloaded, networkidle 等。

await page.waitForEvent('load'); // 等待页面加载完成

c. 等待页面加载

• page.waitForLoadState(state)：等待页面达到特定加载状态。

await page.waitForLoadState('networkidle'); // 等待网络空闲