Cypress `tap` events with Framer Motion

Photo by Kazuky Akayashi on Unsplash

On a new product at work, we’re using Framer Motion for animated container transitions. We also have Cypress for running integration tests in a Jenkins build via Docker Compose (the client app runs in one container, the Cypress process in another).

Cypress has great documentation, and getting started was easy. However, I hit a strange issue where a test would work locally via cypress open and cypress run , but would fail in the docker-compose run of the test suite. After viewing the Cypress run with XQuartz, the cy.click() events were indeed causing no change to the UI.

The Framer component <motion.div /> takes an onTap handler, similar to onClick . When running Chrome 81 in the local Cypress runner, cy.click() events appear to work, but in the docker container runningElectron 61 (headless) , they do not.

After digging around the framer source code, I found the useTapGesture function, which uses addPointerEvent and usePointerEvent , which end up using some telling utility functions:

With this, it became clear that onTap wasn’t necessarily responding to the click events fired in the Cypress tests. So, I changed

cy.get('[data-testid=some-selector]').click()

to

cy.get('[data-testid=some-selector]')
  .trigger('pointerdown')
  .trigger('pointerup')

and BOOM!

tl;dr

If you have some sophisticated DOM interactions in a Cypress-tested app, know what event types are being leveraged and swap click for trigger when needed.

Over and out.