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?

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.

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: