In the dynamic landscape of Selenium Chrome DevTools integration, we’ve explored simulating mobile browsing and harnessing real-time insights from network responses using Selenium CDP Listeners. Building upon this foundation, our journey now ventures into the realm of intercepting and mocking network/API responses—a crucial skill for comprehensive web testing. In this article, we’ll embark on a step-by-step guide, showcasing how Selenium, coupled with Chrome DevTools, empowers testers to intercept and manipulate network/API responses.
To learn more about Selenium and CDP, you can refer to my previous blogs
Interception and Modification of Network Request
We can intercept the network request by pausing the request, making changes in the request, and then continuing the request with the changes made.
Let us understand it with a simple scenario.
We have a website, https://rahulshettyacademy.com/angularAppdemo/, with a “Virtual Library” link that navigates to the Library page displaying the book list. When there is only one book in the account, it displays the message “Oops, only 1 book is available”, which is associated with the request URL: “https://rahulshettyacademy.com/Library/GetBook.php?AuthorName=BadGuy“.
But when we navigate to the library page by clicking the “Virtual Library”, the request URL is default set with an account having multiple books: “https://rahulshettyacademy.com/Library/GetBook.php?AuthorName=shetty“.
Hence, to test the message, we cannot directly rely on UI Automation. We have to make changes in the network request URL while sending the request, which is mocking network requests.
This is where the Interception and Mocking of the network request feature come into play.
Step-by-step flow for Mocking Request
Below is the code for the above problem:
public class NetworkMocking {
public static void main(String[] args) throws InterruptedException {
//Initialize driver
System.setProperty("webdriver.chrome.driver", "/Users/rahulshetty/Documents/chromedriver");
ChromeDriver driver = new ChromeDriver();
//Create DevTools Object and start session
DevTools devTools = driver.getDevTools();
devTools.createSession();
//Enable Fetch Domain to work with network requests
devTools.send(Fetch.enable(Optional.empty(), Optional.empty()));
//Add Listener to pause request
devTools.addListener(Fetch.requestPaused(), request->
{
//Filter url with if condition and make changes in URL with replace method
if(request.getRequest().getUrl().contains("shetty"))
{
//Mock URL - make change in the url by using replace method and change the authorName
String mockedUrl =request.getRequest().getUrl().replace("=shetty", "=BadGuy");
System.out.println(mockedUrl);
//Continue request with new mock URL
devTools.send(Fetch.continueRequest(request.getRequestId(), Optional.of(mockedUrl), Optional.of(request.getRequest().getMethod()),
Optional.empty(), Optional.empty(),Optional.empty()));
}
else {
devTools.send(Fetch.continueRequest(request.getRequestId(), Optional.of(request.getRequest().getUrl()), Optional.of(request.getRequest().getMethod()),
Optional.empty(), Optional.empty(),Optional.empty()));
}
});
//Perform test and verify the message
driver.get("https://rahulshettyacademy.com/angularAppdemo/");
driver.findElement(By.cssSelector("button[routerlink*='library']")).click();
Thread.sleep(3000);
System.out.println(driver.findElement(By.cssSelector("p")).getText());
}
}
Below are the functions we have used above:
- Fetch.enable: Enable the Fetch domain, allowing the interception and modification of network requests. It accepts 3 parameters: maxTotalBufferSize(integer), maxResourceBufferSize(integer), and maxPostDataSize(integer), respectively.
- Fetch.requestPaused: The
requestPausedevent triggers when we pause network requests. In this case, it’s paused by the listener to inspect and potentially modify the request. - Fetch.continueRequest: This method continues the paused request with optional modifications. In this case, it continues the request with either the original or modified URL based on the condition.
Hence by following the above process to create a mock network request, we can test the functionality that was otherwise impossible by direct automation.
You can refer to official documentation for more details on various methods and events: Chrome DevTools Protocol
Conclusion
In conclusion, mastering the art of intercepting and mocking network/API responses with Selenium and Chrome DevTools unveils a powerful dimension of web testing. The step-by-step guide empowers testers to dynamically manipulate network requests, enabling comprehensive testing scenarios beyond UI automation. Transitioning from simulating mobile browsing to real-time insights and now intercepting and mocking, Selenium’s capabilities continue to evolve. Stay tuned for more insights into our ongoing exploration. Happy testing!
