Chrome Video Recording, Mouse Improvements, and More in Cypress 3.5 & 3.6

Last week we released Cypress 3.6 shortly after the release of version 3.5, which was a big release that introduced various enhancements such as Chrome video recording, mouse event improvements, and included many bug fixes. Check out all the changes within 3.5 and 3.6 changelogs, but for now let's dive into some notable additions within these releases.

Chrome Video Recording

It is now possible in Cypress 3.5 to record video of test runs within Chrome family browsers. This is an immensely helpful feature that enables you to visually see what happened within the browser during CI runs. Many users use Chrome in their local Cypress workflow and used Electron within their CI workflow in order to see video recordings of their test run, but with 3.5 they can now use the same browser in both environments.

Pass the --browser flag to specify the desired browser to launch for a test run. For example to launch an installed Chrome browser:

cypress run --browser chrome

Mouse Improvements

We've improved the .dblclick() command, and added the new .rightclick() command.

.dblclick()

The default click position when triggering a double click was always center, but now .dblclick() accepts a position argument to specify other click positions such as topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight. For example, to trigger a double click at the top right corner of an element:

cy.get('.gallery').dblclick('topRight')

If you'd like to be even more exact you can pass in x and y coordinates to specify the desired double click position:

cy.get('.photo-item').dblclick(50, 35)

Note that the (0,0) coordinate is positioned at the top-left of the element.

In addition to these new arguments, the mouseover, mousemove, mouseout, pointerdown, pointerup, and pointermove will be emitted during double and single click (via .click()) events.

.rightclick()

Cypress 3.5 introduced the .rightclick() command, which has similar arguments and usage patterns as .dblclick(). Please do realize that .rightclick() will not open native browser context menus, and exists to assist with the testing of events related to a right click such as the contextmenu event.

The .rightclick command must be applied to a DOM element, which has two implications:

1. It cannot be chained off the cy. global:

cy.rightclick('.post-item') // ❌ incorrect usage

2. Can only be attached to chains that yield a DOM element:

cy.window().rightclick() // ❌ incorrect usage

User Your System's Node

Cypress has always shipped a bundled version of Node (v12.0.0 as of Cypress v3.5) to execute the code within your pluginsFile and to build the supportFile along with the test files in your integration folder. However, now you can direct Cypress to utilize your system's Node version by setting the new nodeVersion configuration to system within your configuration file.

This new configuration is especially helpful when trying to load and use dependencies that were built using a different version of Node than the one bundled with Cypress. You may have encountered this limitation when trying to load node-sass (which requires LibSass compilation) or database drivers powered by native extensions.

Utilizing this new configuration means you can run Cypress tasks (via cy.task()) with your system's Node to execute code outside of the browser context, which is helpful for:

• Manipulating a database (seeding, reading, writing, etc.)
• Storing state in memory that you want persisted (since the driver is fully refreshed on visits)
• Performing parallel tasks (like making multiple HTTP requests outside of Cypress)
• Running an external process (like spinning up a WebDriver instance of another browser like Firefox, Safari, or Puppeteer)
• ...any other interaction outside of the browser to facilitate testing

Custom Config File Path

The cypress.json file at the root of your project directory is the default place for your Cypress configurations, however you can now specify a custom JSON file via the --config-file CLI flag:

cypress run --config-file my-settings/my-custom-config.json

This is helpful for using different configurations based off the context or environment of your test runs. For example:

// A dedicated config file for an admin portal
cypress run --spec "cypress/integration/admin-portal.spec.js" --config-file settings/admin-portal-config.json

// A second config file for a user portal
cypress run --spec "cypress/integration/user-portal.spec.js" --config-file settings/user-portal-config.json

You could also specify a configuration file that is shipped within a shared module amongst your team. There are various use cases for this setting.

Other Notable Enhancements

• You can now pass an Array of glob patterns, in addition to a String pattern for the testFiles configuration.
• cy.viewport() accepts size-presets for some new devices: iphone-xr, iphone-x, samsung-s10 and samsung-note9.
• cy.visit() now accepts a query string (qs) option representing an object of query parameters. For example:

  // visits http://example.com/users?page=1&admin=true
  cy.visit('http://example.com/users?page=1', {
    qs: { admin: true }
  })
  

• .screenshot() now accepts a padding argument when screenshotting elements that can expand or contract the area that is screenshotted in your application.
• New keyboard shortcuts to speed up your workflow within the Test Runner browser window:
  • s: stop running tests
  • r: rerun tests within the active spec
  • f: bring the "specs" window into focus

These were only some notable changes, make sure to check out the full changelog to see all the improvements and bug fixes. Feel free to open an issue on GitHub if you do find a bug or are facing a reproducible issue. Leave a comment below if you have any feedback or reach out to our Gitter community if you have questions.

See you at the next release...