Cypress · Browser testing end to end
How do you trigger browser events in Cypress?
Short answer
Use .trigger for DOM events such as keydown, mousedown or mouseover, and .type or .click for realistic user actions. Cypress dispatches synthetic events, so match the event the application actually listens for.
Cypress provides high-level actions such as click, type and select for common interactions. When you need a specific event, .trigger dispatches it with optional properties. The test should use the same event the application handles, otherwise the handler never runs.
cy.get("[data-cy=menu]").trigger("mouseover");
cy.get("[data-cy=menu-item]").should("be.visible");
cy.get("[data-cy=search]").type("lamp{enter}");
cy.get("[data-cy=card]").trigger("mousedown", { which: 1 });
cy.get("[data-cy=card]").trigger("mouseup", { which: 1 });Realistic actions versus raw events
- Prefer .click and .type when they express the user's intent
- Use .trigger for hover, contextmenu, custom events and specific key events
- Pass event properties such as key, which or clientX when the handler reads them
- Synthetic events do not reproduce every native browser behaviour
- Use force only when an overlay genuinely blocks interaction and the blocker is not the subject
A common mistake is triggering click on a parent when the app listens on a child, or using keydown when the app listens for keyup. Read the component's handler. If a test needs real OS-level input, such as a native file picker, Cypress cannot fully reproduce it; use the supported API for that interaction instead.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between click and trigger with a click event?
- 2How do you trigger a keyboard shortcut?
- 3When is force acceptable?
- 4Why might a CSS hover not work with trigger?
Say it in the interview
For normal interactions I use click and type because they model what the user does. For hover, context menus, shortcuts or custom events I use trigger with the relevant properties. I check which event the component actually listens for, since firing the wrong one silently does nothing. I use force only when a real overlay blocks the action and the overlay is not what I am testing.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Cypress mock interview and get scored feedback on depth, clarity and confidence.