Answer

Creating Custom Utilities in Playwright

Let's dive into creating a custom utility function in Playwright. We'll create a typeWithClear function that clears an input field before typing new content.

First, we'll use the click method with { clickCount: 3 } to select all existing text in the input field. Then, we'll use the press method with 'Backspace' to delete the selected text.

Here's how you can do it:

import { Locator } from 'playwright';

async function typeWithClear(locator: Locator | undefined | null,
                              value: string,
                              options?: { delay?: number }): Promise<void> {
  if (!locator) {
    throw new Error('Locator not found');
  }

  await locator.click({ clickCount: 3 });
  await locator.press('Backspace');
  
  await locator.type(value);
}

This function takes three arguments:

• A Playwright Locator object representing the input field.
• A string value representing what should be typed into that input field.
• An optional options object containing any additional options that should be passed to the underlying .type() call (such as { delay: number }).

The function first checks whether a valid locator was passed in. If not, it throws an error indicating that no valid locator was found. If there is a valid locator object present, then it clicks on it three times (to select all existing content), presses backspace once (to delete selected content), then types in new content using .type(value).

And there you have it! You've just created a custom utility function in Playwright. Happy testing!