Support for Native Browser Events

click

• simulated click fixes #2956
• on text-editable click in center move the cursor to the end
  • ensure possible in IE11 without causing side effects
• cy.body().type():
  • blur focused element, send events to body
• support .rightClick() 🆕

possible:

• move cursor to beginning if click('left') or click('topleft') ⚠️

not fixed:

• document.execCommand(“copy”) does not work in cypress #2851 (execCommand will not work with untrusted events)

type

• by default issues native events
• force:true skips actionability and uses simulated keys
• simulated keys have no delay ⚠️ change from 50ms
• native keys by default have no delay ⚠️ change from 50ms
• support new special .type() sequences: {moveToEnd},{moveToStart} 🆕
• support new special .type() sequences: {tab},{shift+tab} 🆕
• type follows focus ⚠️
• trusted native keyboard events 🆕
  • checkValidity() returns true instead of false for min length on input #1930

{moveToEnd}/{moveToStart}

• IE: setSelectionRange on all inputs
• chrome/ff: setSelectionRange except for email/number inputs. For those we use execCommand('selectAll') + selection.modify('...')
• branch logic based on browserFeatures object. For ex)

{
  setSelectionRangeOnAllInputTypes: true
}

focus

• .focus behavior on certain text editable elements
  • command should first focusable element ⚠️ change from subject
  • focus host contenteditable #2717

contenteditable

• treated as any other text-editable in the commands above.
• By default move cursor to end
• support {moveToEnd}/{moveToStart}
• support {tab}

file uploads 🆕

• proposal https://github.com/cypress-io/cypress/issues/170
• tbd

cy.hover 🆕

• proposal https://github.com/cypress-io/cypress/issues/10
• tbd

scroll behavior

• scroll into view only if needed ⚠️
  • use getElementFromPoint on the pixel needing click
• scroll into center by default ⚠️
• allow user to configure scroll position (center, bottom, top) Enable users to change the scrolling strategy #871 🆕 For IE:
  • scrollIntoView can’t center, so calculate coords and try to center it manually

Considerations / Research

select text command? 🆕

• allow user to make arbitrary text selection

mouse state

• tbd

~for mouse actions that involve mouse state:~

• in open mode, warn if potentially affected test
• includes click (since hover before click), hover, drag-and-drop

For IE11 & firefox, see branch issue-311-ie-ff

[kilrain]

Piling onto this mega-ticket: It’d be really great if Cypress fired the beforeInput event for cy.type. Without beforeinput support, my team is blocked from adopting Cypress as we use the Slate.js contenteditable library.

Related Slate ticket

From the docs;

beforeinput is not fired even though it is in the spec because no browser has adopted it.

The above isn’t true… Chrome, Edge and Safari have all implemented the spec and Firefox is well on their way.

[avallete]

For our current project, this is a major issue for our test coverages compared to using selenium. While I totally see other issue in the road map as important as well, do we have a timeline when this feature will be available?

I totally agree, I really do love Cypress solution very much. But as it is now, and for what I’ve tested it, I didn’t be able to really use it to implement e2e testing on an existing product without facing continuous bugs due to the ways events are handled. I’ve identified two bottleneck when trying to implements tests who came to me over and over:

1. Non-native events is one of the major ones, making emulating real user interaction very painful (hovering an element with your mouse, sending tab keys to the page, …)
2. The other issue is pretty related to the first one, but basically is due to the way event are emulated within Cypress and the typing of those issue here. This kind of error is less present, but I saw it almost every time I was working on a project written in TypeScript.

As stated in numerous issues related to this one, e2e testing should be as close as possible to the final user behavior. Cypress have a really great interface and debugging environment which is really good sugar when your writing tests. But the way is behave is, for now, too far from the ‘real user way’ that WebDrivers (or even library like puppeteer) simulate. Making it really difficult to achieve 80% e2e tests coverage on an existing product with it.

So, I will also be really interested to know when this feature is planned, and if anything can be done by the community to contribute to it.