Playwright中实现循环批量打开多标签页并集成至POM类

核心问题分析 #

1. CommonOperations类未持有BrowserContext引用，直接调用context.newPage()会触发未定义错误；
2. 原循环代码存在语法错误（const page[i]不符合变量声明规则），且逻辑无法灵活指定标签页数量。

具体实现步骤 #

1. 调整CommonOperations类，封装多标签页创建方法

修改commonOperations.ts，通过当前页面获取所属的BrowserContext，并实现可指定数量的标签页创建函数：

import { Page, BrowserContext } from '@playwright/test';
import { randomName } from './your-utils-file'; // 引入你的随机名称工具函数

export class CommonOperations {
    readonly page: Page;
    readonly context: BrowserContext;

    constructor(page: Page) {
        this.page = page;
        this.context = page.context(); // 从当前页面关联的上下文对象
    }

    async login() {
        const email = process.env.EMAIL;
        const password = process.env.PASSWORD;
        const url = process.env.URL;
        await this.page.goto(url);
        await this.page.fill(sso.inputEmailField, email);
        await this.page.click(sso.submitButton);
        await this.page.fill(sso.inputPasswdField, password);
        await this.page.click(sso.submitButton);
        await this.page.click(sso.submitButton);
    }

    // 创建指定数量的标签页，返回页面数组
    async createMultipleTabs(tabCount: number, targetUrl: string): Promise<Page[]> {
        const createdPages: Page[] = [];
        for (let i = 0; i < tabCount; i++) {
            const newTab = await this.context.newPage();
            await newTab.goto(targetUrl);
            createdPages.push(newTab);
        }
        return createdPages;
    }

    // 扩展：创建标签页并自动填充昵称
    async createTabsWithNickname(tabCount: number, targetUrl: string): Promise<Page[]> {
        const createdPages: Page[] = [];
        for (let i = 0; i < tabCount; i++) {
            const newTab = await this.context.newPage();
            await newTab.goto(targetUrl);
            const nickname = randomName(10);
            await newTab.fill("input[data-testid='text-input-field']", nickname);
            createdPages.push(newTab);
        }
        return createdPages;
    }
}

2. 在测试用例中调用封装方法

替代手动创建页面的代码，直接使用封装好的函数：

import { test } from '@playwright/test';
import { CommonOperations } from './commonOperations';

test('Test multiple tabs', async ({ context }) => {
    const mainPage = await context.newPage();
    const commonOps = new CommonOperations(mainPage);
    
    // 创建2个目标标签页（可自定义数量参数）
    const tabs = await commonOps.createMultipleTabs(2, urlText);
    
    // 示例：对创建的标签页执行后续操作
    // for (const tab of tabs) {
    //     // 自定义操作逻辑
    // }

    // 测试完成后清理资源
    for (const tab of tabs) {
        await tab.close();
    }
    await mainPage.close();
});

关键说明 #

• 通过page.context()获取上下文，既符合POM模式中页面与上下文的关联逻辑，又避免了额外注入BrowserContext的繁琐；
• 用数组存储创建的页面，解决了原代码的语法错误，同时方便后续统一管理所有标签页；
• 方法返回页面数组，便于测试用例中对每个标签页进行独立操作。

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