XQA
Back to Test Automation
2026-01-299 min read

Network Interception and Mocking

Learn Network Interception and Mocking step by step with clear examples and exercises.

Title: Test Automation with Network Interception and Mocking using JavaScript

Why This Matters

In today's fast-paced digital world, test automation is crucial for ensuring the reliability and efficiency of web applications. Network interception and mocking allow us to control network traffic, simulate different scenarios, and verify application behavior under various conditions. This lesson will demonstrate how to perform test automation using JavaScript with Selenium, Cypress, and Playwright, focusing on network interception and mocking techniques.

Importance of Network Interception and Mocking in Test Automation

  • Isolate the Application Under Test (AUT) from external dependencies
  • Control behavior of external APIs during testing
  • Simulate different scenarios for comprehensive testing
  • Improve test stability by reducing dependency on external services
  • Reduce test execution time by avoiding slow or unavailable third-party services

Prerequisites

  • Basic understanding of JavaScript
  • Familiarity with web development concepts such as HTML, CSS, and DOM manipulation
  • Knowledge of test automation frameworks: Selenium, Cypress, or Playwright
  • Understanding of HTTP protocol and network communication principles
  • Familiarity with a proxy server like MITMProxy (for Selenium)
  • Basic understanding of asynchronous JavaScript using Promises or async/await

Core Concept

Network interception and mocking involve capturing network traffic, modifying it, and replaying it to simulate different scenarios during test automation. This technique is particularly useful for testing applications that rely on external APIs or third-party services, as it allows us to isolate the application under test (AUT) from these dependencies and control their behavior.

Selenium

Selenium is a popular test automation framework that uses web browsers to simulate user interactions with web applications. To intercept network traffic using Selenium, we can use the WebDriver's http or https proxy settings. By configuring these settings, we can route all network requests through a proxy server (such as MITMProxy) that allows us to inspect, modify, and control network traffic.

Configuring Selenium with MITMProxy

  1. Install MITMProxy: pip install mitmproxy
  2. Start MITMProxy: mitmdump -s
  3. Configure Selenium WebDriver to use the proxy:
const { Builder } = require('selenium-webdriver');
const { Client } = require('@mitmproxy/node');

// Start MITMProxy
const mitmClient = await Client.create();
mitmClient.listen();

// Configure Selenium WebDriver with the proxy
const driver = await new Builder()
.usingServer('http://localhost:8080') // Replace with your MITMProxy port if different
.build();

Intercepting and modifying network requests in Selenium

  1. Listen for specific network events using onBeforeNavigate, onBeforeSend, or onRequest event handlers.
  2. Modify the request or response as needed by accessing the relevant properties of the event object.
  3. Prevent the default behavior of the event to allow us to intercept and modify the network request.
driver.on('beforeNavigate', async (event) => {
// Modify the URL if necessary
event.url = 'https://example.com/mocked-response';

// Prevent the default behavior to allow us to intercept and modify the request
event.cancel();
});

Cypress

Cypress is another test automation framework that focuses on simulating user interactions within the browser. It offers built-in support for network interception using its cy.route() command. This command allows us to intercept and manipulate network requests before they are sent or after they are received, enabling us to control the behavior of external APIs during testing.

Intercepting and modifying network requests in Cypress

  1. Use the cy.route() command to define a route for the desired endpoint.
  2. Modify the request or response as needed using the provided callback function.
  3. Verify that the mocked data is correctly displayed by the AUT after interception and modification.
cy.route({
method: 'GET',
url: '/api/data', // Replace with your desired endpoint
response: (xhr, callback) => {
const mockData = [ /* Your mock data */ ];
callback(200, { body: JSON.stringify(mockData) });
}
});

Playwright

Playwright is a modern test automation framework that supports multiple browsers (Chromium, Firefox, and WebKit) and provides features for network interception similar to those offered by Cypress. It offers the networkIntercept() API, which allows us to intercept, modify, and control network traffic during test execution.

Intercepting and modifying network requests in Playwright

  1. Use the networkIntercept() API to start listening for network events.
  2. Modify the request or response as needed using the provided callback function.
  3. Verify that the mocked data is correctly displayed by the AUT after interception and modification.
const { chromium } = require('playwright');

(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();

// Intercept network requests using Playwright's networkIntercept() API
await page.route('**/api/data', route => {
// Modify the response by replacing the data with a predefined value
route.respond({ body: JSON.stringify({ data: 'Mock Data' }) });
});

// Navigate to the AUT and verify that the mocked data is displayed
await page.goto('http://example-app.com');
const content = await page.$eval('#content', el => el.textContent);
expect(content).toEqual('Mock Data');

// Close the browser
await browser.close();
})();

Worked Example

In this example, we will demonstrate how to use Selenium with MITMProxy for network interception and mocking in a simple web application that fetches data from an external API.

  1. Install the required packages: pip install selenium mitmproxy
  2. Create a Python script (test_network_interception.py) to configure Selenium with MITMProxy, intercept network requests, and modify the response.
from selenium import webdriver
import time

def mock_response(event):

Modify the response by replacing the data with a predefined value

event.response.set_body('{"data": "Mock Data"}')

Start MITMProxy

mitmClient = mitmdump.master_proxy()

mitmClient.listen(port=8080)

Configure Selenium WebDriver with the proxy

driver = webdriver.Firefox()

