DEV Community

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

Posted on • Updated on

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.

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

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,

I now have a passing test, WOOHOO!!!

Passing cypress test

Where's the code you jabroni?

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": {
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 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)

amannamedjed profile image
Jed Darrohn

Lifesaver. Thanks!

phillip_owen_19475289f5e4 profile image
Phillip Owen

I second that. I was ready to quit development.