Support Playwright component testing

[jan-molak]

Playwright Test offers component testing, which Serenity/JS could leverage to allow developers to write component-specific Screenplay interactions, to be reused for E2E tests.

For example, given standard component test taken from the Playwright docs:

test('event should work', async ({ mount }) => {
  let clicked = false;

  // Mount a component. Returns locator pointing to the component.
  const component = await mount(
    <Button title="Submit" onClick={() => { clicked = true }}></Button>
  );

  // As with any Playwright test, assert locator text.
  await expect(component).toContainText('Submit');

  // Perform locator click. This will trigger the event.
  await component.click();

  // Assert that respective events have been fired.
  expect(clicked).toBeTruthy();
});

We could have a Serenity/JS equivalent along the lines of:

test('event should work', async ({ mount, actor }) => {
  let clicked = false;

  const element = PageElement.from(await mount(
    <Button title="Submit" onClick={() => { clicked = true }}></Button>
  ));
  
  await actor.attemptsTo(
    Ensure.that(Text.of(element), includes('Submit')),
    Click.on(element),
    Ensure.that(clicked, equals(true)),
  )
});

Scope:

• New factory method PageElement.from(nativeElement) producing a PageElement wrapper around the native element
• Playwright Test actor fixtures working with Playwright CT
• Documentation: Official Playwright component testing tutorial #2280
• Serenity/JS Project Template for component testing

[jan-molak]

@viper3400 published a good tutorial at https://www.pilot-period.org/sjs-playwright-ct, which is now linked from https://serenity-js.org/community/resources/