driver.get('http://example-app.com')

Listen for specific network events using onRequest event handler

driver.on_request = mock_response

Wait for 5 seconds to allow the application to fetch data from the external API

time.sleep(5)

Close the browser

driver.quit()


3. Start MITMProxy: `mitmdump -s`
4. Run the Python script: `python test_network_interception.py`

By modifying the response from the external API, we have successfully demonstrated network interception and mocking using Selenium with MITMProxy in a simple web application.

Common Mistakes

  1. Not configuring the proxy settings correctly: Ensure that you have set up the HTTP or HTTPS proxy settings for Selenium and that the Playwright networkIntercept() API is properly configured.
  2. Incorrectly modifying network responses: Be careful when modifying network responses, as incorrect modifications may cause unexpected behavior in the AUT.
  3. Not verifying the correct data is displayed: Always verify that the mocked data is correctly displayed by the AUT after interception and modification.
  4. Ignoring SSL certificate warnings: When using a proxy server for network interception, you may encounter SSL certificate warnings. To avoid these warnings, you can either add the proxy's SSL certificate to your trusted certificates or disable SSL certificate verification temporarily during testing.
  5. Not handling network errors gracefully: Make sure to handle network errors appropriately in your test automation scripts to ensure that tests do not fail due to temporary network issues.
  6. Using inconsistent mock data: Using inconsistent or incorrect mock data can lead to false positives or negatives during testing and provide suggestions on how to avoid this issue.
  7. Not cleaning up mocked data: If you are modifying network responses, make sure to clean up any mocked data after your test has finished to avoid affecting subsequent tests.
  8. Ignoring caching: When mocking network responses, consider how caching might impact the behavior of the AUT and adjust your mock responses accordingly.
  9. Not testing network errors: Ensure that you test the AUT's behavior when encountering network errors, such as timeouts or invalid responses.
  10. Ignoring API changes: If the external API being mocked is updated, make sure to update your mock responses accordingly to ensure that they remain relevant and accurate.

Common Mistakes (Continued)

  1. Not using a consistent mock data set: Using inconsistent or incorrect mock data can lead to false positives or negatives during testing and provide suggestions on how to avoid this issue.
  2. Not considering edge cases: Edge cases, such as unexpected response formats or error conditions, should be accounted for in your mock responses to ensure comprehensive testing.
  3. Not handling network delays gracefully: When simulating slow network connections, make sure to handle network delays appropriately in your test automation scripts to ensure that tests do not time out due to extended response times.
  4. Ignoring authentication: If the external API being mocked requires authentication, make sure to include appropriate credentials in your mock responses or implement custom authentication logic within your test automation script.
  5. Not testing for different network conditions: When simulating different network scenarios, consider testing for various connection speeds, latency, and packet loss rates to ensure that the AUT behaves correctly under a variety of network conditions.

Practice Questions

  1. How can you intercept and modify network requests using Selenium?
  2. What is the difference between Cypress's cy.route() command and Playwright's networkIntercept() API?
  3. Why is it important to verify that mocked data is correctly displayed by the AUT after interception and modification?
  4. How can you handle SSL certificate warnings when using a proxy server for network interception?
  5. What steps should you take to ensure that your test automation scripts handle network errors gracefully?
  6. Explain how inconsistent mock data can lead to false positives or negatives during testing and provide suggestions on how to avoid this issue.
  7. Describe a scenario where cleaning up mocked data is essential, and explain how you would approach it in your test automation script.
  8. How would you handle caching when mocking network responses for test automation?
  9. Explain the importance of testing network errors during test automation, and provide examples of common network errors that should be considered.
  10. What steps can you take to ensure that your mock data remains relevant and accurate if the external API being mocked is updated?
  11. How would you account for edge cases in your mock responses to ensure comprehensive testing?
  12. Describe a scenario where handling network delays gracefully is essential, and explain how you would approach it in your test automation script.
  13. What measures can be taken to implement custom authentication logic within test automation scripts when the external API being mocked requires authentication?
  14. Explain how testing for different network conditions can help ensure that the AUT behaves correctly under a variety of scenarios.

FAQ

  1. Can I use Selenium, Cypress, or Playwright for mobile device testing as well?

Yes, all three frameworks support mobile device testing using emulators or real devices.

  1. What are some best practices for writing test automation scripts with network interception and mocking?

Best practices include keeping tests modular, isolating the AUT from external dependencies, and verifying that mocked data is correctly displayed by the AUT. Additionally, consider handling network errors gracefully, using consistent mock data, cleaning up mocked data, considering edge cases, testing network errors, and updating mock responses when necessary.

  1. Can I use network interception and mocking for load testing or performance testing as well?

Yes, network interception and mocking can be useful for simulating different network conditions during load testing or performance testing to evaluate the behavior of the AUT under various scenarios. However, it is important to ensure that your mock responses accurately represent real-world network conditions and do not introduce artificial bottlenecks or delays.

  1. What are common pitfalls to avoid when using network interception and mocking in test automation?

Common pitfalls include incorrectly modifying network responses, ignoring SSL certificate warnings, not verifying the correct data is displayed, not handling network errors gracefully, using inconsistent mock data, not cleaning up mocked data, ignoring caching, not testing network errors, and ignoring API changes.

Network Interception and Mocking | Test Automation | XQA Learn