Integrating Replay with other Cypress plugins

Occasionally, you may need to manually configure our plugin’s Cypress event handler callbacks because of unexpected interaction with other plugins.

Versions 1.2.0 and later

Starting in @replayio/cypress version 1.2.0, we’ve included a wrapper for Cypress’ on method that handles multiple event handlers more gracefully. This is often enough to fix

javascript
import {wrapOn, plugin} from "@replayio/cypress";
setupNodeEvents(on, config) {
  // wrap `on` with our multiple-handler-friendly version
  on = wrapOn(on);
  // call the replay plugin
  plugin(on, config);
  // call any other plugin
  [on, config] = deploySentinelPlugin(on, config)
}

Manually configuring plugin callbacks

If you are on an older version of the plugin or have a unique integration situation that isn’t addressed by wrapOn, you can import each of our handlers individually and invoke them manually.

Most of the callbacks expect the same arguments passed by Cypress. onBeforeBrowserLaunch is the only exception which also expects the config object to be passes as the first argument.

javascript
import { plugin, onBeforeBrowserLaunch, onAfterRun } from "@replayio/cypress";

setupNodeEvents(on, config) {
  on("before:browser:launch", (browser, launchOptions) => {
    // Replay's onBeforeBrowserLaunch requires the `config` variable
    // in addition to browser and launchOptions
    const updatedLaunchOptions = onBeforeBrowserLaunch(config, browser, launchOptions);

    // pass updatedLaunchOptions to other plugins or custom logic and
    // be sure to return the final updated launch options back to Cypress
    return updatedLaunchOptions;
  });

  on("after:run", results => {
    onAfterRun(results);
    // other plugins or suite-specific after:run logic
  });