Playwright之---控制浏览器API

LLLuckyGirl~

已于 2025-02-20 14:52:54 修改

阅读量1.2k

点赞数 18

文章标签：单元测试

于 2025-02-20 14:51:23 首次发布

本文链接：https://blog.csdn.net/weixin_47808575/article/details/145753576

版权

Playwright 提供了丰富的 API 来控制浏览器的行为，包括启动、关闭浏览器，创建和管理浏览器上下文、页面等。以下是关于 Playwright 浏览器控制 API 的详细解析：

1. 启动浏览器

Playwright 允许你启动多种浏览器类型，常见的有 chromium、firefox 和 webkit（Safari）。使用 browserType.launch() 启动浏览器。

可选参数：

headless: 如果为 true，浏览器会在无头模式下运行（不显示 UI），默认为 true。
args: 启动浏览器时的额外命令行参数。
devtools: 如果为 true，浏览器会打开开发者工具。

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

(async () => {
  // 启动 Chromium 浏览器
  const browser = await chromium.launch({ headless: false }); // headless: false 启动带 UI 的浏览器
  const page = await browser.newPage(); // 创建新页面
  await page.goto('https://example.com');
  await browser.close(); // 关闭浏览器
})();

2. 连接到已有的浏览器实例

使用 browserType.connect() 可以连接到一个已经在运行中的浏览器实例，通常用于远程控制。

此方法非常适用于已经启动并暴露了 WebSocket 地址的浏览器。

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

(async () => {
  const browser = await chromium.connect({ wsEndpoint: 'ws://localhost:9222/devtools/browser/<id>' });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
})();

3. 创建浏览器上下文（Context）

浏览器上下文是 Playwright 中的一个重要概念，它代表浏览器的一个独立环境，其中包含了浏览器的 cookies、存储、缓存等。你可以在一个浏览器实例中创建多个上下文。

常见用途：

多个账户登录：在同一个浏览器中创建多个上下文，可以实现不同账户同时登录的场景。
隔离数据：每个上下文都有独立的 cookies、localStorage、sessionStorage 等，可以模拟不同的浏览会话。

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

(async () => {
  const browser = await chromium.launch();
  
  // 创建一个新上下文
  const context = await browser.newContext();
  
  // 在该上下文中创建页面
  const page = await context.newPage();
  await page.goto('https://example.com');
  
  await browser.close();
})();

4. 浏览器页面（Page）控制

Page 是 Playwright 中最常用的 API 对象，代表浏览器中的一个标签页。通过 Page API，你可以模拟用户与页面的交互，例如点击、输入、截图、等待、抓取内容等。

主要方法：

newPage(): 创建一个新页面。
goto(url): 导航到指定 URL。
click(selector): 点击页面上的元素。
type(selector, text): 在指定的输入框中输入文本。
screenshot(options): 截取页面截图。
evaluate(fn): 执行页面上的 JavaScript 代码。
waitForSelector(selector): 等待某个元素出现在页面上。

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

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

  // 点击按钮
  await page.click('button#submit');

  // 输入文本
  await page.type('input[name="username"]', 'testuser');

  // 截取页面截图
  await page.screenshot({ path: 'example.png' });

  // 执行页面上的 JavaScript
  const title = await page.evaluate(() => document.title);
  console.log('页面标题:', title);

  await browser.close();
})();

5. 关闭浏览器和上下文

使用 browser.close() 来关闭浏览器实例，

context.close() 可以关闭浏览器上下文，

page.close() 可以关闭页面。

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // 做一些操作
  await page.goto('https://example.com');
  
  // 关闭页面
  await page.close();
  
  // 关闭上下文
  await context.close();

  // 关闭浏览器
  await browser.close();
})();

6. 其他有用的浏览器控制方法

- 获取浏览器版本

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

(async () => {
  const browser = await chromium.launch();
  console.log(await browser.version()); // 获取浏览器版本
  await browser.close();
})();

- 获取浏览器 WebSocket 端点

如果你想获取浏览器的 WebSocket 端点，可以使用 browser.wsEndpoint()，这在连接到已运行的浏览器时很有用。

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

(async () => {
  const browser = await chromium.launch();
  console.log(browser.wsEndpoint()); // 获取 WebSocket 端点
  await browser.close();
})();

7. 捕获和处理错误

Playwright 中大多数 API 都支持异步调用，所以错误处理尤为重要。你可以使用 try...catch 语句捕获错误，处理异常。

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

(async () => {
  try {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
  } catch (error) {
    console.error('发生错误:', error);
  }
})();