Support for Native Browser Events

[brian-mann]

click

• simulated click fixes [moved] 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 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 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 Cannot focus element inside content editable element #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 Adding Ability to Submit File to Input Element From Local Filesystem (file upload) #170
• tbd

cy.hover 🆕

• proposal Add cy.hover() #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 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

[brian-mann]

With the release of Chrome 63 we can now finally do this.

We'll begin by adding { native: true } to existing commands for users to opt into using the native variants of them.

From there we'll add new commands for file uploads, etc.

We can also expose a low level command for talking directly to the debugger protocol to expose all of the other power and goodness that extends well beyond WebDriver.

[bahmutov]

👏👍🎉

…

Sent from my iPhone

On Oct 26, 2017, at 18:56, Brian Mann ***@***.***> wrote: With the release of Chrome 63 we can now finally do this. We'll begin by adding { native: true } to existing commands for users to opt into using the native variants of them. From there we'll add new commands for file uploads, etc. We can also expose a low level command for talking directly to the debugger protocol to expose all of the other power and goodness that extends well beyond WebDriver. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[mateatslc]

good news, sounds exciting! 👏

[dziamid]

Awesome! Is it devtools compatible? Do you plan to eventually deprecate the not-native commands?

[brian-mann]

It is dev tools compatible.

We will definitely not ever deprecate the non-native commands because they are actually more precise (as long as they work correctly). Non native can be issued synchronously and it's impossible to miss coordinates.

Native events will always be async, so if we ask for them to fire at a specific coordinate, it will take take before it's actually issued. If there are state changes by then - you have a failure.

We'll likely have a few native commands only like .attach() or something. But then enable you to opt into the native commands for commands we already have.

[dwelle]

Does this mean we'll able to invoke and test :hover/:active pseudo classes?

[brian-mann]

Yes

[zth]

Is there a plan to integrate file uploading better with native events landing? There's a comment about it here cut I cannot seem to find any more information about it.

[atomboulian]

My question is the same as @zth. Seems like this would be true, but I just want to confirm. There are medium articles talking about file uploads not being supported, even in February of this year.

[jpike88]

Just curious where things are at? I can't get a good reading on how close this functionality is to being ready or if it is already available

[brian-mann]

@Bkucera is starting on this work this week. We've gone through the game plan and will begin implementing this and all of the other work orthogonal to native events.

[egucciar]

@brian-mann will this change some of the known "permanent limitations" of Cypress? One example being something like performance testing, which with integration with Dev Tools could totally be within reach

[Badlapje]

fixed it, thx @beaugunderson !

[yanfengliu]

Any progress on this? The minLength validation for <input> tag still cannot be triggered in Cypress 6.1

[dmtrKovalenko]

Mostly all native events are implemented at https://github.com/dmtrKovalenko/cypress-real-events

[laerteneto]

Hey guys, do we have some updates on this? I am curious to see when we will get this natively implemented.
https://github.com/dmtrKovalenko/cypress-real-events looks very interesting indeed.

[jennifer-shehane]

Check our roadmap for what we're currently working on. We're working on some larger features now, but this isn't one of them unfortunately.

We suggest using https://github.com/dmtrKovalenko/cypress-real-events in the meantime.

[ronit15]

In what version cy.type('{tab}') is supported? @eventualbuddha

[hg13190]

For interacting with native elements while using cypress I have used a work around via which I was able to achieve it, by running tests in headed mode (or via cypress runner) and robotjs.
Email me on hag13190@gmail.com to discuss details

[mryellow]

An interim release which delivers tab support would probably be a good idea. Leaving such a critical feature which has been demanded for 6 years hanging while other things are added is non-ideal.

[gyurielf]

An interim release which delivers tab support would probably be a good idea. Leaving such a critical feature which has been demanded for 6 years hanging while other things are added is non-ideal.

And it's still actual. :(

[rkrisztian]

I recently heard about WebDriver BiDi aiming to become the future of cross-browser automation, and it's something Cypress might want to consider for future implementation of native events. As we know, CDP was not really made for testing, and we're lucky that it's also supported in Firefox. But if for example, we want to support other browsers like Safari, then CDP won't be enough. (Plus, I also think that native events reflect more reliably what a real user does, and I find more value in realistic testing, but with the super handy UI of Cypress.)

I know that Cypress does not want to be Selenium, however they do not want to compete with other tools but rather collaborate with them. For more info please see: https://youtu.be/lpWwcWsyjQs?t=1310