[Feature] Support @playwright/test in electron

[sumitnegi7]

We are using playwright to develop web app and electron application. In web apps it works pretty well but in electron some features work some does not like multiple project support does not work, code coverage does not work. It would be really nice if playwright officially supports electron applications also.

[dbjorge]

Our team is very interested in this as well (for Accessibility Insights for Android, which is an electron app despite the name).

This is likely to become a bigger market gap to fill in the near future because the leading competitor to Playwright for Electron, Spectron, has an open issue tracking how they have no active maintainers and will break with Electron v14+. Because of this, our team would really like to prioritize a migration off of Spectron (we're probably going to do that even if we have to run Playwright using a different runner, but it would be great to be able to switch to @playwright/test as we're migrating anyway)

[pavelfeldman]

Despite the name, @playwright/test is a general purpose test runner. What makes it a Playwright runner is a single 200 line file that defines all the useful fixtures that are passed into the test. So adding support for Electron would mean adding a probably smaller fixture file that covers your scenarios.

You could either do it in a PR, or you could tell us what fixtures you'd like to have. I would imagine

• you'd want to specify the app in the project config
• get the electronApp fixture in each test
• have a mode where each test gets a fresh app and a mode where you start once and all tests reuse the app
• get a trace/video for all the browser windows during the test run

Is there more? Those above are really trivial...

[sumitnegi7]

@pavelfeldman the first point you mentioned you'd want to specify the app in the project config already work just the multiple project config setting is not working properly.

Example:

  projects: [
    {
      name: "Desktop Screen",
      use: {
        viewport: devices["Desktop Chrome"].viewport,
      },
    },
{
      name: "Desktop Screen",
      use: {
        viewport: devices["Desktop Chrome"].viewport,
      },
    },
{
      name: "iPhone Screen",
      use: {
        viewport: devices["iPhone 12"].viewport,
      },
    },

{
      name: "iPadScreen",
      use: {
        viewport: devices["iPad Pro 11"].viewport,
      },
    },
  ],

Currently when i take screenshot using the above projects the screenshots are same for all project and can you hide the screen/window like we do in the case of browsers by setting {headless:true}.

[pavelfeldman]

@sumitnegi7 I think we hit some misunderstanding here. I thought this was about using @playwright/test for testing Electron. I think @dbjorge is on the same page with me here. In the scope of this, I don't understand your last comment.

[shadow-light]

Anyone looking to do this, it's been implemented in Playwright's own tests already: https://github.com/microsoft/playwright/tree/master/tests/electron

More integrated support with the CLI etc would be great though

[sumitnegi7]

@sumitnegi7 I think we hit some misunderstanding here. I thought this was about using @playwright/test for testing Electron. I think @dbjorge is on the same page with me here. In the scope of this, I don't understand your last comment.

@pavelfeldman i meant that it is not working in headless mode it always launches the election application window.

[UberMouse]

Does Electron support a headless mode via a CLI flag like browsers? I thought not. Unless you're creating multiple BrowserWindows in multiple places in the main code it's trivial to implement headless support yourself, just slap show: false on the BrowserWindow options.

[UberMouse]

I've cobbled together an @playwright/test fixture/config that works with Electron from looking at the Electron tests in this repository https://gist.github.com/UberMouse/facbe751c3ecb9b31e8b4f6221567b7a

However, I can't get it to capture traces automatically. I'm guessing it's because this fixture in the base test function doesn't work properly in an Electron environment. Hence why I tried overriding the context fixture since Electron uses .context() instead of .newContext() but it doesn't seem to get called so I'm not sure what's going on.

For now I'm just capturing them manually

  test.beforeEach(async ({ context }, testInfo) => {
    if ((process.env.CI && testInfo.retry === 1) || !process.env.CI) {
      await context.tracing.start({ screenshots: true, snapshots: true });
    }
  });

  test.afterEach(async ({ context }, testInfo) => {
    if ((process.env.CI && testInfo.retry === 1) || !process.env.CI) {
      const testPath = testInfo.outputPath("trace.zip");
      await context.tracing.stop({ path: testPath });
    }
  });

Which works fine. (actually the tests don't seem to be retrying even with retries set to >0)

Any ideas @pavelfeldman ?