DEV Community

Cover image for Cypress e2e testing with Google Maps Autocomplete
Grant Hair
Grant Hair

Posted on • Edited on

6 2

Cypress e2e testing with Google Maps Autocomplete

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 👋

Top comments (2)

Collapse
 
amannamedjed profile image
Jed Darrohn

Lifesaver. Thanks!

Collapse
 
phillip_owen_19475289f5e4 profile image
Phillip Owen

I second that. I was ready to quit development.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more