Playwright：如何从创建浏览器上下文的函数中返回Page对象？

核心问题分析 #

你的代码存在两个关键问题导致Page对象无法正常使用：

1. 未正确处理异步返回值：openBrowserAndLogin是异步函数，返回的是Promise对象，测试代码中直接赋值给page时，page实际是Promise而非真实的Page实例，调用page.locator()必然失败。
2. 缺少类型标注导致智能提示失效：纯JavaScript环境下IDE无法自动识别返回值类型，需要手动添加类型提示来激活智能补全。

解决方案一：修复异步调用+添加类型提示 #

1. 修正测试代码的异步调用 #

调用openBrowserAndLogin时必须加上await，等待Promise解析后拿到真实的Page对象：

test('login and do stuff', async ({ browser }) => {
  // 添加await获取实际的Page实例
  const page = await openBrowserAndLogin(browser,'user1', 'secretpassword')

  await page.locator('#account').click() // 现在可正常调用方法
})

2. 添加类型提示（激活智能补全） #

如果使用TypeScript，直接给函数参数和返回值标注Playwright官方类型：

import { Browser, Page } from '@playwright/test';

export async function openBrowserAndLogin(browser: Browser, username: string, password: string): Promise<Page> {
  const context = await browser.newContext({
    httpCredentials:{
      username: username,
      password: password
    },
  })

  const page = await context.newPage()
  await page.goto('websiteurl.com')
  return page
}

如果是纯JavaScript，使用JSDoc标注类型让IDE识别：

/**
 * @param {import('@playwright/test').Browser} browser
 * @param {string} username
 * @param {string} password
 * @returns {Promise<import('@playwright/test').Page>}
 */
export async function openBrowserAndLogin(browser, username, password){
  const context = await browser.newContext({
    httpCredentials:{
      username: username,
      password: password
    },
  })

  const page = await context.newPage()
  await page.goto('websiteurl.com')
  return page
}

解决方案二：使用Playwright测试上下文扩展（推荐） #

更贴合Playwright最佳实践的方式是通过test.extend扩展测试上下文，自动注入已登录的Page，避免重复编写登录逻辑：

// custom-fixtures.mjs
import { test as base } from '@playwright/test';

export const test = base.extend({
  loggedInPage: async ({ browser }, use) => {
    const context = await browser.newContext({
      httpCredentials: {
        username: 'user1',
        password: 'secretpassword'
      }
    });
    const page = await context.newPage();
    await page.goto('websiteurl.com');
    // 将已登录的page传递给测试用例
    await use(page);
    // 测试结束后自动关闭上下文
    await context.close();
  }
});

export { expect } from '@playwright/test';

使用扩展后的测试上下文 #

import { test } from './custom-fixtures.mjs';

test('login and do stuff', async ({ loggedInPage }) => {
  // 直接使用已登录的page，无需手动调用登录函数
  await loggedInPage.locator('#account').click();
});

这种方式不仅能自动获得类型提示，还能在测试结束后自动清理上下文，符合Playwright的测试隔离原则。

内容的提问来源于stack exchange，提问作者Scott Littleton