BrowserContext

BrowserContexts 提供了一种操作多个独立浏览器会话的方式。

如果一个页面打开了另一个页面，例如通过window.open调用，弹出窗口将属于父页面的浏览器上下文。

Playwright允许通过browser.newContext()方法创建隔离的非持久性浏览器上下文。非持久性浏览器上下文不会向磁盘写入任何浏览数据。

// Create a new incognito browser context
const context = await browser.newContext();
// Create a new page inside context.
const page = await context.newPage();
await page.goto('https://example.com');
// Dispose context once it's no longer needed.
await context.close();

方法​

addCookies​

将cookies添加到此浏览器上下文中。该上下文内的所有页面都将安装这些cookies。可以通过browserContext.cookies()获取cookies。

用法

await browserContext.addCookies([cookieObject1, cookieObject2]);

参数

• cookies 数组<Object>#

  • name string

  • value string

  • url string (可选)

    url或domain/path必须提供其一。可选参数。

  • domain string (可选)

    要使cookie适用于所有子域名，请在域名前加上点号，例如：".example.com"。必须提供url或domain/path。可选参数。

  • path string (可选)

    必须提供url或domain/path中的任意一个 可选参数。

  • expires number (可选)

    Unix时间戳，单位为秒。可选参数。

  • httpOnly boolean (可选)

    可选项。

  • secure boolean (可选)

    可选参数。

  • sameSite "Strict" | "Lax" | "None" (可选)

    可选项。

返回

• Promise<void>#

addInitScript​

添加一个脚本，该脚本将在以下任一场景中被执行：

• 每当在浏览器上下文中创建页面或进行导航时。
• 每当浏览器上下文中任何页面的子框架被附加或导航时。在这种情况下，脚本会在新附加框架的上下文中进行评估。

脚本会在文档创建后但在其任何脚本运行前被评估。这对于修改JavaScript环境非常有用，例如用于初始化Math.random。

用法

在页面加载前覆盖Math.random的示例：

// preload.js
Math.random = () => 42;

// In your playwright script, assuming the preload.js file is in same directory.
await browserContext.addInitScript({
  path: 'preload.js'
});

参数

• script function | string | Object#

  • path string (可选)

    JavaScript文件的路径。如果path是相对路径，则相对于当前工作目录解析。可选。

  • content string (可选)

    原始脚本内容。可选参数。

  在浏览器上下文中所有页面中评估的脚本。

• arg Serializable (可选)#

  传递给script的可选参数（仅在传递函数时支持）。

返回

• Promise<void>#

backgroundPages​

上下文中的所有现有后台页面。

用法

browserContext.backgroundPages();

返回

• Array<Page>#

浏览器​

返回上下文的浏览器实例。如果是作为持久化上下文启动的，则返回null。

用法

browserContext.browser();

返回

• null | 浏览器#

清除Cookies​

从上下文中移除cookies。接受可选过滤器。

用法

await context.clearCookies();
await context.clearCookies({ name: 'session-id' });
await context.clearCookies({ domain: 'my-origin.com' });
await context.clearCookies({ domain: /.*my-origin\.com/ });
await context.clearCookies({ path: '/api/v1' });
await context.clearCookies({ name: 'session-id', domain: 'my-origin.com' });

参数

• options Object (optional)

  • domain string | RegExp (可选) 添加于: v1.43#

    仅移除具有给定域的cookie。

  • name string | RegExp (可选) 添加于: v1.43#

    仅移除具有指定名称的cookies。

  • path string | RegExp (可选) 添加于: v1.43#

    仅移除具有给定路径的cookies。

返回

• Promise<void>#

clearPermissions​

清除浏览器上下文的所有权限覆盖设置。

用法

const context = await browser.newContext();
await context.grantPermissions(['clipboard-read']);
// do stuff ..
context.clearPermissions();

返回

• Promise<void>#

关闭​

