0

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)

4
  • Please show a minimal reproducible example with the Dashboard/DashboardPage code. Also, are you actually using await dashboard.logOff()? Failing to await an async function is usually a bug. Commented Nov 9, 2023 at 16:38
  • @ggorlen I think the problem wounded up being that the base class was an abstract class. Commented Nov 9, 2023 at 16:44
  • Cool, feel free to post a self answer then. I don't know TS well so maybe there's enough info here to answer. Complete code is always good though. Commented Nov 9, 2023 at 16:49
  • Async is an implementation detail as a method can be implemented both ways.It does make sense to have an method as async on abstract class level. Commented Nov 12, 2023 at 18:37

1 Answer 1

0

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.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.