Brainstorm: Can we automatically attach pages launched locally, with minimal code change?

[Bnaya]

Given the following example:
https://github.com/xtermjs/xterm.js/blob/master/test/api/MouseTracking.api.ts#L213-L219
The test runner is mocha
The browser and page are local variables in the module scope, and not global.
The before call is nested inside the describe
The page is created once, and re-used in all of the tests.

We need a way to wrap the page that is not based on global variables (patch playwright?), but also to associate it with the specific running test of mocha.

[benjamingr]

I think we should probably just expose attach.

[gioragutt]

    const currentTestInfo = getCurrentTest();

    const startTestParams = {
      runId: 'mock_invocation_id',
      projectRoot: path.resolve(__dirname, 'testsResults'),
      fullName: currentTestInfo.fullName,
      description: currentTestInfo.description,
      fullSuitePath: __filename,
    };

    ...

    const overriddenFeatures: PossibleUserSettings = {
      features: {
        html: true,
      },
    };

    const { page: playedPage, endTest } = await attach(
      {
        page,
        startTestParams,
        activeFeatures: resolveSettings(overriddenFeatures).features,
      },
      mockedDateConstructor
    );

This is a lot of code for something you'd really want to be:

before(async function(): Promise<void> {
    browser = await browserType.launch({
      headless: process.argv.indexOf('--headless') !== -1
    });
    // yes this is ugly I know but for the sake of the example.
    page = await attach(await (await browser.newContext()).newPage());
    await page.setViewportSize({ width, height });
  });

The user has A LOT to fill in when it's not set up by hooking into the test runner 🤷🏻‍♂️