Selenium feature

,
1

Selenium with Firefox Configuration Guide for Repertoire 2024/2025

Introduction

This guide provides detailed instructions for configuring Selenium with headless Firefox in Ambience/Repertoire 2024 and 2025, including setting up the GeckoDriver, adjusting application settings, and applying a custom CSS style for consistent rendering.

Available Versions

  • Repertoire 2024: Supports elx-rml-runtime_3-8.0.7.jar
  • Repertoire 2025: Supports elx-rml-runtime_3-8.0.12.jar

Prerequisites

Installation Steps

1. Set Up GeckoDriver

  • Download the appropriate GeckoDriver version.
  • Place the driver in the ext/ directory of Repertoire Designer or Server.

2. Update Configuration (application.conf)

  • Locate and edit the etc/application.conf file.
  • Add the following configuration:
elixir.rml.image.scripted-can-grow = true

com.elixirtech.selenium {
  firefox-driver = "/<full-path>/ext/geckodriver"
  firefox-profile = [
    "layout.css.devPixelsPerPx=2"
  ]
  firefox-args = [
    "--headless"
  ]
}
  • Ensure the firefox-driver path points to the correct location of your GeckoDriver.

3. Set Up Custom CSS Style (Optional)

  • Create a style.html file with your desired CSS:
    style.html must exist on all environment regardless for this to work
<style>
  table {
    border-collapse: collapse;
    width: 100%;
    border: 2px solid rgb(183, 116, 30);
    background-color: #e27c0e;
  }

  th, td {
    border: 1px solid rgb(183, 86, 31);
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #df640b;
    color: #de9605;
    font-weight: bold;
  }
</style>
  • Update application.conf to use this CSS file:
com.elixirtech.selenium.firefox-head-file = "/<path-to-file>/style.html"
  • Restart the Repertoire Server or Designer for the changes to take effect.

Script Usage in Designer

Download sample Link

Sample Script (getImageAndHeight)

importClass(Packages.com.elixirtech.selenium.FirefoxRunner);

var html = "<div style='color: blue; background-color: yellow; border: 3px solid red; font-size:2rem;'>" +
  "Hello World<br>This time spanning multiple lines<br>so that we can test growth " +
  "and the height<br>adjustment while rendering" +
  "</div>";

var scale = 2;
var ih = FirefoxRunner.getImageAndHeight(this.getWidth() / 20 * scale, html);
this.setHeight(ih.getHeight() * 20 / scale);
ih.getImage();

render begin script(must have):

// this comment must exist,
// else "this" is not available in the image script.
  • Set the scale value to match the layout.css.devPixelsPerPx value in your configuration.
  • Ensure your script has a “Render Begin” comment to avoid execution issues.

Understanding the Script

  • The script calculates the image width based on the component width.
  • It then uses the height value to set the component height, maintaining a consistent scaling factor.

Troubleshooting

  • Ensure the GeckoDriver path in application.conf is correct.
  • Make sure the CSS file is present on all machines where Repertoire is running.
  • Restart the server/designer after making any CSS or configuration changes.