cypress-example-kitchensink
cypress-example-kitchensink copied to clipboard
cypress-io
add exit intent example
Add example for testing a modal or event that occurs when a user signals intent to exit the page by leaving the window with their mouse.
Need to create an example to test against, sample code below.
describe("Exit Intent test", function () {
it("should display modal on mouse exit", function () {
cy.visit("https://the-internet.herokuapp.com/exit_intent");
// Mouse into the window
cy.get("#flash-messages").trigger("mouseover");
// Mouse out of the window
cy.get("#flash-messages").trigger("mouseleave");
// This passes because the modal appears
cy.get(".modal");
});
});
Even I am having some issues to automate this scenario. This is one of the many things that I have tried so far but no success. The coordinates are just random trials:
cy.get("body").trigger("mousemove, {clientX: 505, clientY: 100}");
cy.get(".modal").should("be.visible");
I have also tried events like mouseout but all in vain.
Hi @filiphric. Can you please advice how to deal with this case? I have already tried it but to no success.
@praveenpandey02 do you have a page that you want to test this scenario on? Usually the leave intent is just some event listener on invisible element, so getting the right element and using .trigger() command should do the job. If not, it would really help to have the particular page available.
Yes @filiphric. This is the page I am trying to test: https://the-internet.herokuapp.com/exit_intent
From Developer Tools, I also found that mouseleave is the event listener. So I am doing this:
cy.get("body").trigger('mouseleave'); cy.get(".modal").should("be.visible");
It doesn't work. I get this:
I think the problem might be with the targeted element. Looking at the application, I see that mouseover and mouseout elements are actually bound to <html> tag, so you should either use cy.get('html') or cy.root() to target it. Also I found out that it makes a difference if you use .trigger('mouseleave', 0, 0) vs. .trigger(mouseleave)
here’s an example: https://github.com/filiphric/exit-intent
Your solution worked like a charm! I am still wondering why trigger('mouseleave') did not work but trigger('mouseleave', 0, 0) worked 🤔