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 👋

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

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.

nextjs tutorial video

📺 Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay