Cypress Test - Google Places Autocomplete not functioning

Question

I am trying to use Cypress as a testing tool for an Angular website I am working on. One of the tests is for a location search, which uses the google places service to autocomplete locations. Functioning correctly, it looks like in the picture below:

However, in cypress testing, the autocomplete element does not appear, so a location cannot be chosen to proceed with the search. The test is firing the methods that it should to make it appear, but it does not. It will appear if I manually type in the cypress browser as well.

Does anyone know what may be causing this?

Carmella

Interesting. Are there any frames, re-direction or api calls that are not happening? – Footprint

Answer 1

I had this issue, i had to slow the speed of the typing down.

Handfast

Slowing down the typing speend did work for me. However, do you know why do we have to do that? – Buoyage

Answer 2

You can try to set the "delay" after each keypress on the "type" options object:

cy.get("input[data-name=autocomplete]")
  .type("AUTOCOMPLETE DATA", { delay: 100 })
  .type("{enter}", { delay: 100 })

https://docs.cypress.io/api/commands/type.html#Arguments

Hinshelwood

this worked for me, though I had to slow down to at least "300" to see an effect. – Butts

Answer 3

One approach would be:

cy.get("input[data-name=autocomplete]")
  .type("AUTOCOMPLETE DATA")
  .wait(2000)
  .type("{enter}")
  .wait(500);

This allows time for the autocomplete to load the data from wherever it needs and then you can use .type("{enter}") to select the first element.

Unknowing

Static wait statements in testcode are a no-go zone. If you need a wait statement it means you are not in control of what is happening. Cypress will respond to the change in dom and has proper timeouts that "wait" for those changes to be completed. – Ohmage