Cypress: Ace editor (cloud 9) fails cy.type() with element is covered

[harshithmullapudi]

Is this a Feature or Bug?

Cannot type in textarea using Cypress.

Current behavior:

As it has cover of div elements cypress gives an error.

Desired behavior:

Cypress should be able to type in the ace editor

This is the error that occurs if we use textarea with cypress type

[harshithmullapudi]

This is the error that occurs if we use textarea with cypress type

[jennifer-shehane]

You are using https://ace.c9.io/? Could you reproduce this issue, maybe trying to type on their example site, so that we have a reproducible example?

[harshithmullapudi]

Yeah I have tried the same in website ( https://ace.c9.io/ ) and encountered the same problem
Tried to type in textarea using the class of text area which is '.ace_text-input'

cy.get(".ace_text-input").first().type("#include")

And the cypress error is

[kartikupreti]

yeah even I faced the same issue, but since I have it only in one text box I worked around as below-

cy
  .window()
  .its('myjs.path.expressionEditor' as any)
  .invoke('value', 'text to be entered');

Hope it helps you

[Bkucera]

this seems like a visibility bug, so I'm removing this from the cy.type() improvements epic.

[ronlawrence3]

I had the thought to use cy.focused() to work around this issue...

Clicking on the ace editor, while this focuses the input in the real browser, seems to have no impact in cypress.

So, I tried having my application expose a button to programmatically bring up the editor's search dialog. Then I made cypress close it, which left the editor focused. then I used cy.focused() to type.
This worked great, but only in chrome or electron, not in headless.
Unfortunately, this will cause a failure in our CI system, so will not work.

Any other ideas for a workaround? I'm not sure how to use the window workaround above...

[jhoobergs]

It works fine by using {force: true} on the type command.

[Bkucera]

@ronlawrence3 I'll look into the failure in headless, it's probably a window focus issue

[jennifer-shehane]

This one is tricky. It actually is being covered by the other element,

it('should type in input', function () {
  cy.visit('https://ace.c9.io/build/kitchen-sink.html')
  cy.get(".ace_text-input").first().focus().type("foo bar")
})

ace editor also has some fun focus logic of their own

    var focusEditor = function(e) {
        var windowBlurred = !document.hasFocus || !document.hasFocus()
            || !editor.isFocused() && document.activeElement == (editor.textInput && editor.textInput.getElement());
        if (windowBlurred)
            window.focus();
        editor.focus();
    };

[debel27]

This one is tricky. It actually is being covered by the other element,

it('should type in input', function () {
  cy.visit('https://ace.c9.io/build/kitchen-sink.html')
  cy.get(".ace_text-input").first().focus().type("foo bar")
})

It works perfectly for me! Thanks, I was banging my head against the wall with this

[Bkucera]

closing this since it's not a visibility bug, and has a workaround.