7

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:

functioning autocomplete

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?

Heikki
  • 2,214
  • 19
  • 34
humesy
  • 81
  • 1
  • 3

3 Answers3

2

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

tom
  • 21
  • 2
1

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

Marco Castelo
  • 56
  • 1
  • 2
  • 4
-1

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.

Darragh O'Flaherty
  • 995
  • 3
  • 13
  • 30
  • 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. – Kwuite Apr 09 '20 at 11:51