How to perform Cypress Geolocation Testing

Geo-location testing is important to ensure that the web applications are performing as expected for all the users across different geographical location. There are various use cases where the application functionalities are dependent on the exploiter location such as while ordering nutrient, booking flights, etc. in such cases, Geo-location testing becomes essential as a piece of Functional Testing.

This article discourse Mocking Geo Location by specifying the GPS coordinates or latitude/longitude utilize Cypress.

GPS based Geo Location

You may experience come across situations, wherein certain website evoke a browser popup stating “xyz.com wants to know your location”. The ground for doing so is that the website need to custom-make or use some location-based data to make the services better. Hence, by selecting Allow, the exploiter allows the application to track their GPS localization.

How to Customize Geo-Location in Chrome Browser?

Chrome DevTools also provides, customizing Geo Location

Step 1:Open Chrome DevTools usingCTRL +SHIFT + J (For Mac Option +⌘ + J)

Step 2:Open Run Command Window expendCTRL + P (For Mac CMD +P)

Step 3:Type Sensor and chooseShow Sensors

Step 4: SensorsTab Opens Up

Step 5:Set the Location, Ex: London, Tokyo, etc.

Set Mock Geolocation Using Cypress Test Automation Tool

The above-said technique deeds for, but if the turn of tests is higher, so manual testing might conduct a lot of time, and hence test automation is needed in such cases to test geo-based functionalities on the site. In such a case, you need to bemock the Geolocation using.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

provides the option to mock the location, usingcy.stub()command. Here you need to tell the browser to set the current location to the want location. To set the location programmatically GPS coordinates are ask. GPS coordinates are written in price oflatitude and longitudevalues, by use the latitude and longitude values, it is easygoing to set the browser geolocation in Cypress.

Example of Mocking Geolocation in Cypress

Step 1:Create a simple role, which mocks the Geo Location inside your cypress codification.

function mockLocation (parallel, longitude) {render {onBeforeLoad (win) {cy.stub (win.navigator.geolocation, `` getCurrentPosition '') .callsFake ((cb, err) = & gt; {if (latitude & amp; & amp; longitude) {homecoming cb ({coords: {parallel, longitude}});} throw err ({code: 1});});}};}

The above functionmockFunction (), takes two parameters latitude and longitude and the like passed parameter will be set as the geolocation.

Step 2: Call the above function, with cypresscy.visit (),let & # 8217; s lead the latitude and longitude of Tokyo which is35.172744, 137.05802.

cy.visit (`` https: //whatmylocation.com/ '', mockLocation (35.172744,137.05802));

The complete test looks like

//geo.test.js function mockLocation (latitude, longitude) {retrovert {onBeforeLoad (win) {cy.stub (win.navigator.geolocation, `` getCurrentPosition '') .callsFake ((cb, err) = & gt; {if (latitude & amp; & amp; longitude) {return cb ({coords: {latitude, longitude}});} throw err ({code: 1});});}};} describe ('Mock Geo Location ', () = & gt; {it ('Geo Location Test ', () = & gt; {cy.visit (`` https: //whatmylocation.com/ '', mockLocation (35.172744,137.05802));});})

Step 3: Execute cypress tests manually by establish the Cypress window with the below command

npx cypress open

Step 4:Once the Cypress Window is open, choose your tests to execute

Or

Execute Cypress tests in the CLI creature by enrol the below bid in command-line tool

npx cypress run

Test Result

Once the Cypress test is executed, you can see the geolocation/city name.

How to run the Geolocation in BrowserStack

To run the Geo Location on Real Devices, integrate your Cypess Geo Location tryout with BrowserStack using the steps below:

Step 1:Install using

npm install -g browserStack-cypress-cli

Step 2:Configure Browserstack CLI using

npx browserstack-cypress init

Step 3:The bid above createsbrowserstack.jsonin your Project Directory. Enter the battlefield:

• auth– stipulate your username and admission key. Learn about different auth options.
• browsers– change the list of browser and OS if you want to
• run_settings– set thecypress_config_file, parallels, npm_dependencies, and any other options that you want to change

Step 4:Run Your Cypress Tests on BrowserStack using

npx browserstack-cypress run –sync

Test Result

Once you complete the above steps, or Login to BrowserStack and Navigate to BrowserStack Automate Dashboard to see the results.

Bear in mind that must be executed on real browsers and device for accurate results. Start running tryout on to access 30+ versions of the latest browsers across Windows and macOS with. Use instant, hassle-free Cypress parallelization to and get faster results without compromising on truth. Detect bugs before user do by testing package in with BrowserStack.

Related Guides