关闭浏览器上下文。属于该浏览器上下文的所有页面都将被关闭。

用法

await browserContext.close();
await browserContext.close(options);

参数

• options Object (optional)

  • reason string (可选) 添加于: v1.40#

    要报告给因上下文关闭而中断的操作的原因。

返回

• Promise<void>#

cookies​

如果未指定URL，此方法将返回所有cookie。如果指定了URL，则仅返回影响这些URL的cookie。

用法

await browserContext.cookies();
await browserContext.cookies(urls);

参数

• urls string | Array<string> (可选)#

  可选的URL列表。

返回

• Promise<数组<Object>>#

  • name string

  • value string

  • domain string

  • path string

  • expires number

    Unix时间，单位为秒。

  • httpOnly boolean

  • secure boolean

  • sameSite "Strict" | "Lax" | "None"

exposeBinding​

该方法在上下文中每个页面的每个框架的window对象上添加一个名为name的函数。当被调用时，该函数执行callback并返回一个Promise，该Promise会解析为callback的返回值。如果callback返回一个Promise，它将被等待。

callback函数的第一个参数包含调用者的信息：{ browserContext: BrowserContext, page: Page, frame: Frame }。

查看page.exposeBinding()获取仅限页面的版本。

用法

一个示例，展示如何在上下文中向所有页面中的所有框架公开页面URL：

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.

(async () => {
  const browser = await webkit.launch({ headless: false });
  const context = await browser.newContext();
  await context.exposeBinding('pageURL', ({ page }) => page.url());
  const page = await context.newPage();
  await page.setContent(`
    <script>
      async function onClick() {
        document.querySelector('div').textContent = await window.pageURL();
      }
    </script>
    <button onclick="onClick()">Click me</button>
    <div></div>
  `);
  await page.getByRole('button').click();
})();

参数

• name string#

  窗口对象上的函数名称。

• callback function#

  将在Playwright上下文中调用的回调函数。

• options Object (可选)

  • handle boolean (可选)#

    已弃用

    此选项将在未来版本中移除。

    是否将参数作为句柄传递，而不是按值传递。当传递句柄时，仅支持一个参数。当按值传递时，支持多个参数。

返回

• Promise<void>#

exposeFunction​

该方法在上下文环境中每个页面的每个框架的window对象上添加一个名为name的函数。当调用时，该函数执行callback并返回一个Promise，该Promise会解析为callback的返回值。

如果callback返回一个Promise，它将被等待。

仅限页面的版本请参见page.exposeFunction()。

用法

一个在上下文中为所有页面添加sha256函数的示例：

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.
const crypto = require('crypto');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const context = await browser.newContext();
  await context.exposeFunction('sha256', text =>
    crypto.createHash('sha256').update(text).digest('hex'),
  );
  const page = await context.newPage();
  await page.setContent(`
    <script>
      async function onClick() {
        document.querySelector('div').textContent = await window.sha256('PLAYWRIGHT');
      }
    </script>
    <button onclick="onClick()">Click me</button>
    <div></div>
  `);
  await page.getByRole('button').click();
})();

参数

• name string#

  窗口对象上的函数名称。

• callback function#

  将在Playwright上下文中调用的回调函数。

返回

• Promise<void>#

grantPermissions​

授予浏览器上下文指定的权限。如果指定了来源，则仅授予该来源相应的权限。

用法

await browserContext.grantPermissions(permissions);
await browserContext.grantPermissions(permissions, options);

参数

• permissions Array<string>#

  授予的权限列表。

  danger

  不同浏览器之间支持的权限有所不同，即使是同一浏览器的不同版本之间也可能存在差异。任何权限在更新后都可能停止工作。

  以下是一些可能被某些浏览器支持的权限：

  • 'accelerometer'
  • 'ambient-light-sensor'
  • 'background-sync'
  • 'camera'
  • 'clipboard-read'
  • 'clipboard-write'
  • 'geolocation'
  • 'gyroscope'
  • 'magnetometer'
  • 'microphone'
  • 'midi-sysex' (系统专用MIDI)
  • 'midi'
  • 'notifications'
  • 'payment-handler'
  • 'storage-access'

