During my working day I encountered a problem.
I needed to be able to drive a Google Maps Autocomplete text input through Cypress Tests.
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
As you can see above we get some suggestions as you type in the search box.
Now this is extremely easy to test manually, just jab in a place and click on a suggestion.
Cypress testing this not so much.
I scratched my head for hours trying to figure out how I could target that little suggestions list served back from Google Maps.
I went through the following google search results
https://github.com/cypress-io/cypress/issues/14598
https://stackoverflow.com/questions/53039165/cypress-test-google-places-autocomplete-not-functioning
https://github.com/bahmutov/cypress-geolocation-example
https://glebbahmutov.com/blog/cypress-geolocation/
The Solution
The Solution for me was something like the following
completeBranchPage: () => {
cy.enterText(enterLocationInput, value.dumfries);
cy.get('.pac-item', { timeout: 10000 }).should('be.visible');
cy.enterText(enterLocationInput, '{downarrow}');
cy.enterText(enterLocationInput, '{enter}');
cy.get(latInput).should('have.value', value.dumfriesLat);
cy.get(lngInput).should('have.value', value.dumfriesLong);
}
The magic piece of the puzzle for me was making sure that the gmaps suggestion items were actually there before I tried to choose one of them.
I did this with the following line of code where .pac-item
is the class of the Gmaps Autocomplete suggestions
cy.get('.pac-item', { timeout: 10000 }).should('be.visible');
Huge shoutout to this stack overflow answer, https://stackoverflow.com/a/60065672/9057687
I now have a passing test, WOOHOO!!!
Where's the code you jabroni?
https://github.com/GrantHair5/cypress-google-maps-autocomplete
I have created a small example repo.
You will need to add your own Google Maps API Key secret in the fashion of an environment variable or a .NET user secret.
User secret would be like the following
{
"GmapsApiSecrets": {
"ApiKey": "MY SUPER DOOPER SECRET KEY"
}
}
Please feel free to fork or clone down that repo and have a play around with the code.
For anyone who has not used cypress testing in the past I'd whole heartedly recommend it. Massive shout out to our Automation Tester https://github.com/karenpetrie for introducing us to the mysterious ways of automated testing.
It is baller.
Anyways, I'm out, hope this is of help to someone
Bye 👋
Top comments (2)
Lifesaver. Thanks!
I second that. I was ready to quit development.