From galata using playwright to playwright with galata about galata

[jtpio]

Just switched from jest to @playwright/test when updating RetroLab in jupyterlab/retrolab#167 (retrolab has been using plain playwright and not galata, yet).

The setup and code is much simpler and feels less convoluted. Also as mentioned above fixtures would also be great to have in galata.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[jtpio]

Thanks @fcollonval for opening this.

Embrace playwright test runner

Historically and for more context, Galata switched from using puppeteer to playwright in #11. The diff was relatively small since both frameworks have almost the same API.

If we decide to go full playwright from now on, then I think it would indeed make sense to embrace more of the existing tooling 👍

[mbektas]

Sure, this is a good idea. We currently customize test and describe methods of jest for some bookkeeping (https://github.com/jupyterlab/galata/blob/main/packages/galata/src/galata.ts#L43-L73) we will need to make sure we can do similar with playwright/test. It might even have a better way to access current test name and other test info.

[fcollonval]

test is definitely meant to be overridden as this is the way to define fixture; doc example:

// example.spec.ts
import { test as base } from '@playwright/test';
import { TodoPage } from './todo-page';

// Extend basic test by providing a "table" fixture.
const test = base.extend<{ todoPage: TodoPage }>({
  todoPage: async ({ page }, use) => {
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo('item1');
    await todoPage.addToDo('item2');
    await use(todoPage);
    await todoPage.removeAll();
  },
});

test('should add an item', async ({ todoPage }) => {
  await todoPage.addToDo('my item');
  // ...
});

test('should remove an item', async ({ todoPage }) => {
  await todoPage.remove('item1');
  // ...
});