Playwright: [Feature request] Support browser extension loading in Firefox

Created on 19 Jun 2020 · 10Comments · Source: microsoft/playwright

I'm trying to perform extension automation using playwright against Firefox. Below is my sample code

import {
    firefox
} from 'playwright';

const extensionPath = "/Users/ashok_mb/Documents/xBP/Learner/playwright_spike/ff_extn/extension.xpi"
const userDataDir = '/Users/ashok_mb/Library/Application\ Support/Firefox/Profiles/data_dir';
firefox.launch({
            headless: false,
            firefoxUserPrefs: {
                "xpinstall.signatures.required": false,
                "extensions.langpacks.signatures.required": false,
            },
            args: [
                `--disable-extensions-except=${extensionPath}`,
                `--load-extension=${extensionPath}`
            ]
        });

With above code, the browser launches, but does not load extension with it. Can someone please advice on how to launch Firefox with extension using playwright code ?

Please help. Thanks!

Source

mukunduashok

👍1

Most helpful comment

Actually, you can run Firefox Extensions with Playwright, but it requires a little bit of a trickery:

using web-ext to actually run firefox with permissions
parsing firefox stdout to get juggler endpoint
using endpoint to connect playwright onto it

The full repository is here: aslushnikov/demo-playwright-with-firefox-web-extension

The script to run a webextension:

const path = require('path');
const {firefox} = require('playwright');
const webExt = require('web-ext').default;

(async () => {
  // 1. Enable verbose logging and start capturing logs.
  webExt.util.logger.consoleStream.makeVerbose();
  webExt.util.logger.consoleStream.startCapturing();

  // 2. Launch firefox
  const runner = await webExt.cmd.run({
    sourceDir: path.join(__dirname, 'webextension'),
    firefox: firefox.executablePath(),
    args: [`-juggler=1234`],
  }, {
    shouldExitProgram: false,
  });

  // 3. Parse firefox logs and extract juggler endpoint.
  const JUGGLER_MESSAGE = `Juggler listening on`;
  const message = webExt.util.logger.consoleStream.capturedMessages.find(msg => msg.includes(JUGGLER_MESSAGE));
  const wsEndpoint = message.split(JUGGLER_MESSAGE).pop();

  // 4. Connect playwright and start driving browser.
  const browser = await firefox.connect({ wsEndpoint });
  const page = await browser.newPage();
  await page.goto('https://mozilla.org');
  // .... go on driving ....
})();

Hope it helps!

aslushnikov on 23 Jun 2020

❤4 👍2 🎉1

All 10 comments

Team, Can someone please help ?

mukunduashok on 22 Jun 2020

😕1

Hi @mukunduashok, apologies for the late response. Extension automation is not supported at this stage. I'll repurpose this issue as a feature request. Thanks for filing it.

arjunattam on 22 Jun 2020

Actually, you can run Firefox Extensions with Playwright, but it requires a little bit of a trickery:

using web-ext to actually run firefox with permissions
parsing firefox stdout to get juggler endpoint
using endpoint to connect playwright onto it

The full repository is here: aslushnikov/demo-playwright-with-firefox-web-extension

The script to run a webextension:

const path = require('path');
const {firefox} = require('playwright');
const webExt = require('web-ext').default;

(async () => {
  // 1. Enable verbose logging and start capturing logs.
  webExt.util.logger.consoleStream.makeVerbose();
  webExt.util.logger.consoleStream.startCapturing();

  // 2. Launch firefox
  const runner = await webExt.cmd.run({
    sourceDir: path.join(__dirname, 'webextension'),
    firefox: firefox.executablePath(),
    args: [`-juggler=1234`],
  }, {
    shouldExitProgram: false,
  });

  // 3. Parse firefox logs and extract juggler endpoint.
  const JUGGLER_MESSAGE = `Juggler listening on`;
  const message = webExt.util.logger.consoleStream.capturedMessages.find(msg => msg.includes(JUGGLER_MESSAGE));
  const wsEndpoint = message.split(JUGGLER_MESSAGE).pop();

  // 4. Connect playwright and start driving browser.
  const browser = await firefox.connect({ wsEndpoint });
  const page = await browser.newPage();
  await page.goto('https://mozilla.org');
  // .... go on driving ....
})();

Hope it helps!

aslushnikov on 23 Jun 2020

❤4 👍2 🎉1

Thanks much @aslushnikov

Wanted to know if with web-ext, do we have an option to test the extension as such like for Chrome ?(https://github.com/microsoft/playwright/blob/master/docs/api.md#working-with-chrome-extensions)

mukunduashok on 23 Jun 2020

do we have an option to test the extension as such like for Chrome ?

@mukunduashok nope, this part of the puzzle is not in place yet. Do you need it?

aslushnikov on 23 Jun 2020

do we have an option to test the extension as such like for Chrome ?

@mukunduashok nope, this part of the puzzle is not in place yet. Do you need it?

@aslushnikov Yep. It would be a great feature for browser extension automation users. Currently we solve it using web sockets and an automation flavour of extension connected to the web socket. It would be great to have it in the library itself, so automation engineers need not setup a separate extension for automation testing.

Let me know if this can be done please. I can raise a feature request if required. Thanks!

mukunduashok on 23 Jun 2020

I can raise a feature request if required. Thanks!

@mukunduashok Yeah, please raise a feature request. We've heard there's some interest for web extensions, but it's unclear how many developers actually care and if it's worth investing there.

aslushnikov on 8 Jul 2020

👍3

Thanks @aslushnikov

Created a feature request - https://github.com/microsoft/playwright/issues/2874

mukunduashok on 8 Jul 2020

👍1

Hi - this will be especially useful for decentralised apps using crypto wallet software such as meta mask and blockstack connect. Hope this makes it into your workflow.

radicleart on 26 Sep 2020

As per https://github.com/microsoft/playwright/issues/2644#issuecomment-647634774, extensions automation is outside of the scope for Playwright, apologies for building the wrong expectations for this one.