A Bug in the System:: March 2023

Both Selenium and Cypress provide network interception capabilities. As the name implies, the capability allows the user to intercept HTTP requests and manipulate the response received for the given response. This is useful when you want to automate UI scenarios where the preconditions and steps required for the expected output can’t be easily produced.

To evaluate this capability I went about automating the 3 scenarios found below,

Intercepting and waiting for a network resource attached to a web page to be received to the client side.
Intercepting and simulating 400 and 500 errors.
Intercepting and changing response payloads.

I found that Cypress provides HTTP level interception while Selenium simulates interception through the Web Driver client. And that interception in general is easier in Cypress. Selenium provides better control over response status code manipulation, but surprisingly selenium doesn’t provide a way to access the HTTP response codes through its client so asserting status code related scenarios may be more troublesome.

Cypress Examples

	/// <reference types='cypress'/>

	describe("Intercepting network resources", ()=>{

	it("Intercepting and waiting for a URL", ()=>{
	cy.intercept({
	method: "GET",
	url: "https://the-internet.herokuapp.com/css/app.css"
	}).as("slowResource")
	cy.visit("https://the-internet.herokuapp.com/dropdown");
	cy.wait("@slowResource").its('response.statusCode').should('eq', 200);
	})

	it("Intercepting and throwing a network error for a resource", ()=> {
	cy.intercept({
	method: "GET",
	url: "https://the-internet.herokuapp.com/dropdown"
	},{
	forceNetworkError: true
	}).as("slowResource")
	cy.visit("https://the-internet.herokuapp.com/dropdown");
	})

	it.skip("Intercepting and loging the request object", ()=>{
	cy.intercept({
	method: "GET",
	url: "https://the-internet.herokuapp.com/dropdown"
	}, (req) => {
	console.log(req);
	}).as("slowResource")
	cy.visit("https://the-internet.herokuapp.com/dropdown");
	cy.wait("@slowResource").its('response.statusCode');
	})

	it("Intercepting and replying with a static response", ()=>{
	cy.intercept('GET','https://the-internet.herokuapp.com/dropdown', {statusCode: 200, body: "<html><body>test</body></html>"}).as("slowResource")
	cy.visit("https://the-internet.herokuapp.com/dropdown");
	cy.wait("@slowResource").its('response.statusCode').should('eq', 200);
	})

	})

view raw NetworkInterception.cy.js hosted with ❤ by GitHub

Selenium Examples

	package com.dumiduh.other;

	import io.github.bonigarcia.wdm.WebDriverManager;
	import org.openqa.selenium.chrome.ChromeDriver;
	import org.openqa.selenium.devtools.NetworkInterceptor;
	import org.openqa.selenium.remote.http.Contents;
	import org.openqa.selenium.remote.http.HttpResponse;
	import org.openqa.selenium.remote.http.Route;
	import org.testng.annotations.AfterClass;
	import org.testng.annotations.BeforeClass;
	import org.testng.annotations.Test;

	import static org.openqa.selenium.remote.http.HttpMethod.GET;

	public class NetworkInterceptorTest {
	ChromeDriver driver;
	@BeforeClass
	public void setup(){
	WebDriverManager.chromedriver().setup();
	}

	@Test
	public void responseInterceptionError() {
	driver = new ChromeDriver();
	Route route = Route.matching(req -> GET == req.getMethod() && req.getUri()
	.endsWith("/dropdown"))
	.to(() -> req -> new HttpResponse().setStatus(500));
	new NetworkInterceptor(driver, route);
	driver.get("https://the-internet.herokuapp.com/dropdown");
	driver.getPageSource()
	.contains("HTTP ERROR 500");
	}

	@Test
	public void responseInterceptionBody() {
	driver = new ChromeDriver();
	Route route = Route.matching(req -> GET == req.getMethod() && req.getUri()
	.endsWith("/dropdown"))
	.to(() -> req -> new HttpResponse().setContent(Contents.utf8String("<html><body>test</body></html>")));
	new NetworkInterceptor(driver, route);
	driver.get("https://the-internet.herokuapp.com/dropdown");
	}

	@AfterClass
	public void cleanup(){
	driver.quit();
	}

	}

view raw NetworkInterceptorTest.java hosted with ❤ by GitHub

A Bug in the System:

Friday, March 10, 2023

A Comparison of Network Interception capabilities between Cypress and Selenium

What's in my Bag? EDC of a Tester