I'm looking for a way to write custom commands in Playwright like it's done in Cypress. Playwright Issues has one page related to it but I have never seen any code example.

I'm working on one test case where I'm trying to improve code reusability. Here's the code:

import { test, chromium } from '@playwright/test';

config();

let context;
let page;

test.beforeEach(async () => {
  context = await chromium.launchPersistentContext(
    'C:\\Users\\User\\AppData\\Local\\Microsoft\\Edge\\User Data\\Default',
    {
      headless: false,
      executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    }
  );

  page = await context.newPage();
  await page.goto('http://localhost:3000/');
});

test.afterEach(async () => {
  await page.close();
  await context.close();
});

test('Sample test', async () => {
  await page.click('text=Open popup');
  await page.click('_react=Button >> nth=0');
  await page.click('text=Close popup');
});

I'm trying to create a function that will call hooks test.beforeEach() and test.afterEach() and the code inside them.

In the Playwright Issue page, it says that I need to move it to a separate Node module and then I would be able to use it but I'm struggling to understand how to do it.