typescript 在Playwright中使用POM时未定义上下文

mftmpeh8  于 2022-12-24  发布在  TypeScript
关注(0)|答案(1)|浏览(143)

我尝试在Playwright中使用POM,但是遇到了context的问题。下面是我的first.test.ts文件:

let page: Page;
let secondPage: any;
let urlText: any;

test.beforeEach(async ({ context }) => {
    page = await context.newPage();
    const comOperations = new commonOperations.CommonOperations(page);
    await comOperations.login()
    await comOperations.startQuiz(quizSamples.getQuizData(2, 4, 100, 200));
    urlText = await comOperations.copyUrl()
    secondPage = await context.newPage();
    await secondPage.goto(urlText);
});

test.afterAll(async () => {
    await page.close();
});

test('Enter name page is displayed according to the designs', async () => {
    await expect(secondPage.locator(quizParticipant.enterNicknameField)).toBeVisible();
});

此外,我有commonOperations.ts文件来存储所有常见的方法:

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

export class CommonOperations {
    readonly page: Page;
    constructor(page: Page) {
        this.page = page;
    }

    async importQuestions(quizSample: any) {
        await this.page.click(homepage.importQuizButton);
        await this.page.fill(importQuiz.jsonTextArea, quizSample);
    }

    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)
    }
}

我想在我的commonOperations.ts中添加一个新方法,它会打开一个额外的浏览器标签(代码应该是这样的)

async openSecondPage(urlText: any) {
        let secondPage = await context.newPage();
        await secondPage.goto(urlText);
    }

我的first.test.ts更新如下:

let page: Page;
let secondPage: any;
let urlText: any;

test.beforeEach(async ({ context }) => {
    page = await context.newPage();
    const comOperations = new commonOperations.CommonOperations(page);
    await comOperations.login()
    await comOperations.startQuiz(quizSamples.getQuizData(2, 4, 100, 200));
    urlText = await comOperations.copyUrl();
    await comOperations.openSecondPage(urlText)

但是,我得到一个错误:

ReferenceError: context is not defined

我应该如何更新我的commonOperations.ts以正确定义上下文?谢谢!

gojuced7

gojuced71#

您的页面对象类不知道新方法中的“上下文”是什么,因为它尚未定义。在这种情况下,您需要将上下文从测试传递到构造函数中的页面对象类。

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

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

    constructor(page: Page, context: BrowserContext) {
        this.page = page;
        this.context = context;
    }

    async importQuestions(quizSample: any) {
        await this.page.click(homepage.importQuizButton);
        await this.page.fill(importQuiz.jsonTextArea, quizSample);
    }

    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 openSecondPage(urlText: any) {
        let secondPage = await this.context.newPage();
        await secondPage.goto(urlText);
    }
}

当然,您也可以将上下文作为参数传递给openSecondPage()方法。

相关问题