Cypress: Cypress should fire 'mouseover' event on .click()

[tran2]

Current behavior:

Unable to click on the first suggestion from google place auto complete

Video: https://drive.google.com/open?id=11dxli8EzoozjZ0LfAmDT6IJKHWKtlNKy

Desired behavior:

Can click on the first suggestion

Steps to reproduce:

The following script would fail. For some reason click wouldn't pick the item here. I've tried selenium and the click worked for me.

cy
  .visit('https://developers.google.com/maps/documentation/javascript/examples/full/places-autocomplete')
  .get('#pac-input')
  .should('be.visible')
  .wait(1000)
  .type('22 Princes Highway, Darlington NSW, Australi')
  .get('.pac-item')
  .first()
  .should('be.visible')
  .click()
  .get('#pac-input')
  .then((result) => {
      expect(result.val()).to.eq('22 Princes Highway, Darlington NSW, Australia');
  });

Versions

Cypress 3.0.1
Mac 10.13.4
Electron 59

[davidzambrana]

I was about to open the very same one :heavy_check_mark:
Will keep an eye here, thanks!

In my case I even tried to add a role=option attribute to check if it could be because of that:

cy
  .get('.pac-container.pac-logo')
  .find('.pac-matched')
  .contains('Plaza de Olavide')
  .then($el => {
    $el[0].setAttribute('role', 'option');
    cy.wait(500);
    cy.wrap($el[0]).click({ force: true });
  });

But still it does not work, Cypress performs the click but the field does not grab the data coming from googleapis.

[JordiGiros]

I'm using behat framwork for PHP and using native framwork methods or javascript methods I can't click on the first item. The exception thrown in my case is that another element will receive the click. The funny thing is that the "other" element it says it will receive the click is the same I'm trying to click... In fact in my test video, the element it's clicked but nothing is really selected.

I also tried to generate some JQuery keyboward actions and it didn't work...

var e = $.Event('keydown');
 e.which = 40; // Character 'Down arrow'
$('#address_from').trigger(e);
ewhich = 13; // Character 'Enter'
$('#address_from').trigger(e);

Another option I thought was getting the first item text and put them in the input trying to generate an exact match... But then I've got no results from Google places. That's magic.

[jdcumpson]

I'm having the same issue, my workaround for now is to use the type() method, like

cy.get('input[placeholder="Street Address"]').click().type(queryAddress);
cy.get('.pac-item').first().should('contain', '<redacted address>');
cy.get('input[placeholder="Street Address"]').type('{downarrow}{enter}');

I found click() ensured more reproducible behaviour from the google component, since I was not able to catch the JSONP requests in my cy.server() routes. A fix here would be great.

[davidzambrana]

@jdcumpson thanks for the workaround, it's working for me! :heavy_check_mark:

[jennifer-shehane]

Hi, could y'all try this in Cypress version 3.0.3? We made some improvements to focusing the browser since then that may have affected this behavior.

[davidzambrana]

Already tried it and it didn't work yet for me.

Still cannot click on the elements coming from googleapis

Now I can't even use the workaround shared by @jdcumpson , typing {downarrow}{enter}. It does perform the enter action but it doesn't bring the data now.

Verified version 3.0.3
Browser Chrome 66 and Electron 59

[davidzambrana]

Maybe my last comment is related to this new one https://github.com/cypress-io/cypress/issues/2261

[juandiegombr]

This work for me.
It seems that cypress doesn't catch the google's request and it doesn't wait to get the addresses.

this.wrapper.get('input')
      .type('address')
      .wait(1000)
      .type('{downarrow}{enter}')

I have tried in other case, where I have a form, and the solution above it doesn't work because of the enter-submit connection.

[andrewryan1906]

Any update on this? I'm using Google Autocomplete API in my Angular app and thus far have been unable to test forms with it. As said before, the ENTER key works, but it unfortunately forces a submit on the form.

[andrewryan1906]

FYI, in case anyone is looking at this, I found a workaround that's not great, but it will do.

First, I put a hdiden field in my form:

<input type="hidden" data-cy="txtPreventSubmission" value="">

Then (I'm using Angular) I in the submitForm I check the value of this field, If it's got a value, I do NOT submit the form.

Then, in my Cypress script, I have this line when I first open up the form:

// HACK - we do this to prevent form submission when we hit the ENTER key
// we hit the enter key to make Google places work
// https://github.com/cypress-io/cypress/issues/1847
cy.get('[data-cy=txtPreventSubmission]').then(tx => tx.val('preventsubmission'));

Now, I can test the Google Places autocomplete in my Cypress script like this:

cy.get('[data-cy=rsHomeAddress]').find('[data-cy=tbAddressLookup]')
  .type('901 Dunbar Drive Dunwoody', {force: true})
  .type(' {downarrow}{enter}', {delay: 300, force: true});

Couple of things here. I have the Cypress script typing, and then hitting the down arrow and the ENTER key. This does submit the form, the but the logic above aborts the submit.

Second, you can type as fast as you want, but you need 100ms delay in order to get the Autocomplete window to open. And in my limited experimentation, you need a 300ms delay in order to get the down arrow/ENTER combination to work reliably (lesser values work sometimes, but not always). So for the sake of time, I'm typing the address with no delay first, and THEN I'm typing a space, the down key, and the ENTER key with a 300ms delay. This works.

Third - that leading space in the second type command is important, it's what gets the Google Places Autocomplete to open. If you omit the leading space, the dropdown won't appear.

Finally, I re-enable form submission in my Cypress script:

// now we can submit the form
cy.get('[data-cy=txtPreventSubmission]').then(tx => tx.val(''));

And I can successfully submit the form with the Google Places working.

Thanks,
Andrew

[Bkucera]

Hello all, I believe this issue is because we do not yet fire the mouseover event on cy.click. This will be fixed along with native events in #2956

Until then, please use this workaround when clicking on the auto-complete suggestion:

.trigger('mouseover').click()

[mmuller]

I found the following workaround:

The suggested addresses are included within an element with a class pac-item so we need to click on the first value. After that we need to press the enter key.

Something like this:

cy.get(‘#FIELD_ID').type(’YOUR_ADDRESS')
cy.get('.pac-item').first().click()
cy.get('#FIELD_ID').type('{downarrow}{enter}')

[cypress-bot[bot]]

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

[cypress-bot[bot]]

Released in 3.5.0.