Hello there! 👋
I'm Lucas, a Brazilian QA engineer, and this is Another QA Content nobody asked for (but i made it anyway 😂). My goal with this blog is to talk about things related to the QA world in my own way, giving my opinion and point of view. If you like it, follow me for more posts like this one!
Selenium 4 is finally officially released! And I've been playing with some of the new features. In this post, I'll show you in practice some cool new things you can do with Selenium now.
I won't be focusing on good practices, like using hooks or not setting long explicit waits. The main goal here is to test out some new stuff. I'll show code snippets to summarize, but you can find a link to the Github repo at the end of this post if you want to check out the full code.
😃 Relative Locators are here
Remember Taiko's Proximity Selectors? Selenium now has its own similar feature called Relative Locators. It works similarly, you can find web elements that are above, below, toRightOf, toLeftOF or even near a fixed reference element.
And it's simple to use. All you have to do is import the with class. Use with to encapsulate the By object and then, you'll be able to chain a relative selector.
For this example, we'll be using BlazeDemo (a sample travel agency website). Let's try to perform a simple click at the button "Find Flights" without creating a specific selector/xpath for it.
To achieve our goal, let's use the destination city select as reference. Inspecting it, we can see that one option to retrieve it is by its "name" attribute.
Let's implement a simple test then. We'll select "Dublin" as the destination city and then assert that the available flights page title is displayed correctly.
/**
* File: AppTest.java
*/
class AppTest {
@Test
void relativeSelector(){
// 1. Configuration steps;
String expectedTitle = "Flights from Paris to Dublin:";
System.setProperty("webdriver.chrome.driver", "c:/chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://blazedemo.com/");
// 2. Retrieve the select "Destination city" and select option 'Dublin';
WebElement toDestination = driver.findElement(By.cssSelector("[name='toPort']"));
Select selectElement = new Select(toDestination);
selectElement.selectByVisibleText("Dublin");
// 3. Use Relative Locator 'below' to retrieve the "Find Flights" button;
WebElement findFlightsButton = driver.findElement(with(By.tagName("input")).below(toDestination));
findFlightsButton.click();
// 4. Assert that the button was clicked by validating page title.
String actualTitle = driver.findElement(By.tagName("h3")).getText();
Assertions.assertEquals(expectedTitle, actualTitle);
driver.quit();
}
}
I've added a sleep to the code snippet above so that we can see the test in action!
This is useful when you don't have access to the source code (to add an 'id' or 'test-id' in the HTML) and want to avoid writing a complex xpath.
🤯 Support for Chrome DevTools Protocol
The Chrome DevTools Protocol (CDP) is a protocol to communicate with Chromium-based browser internal configurations. Tools can build an API around it to allow a low-level browser configuration (e.g. instrument, inspect, debug and profile). If you're interested in learning more about what you can do with it, visit CDP Github.io page.
Selenium 4 brings its own API to communicate with CDP. Now its possible to do a lot of advanced browser configurations for your tests, like changing the client's geolocation for example.
We can implement a sample test for the above situation using the page gps-coordinates/my-location. It has a feature that show user's location coordinates and address based on the geolocation. We'll implement a test that simply asserts that the location shown is the location we set. See an example below:
Since I need some vacation, let's teleport ourselves to Cancún/Mexico using code! I've already googled the latitude and longitude values for us, so let's jump to the part where i show you the code:
/**
* File: AppTest.java
*/
class AppTest {
@Test
void setGeolocation throws InterruptedException(){
// 1. Configuration Steps
String expectedAddress = "Calle 50 Poniente, 77510 Cancun, ROO, Mexico";
System.setProperty("webdriver.chrome.driver", "c:/chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
// 2. Create map with arguments for "Emulate.setGeolocationOverride"
Map<String, Object> coordinatesMap = new HashMap<String, Object>();
coordinatesMap.put("latitude", 21.17429);
coordinatesMap.put("longitude", -86.84656);
coordinatesMap.put("accuracy", 1);
// 3. Calls CDP's "Emulation.setGeolocationOverride" to set new geolocation
((ChromeDriver)driver).executeCdpCommand("Emulation.setGeolocationOverride", coordinatesMap);
driver.get("https://www.gps-coordinates.net/my-location");
Thread.sleep(3000);
// 4. Asserts that the Address shown is Cancún/Mexico
String actualAddress = driver.findElement(By.id("addr")).getText();
Assertions.assertEquals(expectedAddress, actualAddress);
driver.quit();
}
}
And it's time to see our second test running!
We've just teleported! Of course, you'll have to believe that i'm not writing this from Cancún 😂. But you'll have to agree with me, this new feature (calling CDP commands) is really powerful. This geolocation change allow us to test features like "Find the nearest store" for example.
This is it for today. Have you learned some other new stuff on Selenium 4 already? Share with me in the comments!
If you've read this far, I hope the content has added something for you. If it didn't, remember: This is just another ordinary QA content 😬.
🍀 See ya!
👩💻 Full Code
🔍 References
Chrome DevTools Protocol docs
Naveem AutomationLabs YouTube Channel - Mock Geo Location using ChromeDevTools
Angie Jones's blog - Mocking Geolocation
Selenium docs - Locating elements
Top comments (0)