• options Object (可选)

  • origin string (可选)#

    要授予权限的来源，例如"https://example.com"。

返回

• Promise<void>#

newCDPSession​

返回新创建的会话。

用法

await browserContext.newCDPSession(page);

参数

• page Page | Frame#

  创建新会话的目标对象。为了向后兼容，这个参数被命名为page，但它可以是Page或Frame类型。

返回

• Promise<CDPSession>#

newPage​

在浏览器上下文中创建一个新页面。

用法

await browserContext.newPage();

返回

• Promise<Page>#

页面​

返回上下文中所有打开的页面。

用法

browserContext.pages();

返回

• Array<Page>#

removeAllListeners​

移除给定类型的所有监听器（如果未指定类型，则移除所有已注册的监听器）。允许等待异步监听器完成，或忽略这些监听器后续产生的错误。

用法

await browserContext.removeAllListeners();
await browserContext.removeAllListeners(type, options);

参数

• type string (可选)#
• options Object (optional)

  • behavior "wait" | "ignoreErrors" | "default" (可选)#

    指定是否等待已运行的监听器以及当它们抛出错误时的处理方式：

    • 'default' - 不等待当前监听器调用(如果有)完成，如果监听器抛出异常，可能导致未处理的错误
    • 'wait' - 等待当前监听器调用（如果有）完成
    • 'ignoreErrors' - 不等待当前监听器调用(如果有)完成，移除后监听器抛出的所有错误将被静默捕获

返回

• Promise<void>#

路由​

路由功能提供了修改浏览器上下文中任何页面发出的网络请求的能力。一旦启用路由，每个匹配URL模式的请求都将被暂停，除非它被继续、完成或中止。

用法

一个简单的处理程序示例，它会中止所有图片请求：

const context = await browser.newContext();
await context.route('**/*.{png,jpg,jpeg}', route => route.abort());
const page = await context.newPage();
await page.goto('https://example.com');
await browser.close();

或者使用正则表达式模式替代的相同代码片段：

const context = await browser.newContext();
await context.route(/(\.png$)|(\.jpg$)/, route => route.abort());
const page = await context.newPage();
await page.goto('https://example.com');
await browser.close();

可以检查请求来决定路由操作。例如，模拟所有包含某些post数据的请求，而保持其他所有请求不变：

await context.route('/api/**', async route => {
  if (route.request().postData().includes('my-string'))
    await route.fulfill({ body: 'mocked-data' });
  else
    await route.continue();
});

当请求同时匹配多个处理器时，页面路由（通过page.route()设置）的优先级高于浏览器上下文路由。

要移除带有处理程序的路由，您可以使用browserContext.unroute()。

参数

• url string | RegExp | function(URL):boolean#

  一个用于路由匹配的全局模式、正则表达式模式或接收URL的谓词函数。当通过上下文选项提供了baseURL且传入的URL是路径时，会通过new URL()构造函数进行合并。

• handler function(Route, Request):Promise<Object> | Object#

  用于路由请求的处理函数。

• options Object (可选)

  • times number (可选) 添加于: v1.15#

    路由应被使用的频率。默认情况下每次都会被使用。

返回

• Promise<void>#

从HAR文件创建路由​

如果指定了该选项，上下文中的网络请求将从HAR文件提供。了解更多关于从HAR回放的信息。

Playwright 不会处理由Service Worker从HAR文件中拦截的请求。请参阅此问题。我们建议在使用请求拦截时通过将serviceWorkers设置为'block'来禁用Service Workers。

用法

await browserContext.routeFromHAR(har);
await browserContext.routeFromHAR(har, options);

参数

