type('{enter}') doesn't fire input event

[fr0]

Current behavior:

I'm trying to test an app with the ace editor ( https://ace.c9.io/ ), which uses a textarea, but I'm running into a problem:

describe('textarea', () => {
  it('can type the enter key', () => {
    cy.visit('http://ace.c9.io/build/kitchen-sink.html');
    cy.get('#editor-container .ace_editor textarea').type('foo{enter}', {force: true});
  });
});

It types 'foo' but does not press the Enter key.

Desired behavior:

Using {enter} in type should press the Enter key.

Steps to reproduce: (app code and test code)

See above.

Versions

3.1.5, Chrome 72, MacOS

[jennifer-shehane]

Yes, I can see that the enter is not creating a new line within the editor.

Wanted to make sure you were familiar with this existing issue with ace editor also #1818

Yeah, you'll have to figure out what event or logic ace editor is listening for in order to create the newline in their editor. I tried to add some keyboard event listeners to see, but wasn't able to track it down at the moment.

[fr0]

Thanks for the update, @jennifer-shehane. It looks like they are just relying on the browser itself to set the textarea.value property, and then listening to the input event to know when that happened.
Is there any way to press a key the same way as if the user had done it, so it goes through the same code flow as user-type keys (in the browser itself, not just JavaScript)?
Perhaps this is dependent on #311 ?

[jennifer-shehane]

Issue #311 will definitely help with these types of issues.

As a workaround today, you can trigger any events, including input, using .trigger()

[kuceb]

@fr0 Yes, this is a bug. we have hard-coded no input events when pressing enter, but we should fire them if there was a newline inserted. Thanks

here's the LOC causing that logic: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cypress/keyboard.coffee#L151

as a workaround:

.type('{enter}').trigger('input')

[devil-pc]

Was this fixed pls? I need to send the Enter key that will trigger a GET from Google maps so I can set a location on a product in my app and I cannot do that....

Here is a piece of code:

cy.get('#google-map-autocomplete').type('2A Margate Rd, Singapore 438073{enter}')
        .trigger('input')

[jennifer-shehane]

@devil-pc What event is your application code listening for to trigger the GET.

[devil-pc]

Hello Jennifer - i will try to explain from the functional point of view:

1. I am filling the 'search for a location input' on an implementation for Google Maps using a valid address
2. As we are inserting parts of the address, Google Maps returns a list of locations on AutocompletionService.GetPredictions (https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction)
3. When the GET on PlaceService.GetPlaceDetails has status 200 (we have a unique result) I need to send the Enter key
4. sending the Enter key will trigger the visibility on a button located on the UI (but hidden until the location address is unique) so the user can advance on the flow..

Now, because I am unable to send the Enter key using Cypress - we are stuck on the development for the automated test...

We have tried multiple approaches like:

1. cy.get('my_input_selector').type('my_address{enter}') - NOT WORKING and no fail is recorded
2. cy.get('my_input_selector').type('my_address{enter}').trigger(my_input_selector) - NOT WORKING and no fail is recorded
3. cy.get('my_input_selector').type('my_address')
cy.get('.pac-container').click() //we click on the first result returned by the address search in Google Maps

• NOT WORKING and no fail is recorded

Are we doing something wrong?
Thank you for your feed-back...

[kuceb]

@devil-pc this issue is possibly related to the problem you're having. #1847

[devil-pc]

Hello all.

Thank you @bkucera - with your suggestion I managed to solve the problem....

The code is like this:

        cy.get('#map-autocomplete').type('2A Margate Rd, Singapore 438073') //we insert the address
        cy.wait(3000) / we wait for Google Maps to return a result
        cy.get('.pac-item').first().click({force: true}) //we click on the first result
        cy.get('#map-autocomplete').type('{downarrow}{enter}') // we send the Enter to the input field

It works but the sending of the Enter key is not a clean one....

Have a great day,

Clau

[RockChild]

Hello all.

Thank you @bkucera - with your suggestion I managed to solve the problem....

The code is like this:

        cy.get('#map-autocomplete').type('2A Margate Rd, Singapore 438073') //we insert the address
        cy.wait(3000) / we wait for Google Maps to return a result
        cy.get('.pac-item').first().click({force: true}) //we click on the first result
        cy.get('#map-autocomplete').type('{downarrow}{enter}') // we send the Enter to the input field

It works but the sending of the Enter key is not a clean one....

Have a great day,

Clau

I would suggest avoiding such static waits b/c sometimes it would not pass on time. Better record the request you are waiting for and using cy.route() wait for the response.

[devil-pc]

I agree @RockChild we should never use waits like the one I described above - this was just an example ...in the real world we are waiting for the response.....anyway with the Version 3.4.0 of Cypress the sending of the Enter key was fixed..

Have a great day,

Clau

[cypress-bot]

The code for this is done in cypress-io/cypress#4870, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 3.5.0.