Context is not defined when using POM in Playwright

Question

I am trying to use POM in Playwright, but facing an issue with context. Here is my first.test.ts file:

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

Also, I have commonOperations.ts file to store all the common methods:

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

I would like to add a new method to my commonOperations.ts, which opens an additional browser tab (the code should look like that)

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

And my first.test.ts updates like that:

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)

However, I get an error:

ReferenceError: context is not defined

How should I update my commonOperations.ts to define context correctly? Thank you!

Answer 1

Your page object class has no idea what 'context' is inside the new method because it has not been defined. In you case you would need to pass the context in from your test to your page object class in the constructor.

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

Of you could of course just passed context in as an argument to the openSecondPage() method.