Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add exit intent example #453

Open
CypressCecelia opened this issue Nov 12, 2020 · 6 comments
Open

add exit intent example #453

CypressCecelia opened this issue Nov 12, 2020 · 6 comments
Assignees
@CypressCecelia

Comments

@CypressCecelia
Copy link

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");
});
});
@CypressCecelia CypressCecelia self-assigned this Nov 12, 2020
@praveenpandey02
Copy link

praveenpandey02 commented Jan 4, 2022 •
edited

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.

@praveenpandey02
Copy link

Hi @filiphric. Can you please advice how to deal with this case? I have already tried it but to no success.

@filiphric
Copy link

@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.

@praveenpandey02
Copy link

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:
image

@filiphric
Copy link

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

@praveenpandey02
Copy link

Your solution worked like a charm! I am still wondering why trigger('mouseleave') did not work but trigger('mouseleave', 0, 0) worked 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@CypressCecelia CypressCecelia

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@filiphric @CypressCecelia @praveenpandey02