I wrote some code to wrap the Playwright Page to simplify a few operations. In one of my operations, I wanted to do something like typing and tabbing (this simulates the user behaviour better even if it is slower for Playwright so it’s primarily to test that tab order works as expected).

The class to wrap would be something like this:

import { Locator, Page } from "@playwright/test";
class SimplePage {
  constructor(private readonly page: Page) {}
  async type(text: string): Promise<this> {
    await this.page.keyboard.type(text);
    return this;
  }
  async tab(): Promise<this> {
    await this.page.keyboard.press("Tab");
    return this;
  }  
}

At present the only way I can use this in my code is as follows:

await myPage.type(programName)
  .then((p) => p.tab())
  .then((p) => p.type(shortName))
  .then((p) => p.tab());

or

await myPage.type(programName);
await myPage.tab();
await myPage.type(shortName);
await myPage.tab();

I was wondering if there’s anyway to construct it so the following would work

await myPage
  .type(programName)
  .tab()
  .type(shortName)
  .tab();