38. 内置夹具 page context request 等

上一章讲了 Fixture（夹具）的原理，这一章把它们落到实处：Playwright 到底给你备好了哪些现成夹具？最常用的就那么几个，先认全它们，写测试才顺手。

最常用的五个

夹具	类型	说明
page	Page	本测试专属的隔离页面
context	BrowserContext	本测试专属的浏览器上下文
browser	Browser	浏览器实例，多个测试共享
browserName	string	当前跑的是 chromium / firefox / webkit
request	APIRequestContext	本测试专属的接口请求上下文

page：最常用的那一页

page 是你跟页面交互的入口，点击、填表、断言都靠它。每个测试拿到的 page 都是全新的，互不干扰。

import { test, expect } from '@playwright/test';

test('页面能打开', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

context：页面的容器

context（BrowserContext，浏览器上下文）是比 page 更外层的隔离单位。一个 context 里可以有多个 page，cookie、storage、权限都隔离在它内部。

import { test, expect } from '@playwright/test';

test('同浏览器上下文的两个页面共享登录态', async ({ context, page }) => {
  await page.goto('https://playwright.dev/');
  const newPage = await context.newPage();   // 再开一个同上下文的页面
  await newPage.goto('https://playwright.dev/docs/intro');
  await expect(newPage).toHaveTitle(/Playwright/);
});

browser：跨测试共享

browser 是真正启动的浏览器实例。为了省资源，多个测试的 context 会复用同一个 browser。一般你不需要直接碰它，除非要手动开一个带特殊配置的 context。

import { test, expect } from '@playwright/test';

test('用移动端视口另开一个上下文', async ({ browser }) => {
  const ctx = await browser.newContext({ viewport: { width: 390, height: 844 } });
  const page = await ctx.newPage();
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
  await ctx.close();   // 手动开的，记得手动关
});

browserName：区分浏览器

当你的项目在多个浏览器上跑（chromium、firefox、webkit），browserName 能让你针对性地写逻辑。

import { test } from '@playwright/test';

test('火狐才执行的特殊处理', async ({ page, browserName }) => {
  if (browserName === 'firefox') {
    // 只有火狐走这里
  }
});

request：接口测试的入口

request 给本测试一个独立的 APIRequestContext（接口请求上下文），用来直接发 HTTP 请求（详见第 34 章）。它也读配置里的 baseURL 和 extraHTTPHeaders。

import { test, expect } from '@playwright/test';

test('接口返回 200', async ({ request }) => {
  const resp = await request.get('/api/health');
  expect(resp.ok()).toBeTruthy();
});

该用哪个夹具

面对一个需求，先想清楚作用范围，再选夹具：

• 只和单个页面交互 → 用 page。
• 要配 cookie、权限、viewport，或多页面共享状态 → 用 context。
• 要手动开一个带特殊配置的 context → 用 browser。
• 按浏览器做分支逻辑 → 用 browserName。
• 不碰界面、只验证后端 → 用 request。

它们之间的关系

一句话串起来：一个 browser 里能开多个 context，一个 context 里能开多个 page，而 request 是旁路的接口通道。测试之间靠 context 这一层彻底隔离，所以并发也安全。

怎么知道还有哪些

除了这五个，Playwright 还有 headless、viewport、baseURL 这类「选项夹具」，以及测试函数第二个参数拿到的 testInfo（测试信息）。完整清单在官方的 Fixtures 文档里。新手先吃透上面五个，足够应付绝大多数测试了。

小结

这一章把 Playwright 内置的常用夹具认了个遍：page 管页面交互，context 管隔离环境，browser 管实例本身，browserName 用来按浏览器分支，request 专门跑接口测试。层级关系记一句就行——browser 里套 context，context 里套 page。日常写测试，page 能解决八成场景，别一上来就找 browser。