DEV Community

loading...
Cover image for Cypress e2e testing with Google Maps Autocomplete

Cypress e2e testing with Google Maps Autocomplete

granthair5 profile image Grant Hair Updated on ・2 min read

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://docs.cypress.io

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

Gmaps 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);
    }

Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Huge shoutout to this stack overflow answer, https://stackoverflow.com/a/60065672/9057687

I now have a passing test, WOOHOO!!!

Passing cypress test

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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 👋

Discussion (0)

Forem Open with the Forem app