Firefox is your Marionette

Get fun using the Firefox unit test system

Firefox is your Marionette

Daniele Scasciafratte

Daniele

My personal rules of automation

Browsers and scripting


What do you think that is most fun and powerful?

WebExtensions

  1. Previous Fosdem's Talk: 2017, 2018

Shell scripting

  1. Command Line Options

Unit Test/DevTools protocol

The Marionette in IT world

Marionette is the remote protocol that lets out-of-process programs communicate with, instrument, and control Gecko-based browsers.

It provides interfaces for interacting with both the internal JavaScript runtime and UI elements of Gecko-based browsers, such as Firefox and Fennec. It can control both the chrome- and content documents, giving a high level of control and ability to replicate, or emulate, user interaction.

https://firefox-source-docs.mozilla.org/testing/marionette/marionette/

How to use it?

Enable Marionette

How works

Marionette is a bridge that use sockets internally to communicate with Firefox and require a specific Firefox build.

Offers a full control of Firefox also of other stuff that are not included in DevTools protocol because it is used in Firefox for testing.

Also it is the same technology used on the various Firefox version like Firefox for Android.

Marionette is an implementation of the WebDriver standard but wrapped in this "framework" that is stable, require only a supported Firefox version.

My story

As Mozillian (and many other in this room) we prefer to use Mozilla technologies like Firefox DevTools.
I try to do the same also on my daily job in my (little) company.

How many of you evangelism about Mozilla technologies during your daily tasks?

Let's see different tools that I did for my job but also to help other OpenSource communities with Marionette.

My usual dev workflow

  1. Analyze the page, if
    • I need to parse in realtime because of other steps
    • I can do the parse later of what I am looking for
  2. Analyze the flow, If
    • the tool require different parameters, add a config file
    • I can open manually the url to script
  3. Evaluate if I need the headless mode
  4. If will be used by others, avoid hardcoded stuff
  5. Write in the readme always the settings to change in Firefox

https://github.com/Mte90/BulkRejectGP

https://github.com/CodeAtCode/wp-ff-exp-imp

Demo time

How works quickly

			from marionette_driver.marionette import Marionette
			from marionette_driver import By, Actions
			# Connect to Firefox
			client = Marionette(host='localhost', port=2828)
			client.start_session()
			[...]
			posts = client.find_elements(By.CSS_SELECTOR, 'td.title a.row-title')
			for post in posts:
			Actions(client).middle_click(post).perform()
			[...]
			export.write(client.page_source.encode('utf-8'))
			[...]
			client.switch_to_window(client.window_handles[-1])

You can also inject JavaScript, switch between tabs to change the focus, autofill username/password etc.

Another future example project

Resources

  1. Marionette, Act 1-2 by Anjana Sofia Vakil
  2. https://firefox-source-docs.mozilla.org/testing/marionette/marionette/
  3. https://marionette-client.readthedocs.io/en/master/

Question?

Red panda (Firefox)

Daniele Scasciafratte - @Mte90Net
Slides: https://mte90.tech/Talk-Marionette/