• har string#

  指向包含预录制网络数据的HAR文件的路径。如果path是相对路径，则会相对于当前工作目录进行解析。

• options Object (可选)

  • notFound "abort" | "fallback" (可选)#

    • 如果设置为'abort'，任何在HAR文件中找不到的请求都将被中止。
    • 如果设置为'fallback'，将回退到处理程序链中的下一个路由处理程序。

    默认为中止。

  • update boolean (可选)#

    如果指定，将使用实际的网络信息更新给定的HAR文件，而不是从文件提供。文件会在调用browserContext.close()时写入磁盘。

  • updateContent "embed" | "attach" (可选) 添加于: v1.32#

    控制资源内容管理的可选设置。如果指定了attach，资源将作为单独的文件或ZIP存档中的条目持久化。如果指定了embed，内容将内联存储在HAR文件中。

  • updateMode "full" | "minimal" (可选) 添加于: v1.32#

    当设置为minimal时，仅记录从HAR路由所必需的信息。这将省略大小、时间、页面、cookies、安全和其他类型的HAR信息，这些信息在从HAR回放时不会被使用。默认为minimal。

  • url string | RegExp (可选)#

    用于匹配请求URL的通配符模式、正则表达式或谓词函数。只有URL匹配该模式的请求才会从HAR文件中获取响应。如果未指定，则所有请求都将从HAR文件中获取响应。

返回

• Promise<void>#

routeWebSocket​

该方法允许修改浏览器上下文中任何页面建立的websocket连接。

请注意，只有在此方法调用后创建的WebSocket才会被路由。建议在创建任何页面之前调用此方法。

用法

以下是一个简单处理程序的示例，它可以阻止某些WebSocket消息。更多详情和示例请参阅WebSocketRoute。

await context.routeWebSocket('/ws', async ws => {
  ws.routeSend(message => {
    if (message === 'to-be-blocked')
      return;
    ws.send(message);
  });
  await ws.connect();
});

参数

• url string | RegExp | function(URL):boolean#

  只有URL匹配此模式的WebSocket连接才会被路由。字符串模式可以相对于baseURL上下文选项。

• handler function(WebSocketRoute):Promise<Object> | Object#

  用于路由WebSocket的处理函数。

返回

• Promise<void>#

serviceWorkers​

上下文中的所有现有服务工作者。

用法

browserContext.serviceWorkers();

返回

• Array<Worker>#

setDefaultNavigationTimeout​

此设置将更改以下方法及相关快捷方式的默认最大导航时间：

• page.goBack()
• page.goForward()
• page.goto()
• page.reload()
• page.setContent()
• page.waitForNavigation()

用法

browserContext.setDefaultNavigationTimeout(timeout);

参数

• timeout number#

  最大导航时间（毫秒）

setDefaultTimeout​

此设置将更改所有接受timeout选项的方法的默认最大时间。

用法

browserContext.setDefaultTimeout(timeout);

参数

• timeout number#

  最大时间，单位为毫秒。传入0表示禁用超时。

setExtraHTTPHeaders​

额外的HTTP头信息将与上下文中任何页面发起的每个请求一起发送。这些头信息与通过page.setExtraHTTPHeaders()设置的页面特定额外HTTP头信息合并。如果页面覆盖了特定头信息，将使用页面特定的头信息值而非浏览器上下文头信息值。

用法

await browserContext.setExtraHTTPHeaders(headers);

参数

• headers Object<string, string>#

  一个包含要随每个请求发送的额外HTTP头信息的对象。所有头信息的值都必须是字符串。

返回

• Promise<void>#

设置地理位置​

设置上下文的定位地理位置。传入null或undefined将模拟位置不可用状态。

用法

await browserContext.setGeolocation({ latitude: 59.95, longitude: 30.31667 });

参数

