Serenity/Playwright - Support Electron with Playwright

[hoanvu91]

Hi team,
I'm planning to migrate to using Serenity/Playwright but my application is using Electron, unfortunately BrowseTheWebWithPlaywright only accepts browser so I cannot start Electron with it. Is there a way we can use Electron with BrowseTheWebWithPlaywright as Playwright also supports Electron https://playwright.dev/docs/api/class-electron

[jan-molak]

Hello @hoanvu91! I haven't worked with Electron much, but from the docs you linked, it looks like Playwright for Electron has different APIs than Playwright for Web. It doesn't look like they were fully compatible.

In particular, it looks like Playwright Electron has a concept of a "window" rather than a "page"

const { _electron: electron } = require('playwright');

(async () => {
  // Launch Electron app.
  const electronApp = await electron.launch({ args: ['main.js'] });

  // Evaluation expression in the Electron context.
  const appPath = await electronApp.evaluate(async ({ app }) => {
    // This runs in the main Electron process, parameter here is always
    // the result of the require('electron') in the main app script.
    return app.getAppPath();
  });
  console.log(appPath);

  // Get the first window that the app opens, wait if necessary.
  const window = await electronApp.firstWindow();                    <- window instead of page
  // Print the title.
  console.log(await window.title());
  // Capture a screenshot.
  await window.screenshot({ path: 'intro.png' });
  // Direct Electron console to Node terminal.
  window.on('console', console.log);
  // Click button.
  await window.click('text=Click me');
  // Exit app.
  await electronApp.close();
})();

What you could do, though, is to implement a custom ability to InteractWithPlaywrightElectron.using(electron) similar to how BrowseTheWebWithPlaywright works. Abilities are basically wrappers around a low-level client like Playwright.

Happy to guide you through it if you'd like, and maybe work on a PR together to bring native support for Playwright/Electron to Serenity/JS?

[jan-molak]

Actually, upon closer inspection, Playwright Electron doesn't look that dissimilar from Playwright web.

Looks like Playwright Electron also uses Page and BrowserContext, so there's a good chance that the regular Serenity/JS Web interactions should work here as well.

So to use Playwright Electron, I think we'd need:

• a new factory method on BrowseTheWebWithPlaywright that accepts a playwright._electron object and Electron launch configuration instead of the playwright.browser object
• a new ElectronBrowsingSession object that can be injected into the parent BrowseTheWeb constructor
• the ElectronBrowsingSession would be implemented similarly to PlaywrightBrowsingSession and would be responsible for calling electron.launch(), returning the right window/page, and shutting down electron app after the test

That seems doable;

One thing I'm not sure about is how we'd test that integration. Playwright has tests like these and a couple of mini test apps. We could probably reuse some of those ideas.
Any new integration tests could be added here.

Would you like to take a stab at the PR?