如何在 javascript 中使用 Playwright 中的上下文浏览器实现页面对象模型？

问：

我从 Javascript 中的 Playwrgiht 开始。

我正在使用 POM+Fixture+ 测试

实际上：

POM 1：

import { URLS, CREDENCIALES } from '../data/Constantes';

exports.Login = class Login {
/\*\*
\*

* @param {import ('@playwright/test').Page} page
  \*/
  constructor(page) {
  this.page = page;
  this.inicioHUserInput = "#name";
  this.inicioHPassInput = "#password";
  this.ingresarBtn = 'button:has-text("Ingresar")';
  };

async gotoURL() {
await this.page.goto(URLS.URL);
};

async ingreso() {
await this.page.locator(this.inicioHUserInput).fill(CREDENCIALES.USER);
await this.page.locator(this.inicioHPassInput).fill(CREDENCIALES.PASS);
await this.page.locator(this.ingresarBtn).click();
};
};

POM 2：

exports.S = class S {
/\*\*
\*

* @param {import ('@playwright/test').Page} page
  \*/

    constructor(page) {
        this.page = page;
         //Buttons
        this.inicioSBtn = '#apps > div:nth-child(3) > div.row > div:nth-child(3) > a > p';        
    };
    
    async ingresoS() {
        await this.page.locator(this.inicioSBtn).click();
    };

};

POM 3：

exports.S2 = class S2 {
/\*\*
\*

* @param {import ('@playwright/test').Page} page
  \*/

    constructor(page) {
        this.page = page;
        this.sudocuGestionBtn = '#btn_login_gestion';    
      
    };
    async ingresoGestion() {
        const newPage = await this.page.waitForEvent('popup');
        await newPage.locator(this.sudocuGestionBtn).click();
       // await newPage.waitForLoadState('domcontentloaded');                    
    };

};

夹具：

const base = require('@playwright/test');
import { Locator, Page, test, expect } from '@playwright/test';
import { URLS, CREDENCIALES } from '../data/Constantes';
const { Login } = require("../pages/loginH");
const { S } = require("../pages/s");
const { S2 } = require("../pages/s2");

exports.test = base.test.extend({
webApp: async ({ page }, use) =\> {
const login = new Login(page);
const page1 = new S(page);
const su2 = new S2(page);

    await login.gotoURL();
    await login.ingreso();
    
    await page1.ingresoS();
    await su2.ingresoGestion();
    await use(page); 

},
});
exports.expect = base.expect;

测试：

const { test, expect } = require("../tests/fixtureGestion");
import { S } from "../pages/s";
import { Login } from "../pages/loginH";
import { webApp } from "../tests/fixtureGestion";

const { fakerES: faker } = require('@faker-js/faker');
//import { faker } from '@faker-js/faker/locale/es';

test("Capturar pantalla de página de gestión", async ({ webApp, page }) =\> {

      await page.screenshot({ path: "pagina_de_gestion.png" });

});

但我不知道 POM 2 中的实现上下文。页面中的屏幕截图不正确。 在 POM 中使用和 Fixture 之后是否可以使用上下文？

谢谢！

我看到并尝试：

Playwright 中的多选项卡方案

如何使用 Playwright 使用页面对象模型处理新选项卡