Playwright/TypeScript calling Parent function on Child class

Question

So i've ran into a super strange issue that while i've fixed im not exactly sure why this is happening:

I have a base page object that all other page objects inherit from. It's pretty simple and looks like this:

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

export abstract class BasePage {
  constructor(public readonly page: Page) {}


  /**
   * navigates to url
   * @param path - url path
   */
  async open(path: string) {
    await this.page.goto(path);
  }
}

In my website I have a navBar that exists everywhere, so I thought I would put a function in there to handle logging off:

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

export abstract class BasePage {
  constructor(public readonly page: Page) {}

  public readonly navDropdownLink = this.page.locator("#navbarDropdown");
  public readonly logOffButton = this.page.locator("#logOffButton")

  async logOff() {
    await this.navDropdownLink.click()
    await this.logOffButton.click()
  }

  /**
   * navigates to url
   * @param path - url path
   */
  async open(path: string) {
    await this.page.goto(path);
  }
}

Pretty simple stuff so far. I also have a Dashboard page object that inherits the base page object functions. So I thought I could just call the Parent/Base page object logOff function from within the child class:

const dashboard = new DashboardPage(page)
dashboard.logOff()

Seems like it should work, however when calling it it seemed to just pass over the function and not await correctly causing it to fail.

However! If I place that same logOff function into my child page object class it works fine. Im not really sure what's going on here as DashboardPage class should have access to the logOff function....and I don't get any errors but it's almost as if it skips it? (Or just ignores the function async). As I can see in Playwright debug mode where it's doing the function, but not awaiting.

Im assuming this is some sort of inheritance problem? Or maybe because it's an Abstract class? (Im not super familiar with them but I saw a lot of people use Abstract for base classes)

Answer 1

The problem ended up being the fact that the BasePage was an abstract class. Im not exactly sure why it behaved the way it did, but from my understanding we cannot instantiate a parent abstract class, and since I didn't have one declared in the base class it caused the problem above.