• geolocation null | Object#

  • latitude number

    纬度值，范围在-90到90之间。

  • longitude number

    经度值，范围在-180到180之间。

  • accuracy number (可选)

    非负精度值。默认为 0。

返回

• Promise<void>#

setOffline​

用法

await browserContext.setOffline(offline);

参数

• offline boolean#

  是否模拟浏览器上下文处于离线网络状态。

返回

• Promise<void>#

storageState​

返回此浏览器上下文的存储状态，包含当前cookies、本地存储快照和IndexedDB快照。

用法

await browserContext.storageState();
await browserContext.storageState(options);

参数

• options Object (optional)

  • indexedDB boolean (可选) 添加于: v1.51#

    设置为 true 以在存储状态快照中包含 IndexedDB。如果您的应用程序使用IndexedDB存储身份验证令牌（如Firebase身份验证），请启用此选项。

    注意

    目前不支持包含类型化数组的IndexedDB。

  • path string (可选)#

    存储状态要保存到的文件路径。如果path是相对路径，则相对于当前工作目录解析。如果未提供路径，仍会返回存储状态，但不会保存到磁盘。

返回

• Promise<Object>#
  • cookies 数组<Object>

    • name string

    • value string

    • domain string

    • path string

    • expires number

      Unix时间，单位为秒。

    • httpOnly boolean

    • secure boolean

    • sameSite "Strict" | "Lax" | "None"

  • origins 数组<Object>

    • origin string

    • localStorage Array<Object>

      • name string

      • value string

取消路由​

移除通过browserContext.route()创建的路由。当未指定handler时，将移除该url的所有路由。

用法

await browserContext.unroute(url);
await browserContext.unroute(url, handler);

参数

• url string | RegExp | function(URL):boolean#

  用于接收URL的全局模式、正则表达式模式或谓词函数，用于通过browserContext.route()注册路由。

• handler function(Route, Request):Promise<Object> | Object (可选)#

  用于通过browserContext.route()注册路由的可选处理函数。

返回

• Promise<void>#

unrouteAll​

移除所有通过browserContext.route()和browserContext.routeFromHAR()创建的路由。

用法

await browserContext.unrouteAll();
await browserContext.unrouteAll(options);

参数

• options Object (optional)

  • behavior "wait" | "ignoreErrors" | "default" (可选)#

    指定是否等待已运行的处理器以及当它们抛出错误时的处理方式：

    • 'default' - 不等待当前处理程序调用(如果有)完成，如果未路由的处理程序抛出异常，可能导致未处理的错误
    • 'wait' - 等待当前处理程序调用（如果有）完成
    • 'ignoreErrors' - 不等待当前处理程序调用（如果有）完成，取消路由后由处理程序抛出的所有错误将被静默捕获

返回

• Promise<void>#

waitForEvent​

等待事件触发并将其值传递给谓词函数。当谓词返回真值时返回。如果在事件触发前上下文关闭，将抛出错误。返回事件数据值。

用法

const pagePromise = context.waitForEvent('page');
await page.getByRole('button').click();
const page = await pagePromise;

参数

• event string#

  事件名称，与传入browserContext.on(event)的名称相同。

• optionsOrPredicate function | Object (可选)#

  • predicate function

    接收事件数据，当等待应解决时解析为真值。

  • timeout number (可选)

    最大等待时间，以毫秒为单位。默认为0 - 无超时。默认值可以通过配置文件中的actionTimeout选项或使用browserContext.setDefaultTimeout()方法来更改。

  可以是一个接收事件的谓词函数，也可以是一个选项对象。可选参数。

• options Object (可选)

  • predicate function (可选)#

    接收事件数据，当等待应解决时解析为真值。

返回

• Promise<Object>#

属性​

时钟​

Playwright 具备模拟时钟和时间流逝的功能。

用法

browserContext.clock

类型

• 时钟

请求​

与此上下文关联的API测试助手。使用此API发出的请求将使用上下文中的cookies。

用法

