XQA
Back to Test Automation
2026-02-105 min read

control, stub, and test edge cases (Test Automation)

Learn control, stub, and test edge cases (Test Automation) step by step with clear examples and exercises.

Title: Control, Stub, and Test Edge Cases with JavaScript Test Automation (Selenium, Cypress, Playwright)

Why This Matters

In the realm of software development, test automation is crucial for ensuring the quality and reliability of applications. By controlling the behavior of web applications, stubbing network responses, and testing edge cases, we can catch bugs early in the development process, saving time and resources. JavaScript, being a popular programming language for front-end development, offers several test automation tools like Selenium, Cypress, and Playwright. This lesson will guide you through controlling web applications, stubbing network responses, testing edge cases, and common pitfalls to avoid when using these tools.

Prerequisites

To follow this lesson, you should have a basic understanding of:

  1. JavaScript (ES6 syntax)
  2. HTML and CSS
  3. Node.js and npm (Node Package Manager)
  4. One or more test automation tools: Selenium, Cypress, Playwright

Core Concept

Control Web Applications

Test automation tools allow you to control web applications programmatically. This means that you can simulate user actions, navigate through the application, and interact with its elements. For example, using Selenium WebDriver with JavaScript, you can execute commands like driver.get('https://example.com') to open a URL or driver.findElement(By.id('example')).click() to click an element with a specific id.

Stub Network Responses

In some cases, your tests may rely on network requests that can be slow, unreliable, or even unavailable during testing. To handle this, you can stub (or mock) the responses of these network requests. This means that instead of making a real request to the server, your test will receive a predefined response from the stub. For example, using Cypress's cy.route() function, you can define a stub for a specific API endpoint like so:

cy.route({
method: 'GET',
url: '/api/example', // the URL of the API endpoint to stub
response: { body: JSON.stringify({ data: 'stubbed response' }) }
});

Test Edge Cases

Edge cases are situations that are outside the normal or expected behavior of an application. Testing edge cases is essential for ensuring that your application handles these unusual scenarios correctly. For example, you might want to test what happens when a user enters invalid data, clicks on disabled buttons, or navigates to non-existent pages.

Worked Example

Let's create a simple web application and write tests for it using Selenium, Cypress, and Playwright. We will control the application, stub network responses, and test edge cases.

  1. Create an HTML file (index.html) with a form that sends a POST request to /api/submit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test Automation Example</title>
</head>
<body>
<form id="exampleForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<button type="submit">Submit</button>
</form>
</body>
</html>
  1. Create a Node.js server that listens for the POST request and returns a response.
const express = require('express');
const app = express();
app.use(express.json());

app.post('/api/submit', (req, res) => {
const name = req.body.name;
// Handle the submitted data here
res.send({ message: `Name received: ${name}` });
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));
  1. Install the required dependencies and test automation tools for each tool (replace * with your preferred version numbers):
  • Selenium: npm install selenium-webdriver *selenium-server-standalone
  • Cypress: npm install cypress *cypress-mochawesome-reporter
  • Playwright: npm install playwright *playwright-cli
  1. Write tests for the application using each tool:

Selenium Example:

const { Builder, By, Key } = require('selenium-webdriver');

(async function example() {
let driver = await new Builder().forBrowser('chrome').build();
try {
await driver.get('http://localhost:3000');
const form = await driver.findElement(By.id('exampleForm'));
await form.sendKeys('Test User');
await form.submit();
// Handle the response here
} catch (err) {
console.error(err);
} finally {
await driver.quit();
}
})();

Cypress Example:

describe('Test Automation Example', function () {
it('Submits the form', function () {
cy.visit('http://localhost:3000');
cy.get('#name').type('Test User');
cy.get('#exampleForm').submit();
// Handle the response here
});
});

Playwright Example:

const { chromium, launch } = require('playwright');

(async function example() {
const browser = await launch({ headless: false });
const page = await browser.newPage();
try {
await page.goto('http://localhost:3000');
await page.fill('#name', 'Test User');
await page.click('#exampleForm');
// Handle the response here
} catch (err) {
console.error(err);
} finally {
await browser.close();
}
})();

Common Mistakes

  1. Not waiting for elements to load: Always ensure that you wait for elements to appear on the page before interacting with them, especially when using Selenium or Playwright.
  2. Ignoring network errors: If your tests rely on network requests and those requests fail, your tests will also fail. Make sure to handle network errors gracefully and stub responses when necessary.
  3. Not testing edge cases: Don't just test the happy path—test invalid inputs, disabled elements, and other unusual scenarios as well.
  4. Ignoring browser compatibility issues: Different browsers may behave differently, so make sure to test your application in various browsers using tools like Selenium or Playwright.
  5. Not cleaning up after tests: Make sure to clean up any resources created during testing (e.g., database records, temporary files) to avoid clutter and potential conflicts with other tests.

Practice Questions

  1. Write a test using Selenium that checks if the login form on https://example.com requires a valid email and password.
  2. Write a Cypress test that stubs the response of an API endpoint at /api/users to return a specific user object for testing purposes.
  3. Write a Playwright test that navigates to https://example.com, clicks on a link with the text "Contact Us", and verifies that the resulting page has the title "Contact Us - Example Company".

FAQ

  1. Why should I use multiple test automation tools? Using multiple tools can help you ensure compatibility across different browsers, handle various testing scenarios, and use the strengths of each tool for specific tasks.
  2. What are some best practices for writing tests with JavaScript test automation tools? Some best practices include writing clear and concise test descriptions, keeping tests independent and self-contained, handling asynchronous operations correctly, and cleaning up resources after testing.
  3. How can I improve the performance of my test suite? To improve the performance of your test suite, consider parallelizing tests, using faster browsers for headless testing, minimizing network requests, and optimizing test setup and teardown.
  4. What is the difference between Selenium WebDriver and Playwright? Both Selenium WebDriver and Playwright are tools for controlling web applications programmatically, but they have some differences: Selenium supports a wider range of browsers and platforms, while Playwright offers faster performance, easier setup, and better support for modern web features like CSS Grid and Fetch API.
  5. How can I handle dynamic content in my tests? To handle dynamic content in your tests, you can use techniques such as waiting for elements to appear on the page, using XPath or CSS selectors that account for dynamic content, or stubbing responses for dynamic data sources.
control, stub, and test edge cases (Test Automation) | Test Automation | XQA Learn