Mock GEO Locations (New feature in Selenium 4)

Mock GEO Locations using Selenium 4

To understand this concept, launch​​ https://locations.kfc.com/​​ 

We can locate a KFC in United States using this website

Let us click the link ‘USE MY LOCATION’. Notice below, as expected, the application switched to our location (New Delhi) and did not find any results (because, as we said, this site caters to US only)​​ 

Now,​​ let us consider this​​ use case:

You want to surprise your friend (who lives in​​ New York,​​ US) by ordering a KFC​​ and get it delivered to his place.​​ You decide to click ‘USE MY LOCATION’ feature, so that nearest KFC (to his house) is picked up. However, the challenge is, you are in India and when you click ‘USE MY LOCATION’, New Delhi is getting picked up. So, how will you help your friend?  ​​​​ 

Another use case could be:​​ 

One of your friends​​ is in US and​​ is unable to search for a nearby KFC​​ for some reason.​​ He calls you and asks for your help to search for a KFC near his location in US.​​ However, your​​ current location is India.​​ You want to use ‘USE MY LOCATION’ feature.​​ How will you help your friend?​​ ​​ ​​ 

For both these use cases, we can mock or emulate as if we are in US and when we click ‘USE MY LOCATION’, it will show the results of US location (locations near your friends place). Let us see this in practice.

Let us search for New York co-ordinates, see below

​​ 

Let us create a Hash map and add latitude, longitude. Let us also add some accuracy

Let us now add the below line. Please note that this feature right now works with only chrome browsers. The ‘executeCdpCommand’ is one of the chrome devtools command.​​ Cdp stands for​​ ‘Chrome DevTools Protocol’​​ 

Next,​​ ‘Emulation.setGeolocationOverride’ means that, we want to emulate a Geo location and at the same time, I would like to override my current location and use the location defined in Hash map​​ 

Next​​ we would like to launch​​ https://locations.kfc.com/search​​ and click ‘USE MY LOCATION’ link

Inspect ‘USE MY LOCATION’ link

So we can write

Below is snapshot of complete code

Execute this script, notice below that Selenium clicks ‘USE MY LOCATION’ and notice that New York city is shown in search results​​ 

Let us now pick up Washington DC coordinates

Comment New York and details of DC

Run script

This is how we can mock a geo location using chrome devtools feature in Selenium 4.

You can refer the official documentation

https://www.selenium.dev/documentation/webdriver/bidirectional/chrome_devtools/​​ 

Code snippet

package sel4scripts;

import java.util.HashMap;

import java.util.Map;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import io.github.bonigarcia.wdm.WebDriverManager;

public class MockGEOLocations {

 public static void main(String[] args) throws InterruptedException {

  WebDriverManager.chromedriver().setup();  

  WebDriver driver = new ChromeDriver();  

  Map<String, Object> geoloc = new HashMap<>();

  /*

  //New York city

  geoloc.put("latitude", 40.7128);

  geoloc.put("longitude", -74.0060);

  geoloc.put("accuracy", 100);

  */

  //Washington DC

    geoloc.put("latitude", 38.9072);

    geoloc.put("longitude", -77.0369);

    geoloc.put("accuracy", 100);

  ((ChromeDriver) driver).executeCdpCommand("Emulation.setGeolocationOverride", geoloc);

  driver.get("https://locations.kfc.com/search");

  WebElement elem = driver.findElement(By.cssSelector(".Locator-button.js-locator-geolocateTrigger"));

  elem.click();

 }

}

Thank you for reading!