playwright 的Browser、Context、Page和对比

深入理解Browser、Context、Page，可以让我们轻松掌握Playwright的工作原理，并从容应对问题如：如何处理对话框？如何复用登录身份信息？录制调整视频大小或者存储目录？

1. 概念

    在Playwright中，Browser, Context, 和 Page 是核心概念，它们共同定义了自动化测试的结构。

    测试会在浏览器（Browser）的上下文（BrowserContext）中执行，每个上下文包含多个页面（Page）。每个页面都代表了一个打开的浏览器标签页。这种层级结构允许你在同一个浏览器实例中同时执行多个测试用例，以提高效率。

Browser

• • Browser 对应于一个完整的浏览器实例，比如 Chrome、Firefox 或 WebKit。

• • Playwright 脚本通常从启动一个 Browser 实例开始，并在测试结束时关闭它。

• • Browser 可以在无头（headless）或有头（headful）模式下启动。

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

// 无头模式启动浏览器
async function launchInHeadlessMode() {
  const browser = await chromium.launch({ headless: true });
  console.log('浏览器已在无头模式下启动');
  // 执行其他操作...
  await browser.close();
}

// 有头模式启动浏览器
async function launchInHeadfulMode() {
  const browser = await chromium.launch({ headless: false });
  console.log('浏览器已在有头模式下启动');
  // 执行其他操作...
  await browser.close();
}

// 分别调用无头模式和有头模式启动浏览器的函数
launchInHeadlessMode();
launchInHeadfulMode();

• • 一个 Browser 实例可以包含多个BrowserContext。 BrowserContext 代表了浏览器的一个隔离环境，其中包含了一组浏览器窗口（Page）、cookies、缓存、本地存储等。使用多个 BrowserContext 可以帮助模拟不同用户的会话，或者隔离测试环境以避免相互干扰。

BrowserContext

• • BrowserContext 代表了一个浏览器的会话，它类似于一个全新的浏览器配置文件。

• • Playwright 为每个测试用例创建一个 BrowserContext，以确保测试之间的隔离。

• • 每个 BrowserContext 拥有自己的 Cookie、浏览器存储和浏览历史记录。

• • 可以在同一个 Browser 实例中创建多个 BrowserContext 来模拟多用户会话。

示例代码：

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

async function main() {
  // 启动一个浏览器实例
  const browser = await chromium.launch();

  // 创建第一个 BrowserContext
  let context1 = await browser.newContext();
  let page1 = await context1.newPage();
  await page1.goto('https://example.com');
  console.log('在第一个上下文中打开网页');

  // 创建第二个 BrowserContext
  let context2 = await browser.newContext();
  let page2 = await context2.newPage();
  await page2.goto('https://example.com');
  console.log(