browserContext.request

类型

• APIRequestContext

追踪​

用法

browserContext.tracing

类型

• Tracing

事件​

on('backgroundpage')​

当上下文中创建新的后台页面时触发。

const backgroundPage = await context.waitForEvent('backgroundpage');

用法

browserContext.on('backgroundpage', data => {});

事件数据

• Page

on('close')​

当浏览器上下文关闭时触发。这可能由以下原因之一导致：

• 浏览器上下文已关闭。
• 浏览器应用程序已关闭或崩溃。
• 调用了browser.close()方法。

用法

browserContext.on('close', data => {});

事件数据

• BrowserContext

on('console')​

当页面中的JavaScript调用控制台API方法时触发，例如 console.log 或 console.dir。

传递给console.log的参数和页面内容可在ConsoleMessage事件处理程序参数中使用。

用法

context.on('console', async msg => {
  const values = [];
  for (const arg of msg.args())
    values.push(await arg.jsonValue());
  console.log(...values);
});
await page.evaluate(() => console.log('hello', 5, { foo: 'bar' }));

事件数据

• ConsoleMessage

on('dialog')​

当出现JavaScript对话框时触发，例如alert、prompt、confirm或beforeunload。监听器必须选择dialog.accept()或dialog.dismiss()来处理对话框 - 否则页面会冻结等待对话框响应，点击等操作将无法完成。

用法

context.on('dialog', dialog => {
  dialog.accept();
});

事件数据

• Dialog

on('page')​

当在BrowserContext中创建一个新Page时，会触发该事件。页面可能仍在加载中。该事件也会针对弹出页面触发。另请参阅page.on('popup')以接收与特定页面相关的弹出窗口事件。

页面可用的最早时刻是当它导航到初始URL时。例如，当使用window.open('http://example.com')打开弹出窗口时，这个事件将在对"http://example.com"的网络请求完成且其响应开始在弹出窗口中加载时触发。如果您想路由/监听此网络请求，请使用browserContext.route()和browserContext.on('request')，而不是在Page上使用类似方法。

const newPagePromise = context.waitForEvent('page');
await page.getByText('open new page').click();
const newPage = await newPagePromise;
console.log(await newPage.evaluate('location.href'));

用法

browserContext.on('page', data => {});

事件数据

• Page

on('request')​

当通过此上下文创建的任何页面发出请求时触发。request对象是只读的。要仅监听特定页面的请求，请使用page.on('request')。

为了拦截和修改请求，请参阅browserContext.route()或page.route()。

用法

browserContext.on('request', data => {});

事件数据

• Request

on('requestfailed')​

当请求失败时触发，例如超时。若只想监听特定页面的失败请求，请使用page.on('requestfailed')。

用法

browserContext.on('requestfailed', data => {});

事件数据

• Request

on('requestfinished')​

当请求在下载响应体后成功完成时触发。对于一个成功的响应，事件顺序为request、response和requestfinished。要监听特定页面的成功请求，请使用page.on('requestfinished')。

用法

browserContext.on('requestfinished', data => {});

事件数据

• Request

on('response')​

当请求的response状态和头部被接收时触发。对于成功的响应，事件顺序是request、response和requestfinished。要监听特定页面的响应事件，请使用page.on('response')。

用法

browserContext.on('response', data => {});

事件数据

• Response

on('serviceworker')​

当上下文中创建新的service worker时触发。

用法

browserContext.on('serviceworker', data => {});

事件数据

• Worker

on('weberror')​

当此上下文中任何页面出现未处理的异常时触发。要监听特定页面的错误，请改用page.on('pageerror')。

用法

browserContext.on('weberror', data => {});

事件数据

• WebError

已弃用​

setHTTPCredentials​

用法

await browserContext.setHTTPCredentials(httpCredentials);

参数

• httpCredentials null | Object#

  • username string

  • password string

返回

• Promise<void>#