Blind run

In the following, we run the most basic monkey test configuration:

headless_app$run_js("gremlins.createHorde().unleash();")

The result is shown in the GIF below:

Optimized testing

Does it really makes sense to invoke all species given we only have a slider? Absolutely not! We can use the following code to test only the slider input.

The best species to perform this task is the toucher, which is able to randomly move the slider input. The documentation specifies many events such as tap, doubletap, gesture and multi-touch. It seems more relevant to apply only gesture, consisting of dragging the slider on the x-axis (note: gesture also considers the y-axis, which does not make sense for the slider. While this is a gremlins.js limitation, it won’t prevent our test from running).

We target the slider handle by its class, irs-handle single, to ensure we don’t touch any other element. We also increase the number of maximum touches from 2 to 200. Note the HTML inspector, which allows us to seamlessly inspect and extract any class or id. The log parameter enables logging in the JavaScript console:

const customToucher = gremlins.species.toucher({
  // which touch event types will be triggered
  touchTypes: ['gesture'],
  // Touch only if element has class irs-handle single
  canTouch: (element) => element.className === 'irs-handle single',
  log: true,
  maxTouches: 200
});

We can create our custom horde and disable the FPS and Alert mogwais gremlins since they are not relevant to our case study:

const horde = gremlins.createHorde({
  species: [customToucher],
  mogwais: [gremlins.mogwais.gizmo()]
});

As unleash is a promise, we can execute a function right after it, in order to check whether the script ran as expected.

horde
  .unleash()
  .then(() => {
    console.log('Gremlins test success')
});

If you are running on CI/CD and can’t see the Chrome Devtools, you can still display the logs. The console.log output will be captured by the {shinytest2} logs with headless_app$get_logs() allowing you to debug and refine the monkey testing script.

As monkey testing lasts about 10s, you often want to take a screenshot of the ongoing attack:

headless_app$run_js("
  const customToucher = gremlins.species.toucher({
    // which touch event types will be triggered
    touchTypes: ['gesture'],
    // Touch only if element has class irs-handle single
    canTouch: (element) => element.className === 'irs-handle single',
    log: true,
    maxTouches: 200
  });

  gremlins.createHorde({
    //randomizer: new gremlins.Chance(1234), // repeatable
    species: [customToucher],
    mogwais: [gremlins.mogwais.gizmo()]
  }).unleash().then(() => {
    console.log('Gremlins test success')
  });
")

Sys.sleep(3)
headless_app$get_screenshot("gremlins.png")

Should you run multiple attacks, it is always good practice to reset Shiny inputs between attacks, or even close the current headless app and restart a new session:

headless_app$set_inputs(obs = 500)

If you run on CI/CD, don’t forget to clean the session after tests are completed, particularly if you set the shiny.port option, as you can’t have 2 apps running on the same port:

headless_app$stop()