[Bug] Can't use "type" command within shadow DOM

[sangmai350]

Current behavior:

Desired behavior:

It should work

Steps to reproduce: (app code and test code)

***We have an iframe that contain shadow dom. And we want to get element inside that iframe to handle, but not working at current.

Versions

cypress: 3.3.1

[abramenal]

HI @sangmai350
Thanks for submitting the first issue!

I believe the code you wrote is not quite correct as you're using regular cypress commands for lookup.
I believe it should look somehow like:

cy.shadowGet('iframe body .input .wrp input').type(''123123);

you can also try like

cy.shadowGet('iframe body .input .wrp input')
  .then($el => cy.wrap($el).type(''123123));

Please keep in mind if you have nested shadow elements, all of their selectors must appear in query for shadowGet – otherwise it'll be unable to get to their shadow roots.

Also, it might happen that cy.type command works with only elements attached to real DOM – in that case we'll need to implement a tiny custom command to support that. I would expect that case, but first need to ensure it's really needed, so please check that code example above and let me know if that works.

UPD: Alternative I thought about just letting cypress base commands to work not only with attached DOM elements, but that either may bring extra set of documentation about that or generally inconsistency (as not all the commands might be switched).

[sangmai350]

Curently error that i got when try to replicate your comments. Can you please take a look?

[abramenal]

@sangmai350
Right, totally forgot the context piece:
cy.document().shadowGet
so shadowGet works within the document context only (as per docs)

[abramenal]

And regarding .type command itself – it may appear that it'll work only with passing force: true option

[abramenal]

@all-contributors add @sangmai350 for bug

[allcontributors]

@abramenal

I've put up a pull request to add @sangmai350! 🎉