How can I write tests in Typescript Playwright, using the Page Object Model and inheriting from a base page class, so that they will run in UI mode?

Question

I'm new to both playwright and typescript, so this is probably a very silly question.

If I have a test that looks like this:

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

test('whatever', async ({page}) => {
  page.goto('https://google.ca'/);
})

and I run "npx playwright test --ui", it comes up no problem.

I've created two page objects, one of which is a base class that the page I care about extends. If I modify my test script to look like this:

import { test, expect, Locator, Page } from '@playwright/test';
import { YoutubeMyoutubeMastheadPage } from '../pages/youtubeMastheadPage';

test('Log in to youtube', async ({ page }) => {
    const masthead = new YoutubeMyoutubeMastheadPage(page);

    await masthead.signInToYoutube();
    await expect(page.locator('xpath=//img[@alt="Avatar image"]'));
  });

test('whatever', async ({page}) => {
  page.goto('https://google.ca'/);
})

and I run "npx playwright test --ui", it says no tests are found and simply shows the youtubeMastheadPage.

youtubeMastheadPage looks like this:

export class YoutubeMyoutubeMastheadPage extends basePage{

    readonly page: Page;

    constructor(page: Page){
        super(page)
        this.page = page;

    }
[other methods]
}

I tried to implement this based on the POM from the playwright docs, but can't seem to get it to recognize my test when there is a page object imported.

Luc Gagan · Accepted Answer · 2023-06-10 14:34:17Z

1

The code you've written should work.

However, I noticed that page.goto('https://google.ca'/); is invalid (notice the syntax error).

My suspicion is that you are getting a syntax error and that is why it says no tests found.

Also, the expect function that you have used is not complete, it should be in the form expect(page.locator('...')).toBe(...). You need to check some property or value using expect function, as in the example below:

answered Jun 10, 2023 at 14:34

Luc Gagan

9841 gold badge7 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nikhil sukumar · Accepted Answer · 2024-02-14 14:51:14Z

0

Remove the Page object creation from the youtubeMastheadPage page.

readonly page: Page;

That should solve your issue.

answered Feb 14, 2024 at 14:51

nikhil sukumar

511 silver badge7 bronze badges

Collectives™ on Stack Overflow

How can I write tests in Typescript Playwright, using the Page Object Model and inheriting from a base page class, so that they will run in UI mode?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related