Turbolinks issues when clicking links.

Current behavior:

I use Turbolinks in my application. If I click on two links after each other, where the link is present on both pages like a “Next” link, I get “xhr aborted” and it fails. It seems as cypress clicks the same link twice (not waiting for the xhr to finish)… If I add a cy.wait(0) between the clicks it seems to work. But it’s a bit of a hack 😃

Desired behavior:

It should wait for the next page and click the correct link.

Steps to reproduce:

Create a page with Turbolinks which links to another page (like a “Next” link in a pagination). On this other page, add the same link to a “Next” page.

Now, run a Cypress test where you click on the “Next” link twice. This will fail (might be a bit random).

Adding cy.wait(0) between the clicks seem to solve the problem for some reason.

Versions

Cypress: 3.0.1 Macos 10.13.4

[carlobeltrame]

For anyone still having issues with turbolinks and Cypress, I solved mine by using the following implementation of the above suggestions (goes into support/commands.js):

// Overwrite the Cypress .click() function
Cypress.Commands.overwrite("click", (originalFn, subject, ...args) => {
    var lastArg = args.length ? (args[args.length - 1]) : {}
    // Check if turbolinks could be active for this click event - could be improved
    if ((typeof lastArg !== 'object' || !lastArg['noWaiting']) && subject[0].tagName === 'A' && subject[0].getAttribute('href')) {
        // Wait for turbolinks to finish loading the page before proceeding with the next Cypress instructions.
        // First, get the document
        cy.document({ log: false }).then($document => {
            Cypress.log({ $el: subject, name: 'click', displayName: 'click', message: 'click and wait for page to load', consoleProps: () => ({ subject: subject })})
            // Make Cypress wait for this promise which waits for the turbolinks:load event
            return new Cypress.Promise(resolve => {
                // Once we receive the event,
                const onTurbolinksLoad = () => {
                    // clean up
                    $document.removeEventListener('turbolinks:load', onTurbolinksLoad)
                    // signal to Cypress that we're done
                    resolve()
                }
                // Add our logic as event listener
                $document.addEventListener('turbolinks:load', onTurbolinksLoad)
                // Finally, we are ready to perform the actual click operation
                originalFn(subject, ...args)
            })
        })
    } else {
        // Not a normal click on an <a href> tag, turbolinks will not interfere here
        return originalFn(subject, ...args)
    }
})

Alternatively, you can disable turbolinks while running in Cypress, by canceling each turbolinks:click event (this goes into support/index.js):

Cypress.on('window:load', $window => {
    $window.document.addEventListener('turbolinks:click', event => {
        event.preventDefault()
    })
})

[sasavuk]

@carlobeltrame Thank you, that’s a great solution. Our team is using it by passing turbo as an option like so:

Cypress.Commands.overwrite("click", (originalFn, subject, options) => {
  // Check if turbo could be active for this click event - could be improved
  if (options?.turbo) {
    // Wait for turbo to finish loading the page before proceeding with the next Cypress instructions.
    // First, get the document
    cy.document({ log: false }).then(($document) => {
      Cypress.log({
        $el: subject,
        name: "click",
        displayName: "click",
        message: "click and wait for page to load",
        consoleProps: () => ({ subject: subject }),
      });
      // Make Cypress wait for this promise which waits for the turbo:load event
      return new Cypress.Promise((resolve) => {
        // Once we receive the event,
        const onTurboLoad = () => {
          // clean up
          $document.removeEventListener("turbo:load", onTurboLoad);
          // signal to Cypress that we're done
          resolve();
        };
        // Add our logic as event listener
        $document.addEventListener("turbo:load", onTurboLoad);
        // Finally, we are ready to perform the actual click operation
        originalFn(subject, options);
      });
    });
  } else {
    return originalFn(subject, options);
  }
});

cy.get("whatever").click({turbo: true});