HTML Testing and Debugging: Implementing Automated Testing for HTML Forms

By Anastasia K.4 min readFebruary 20, 2026

Automated testing can significantly reduce manual testing efforts and help catch issues early in the development cycle. By leveraging tools like Selenium and Jest, developers can create robust tests for their HTML forms, ensuring that they meet user requirements and function correctly. This guide will provide you with practical examples and best practices to implement effective automated testing for your HTML forms.

Setting Up the Testing Environment

Before diving into the testing code, let's set up our environment. For this tutorial, we will use Selenium for end-to-end testing and Jest for unit testing of our HTML forms.

Prerequisites

Node.js: Ensure you have Node.js installed on your machine.
Selenium WebDriver: Install the Selenium WebDriver for your preferred browser (e.g., Chrome, Firefox).
Jest: Install Jest for unit testing.

You can install Jest using npm:

npm install --save-dev jest

For Selenium, you can install the WebDriver for Chrome using:

npm install --save-dev selenium-webdriver

Example HTML Form

Let's create a simple HTML form to test:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Form</title>
</head>
<body>
    <form id="sampleForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <button type="submit">Submit</button>
    </form>
    <div id="response"></div>
    <script src="app.js"></script>
</body>
</html>

Unit Testing with Jest

Testing Form Validation

We will create a Jest test to validate the form's behavior when the user submits it without filling in the required fields.

Create a file named form.test.js:

const { JSDOM } = require('jsdom');

describe('Form Validation', () => {
    let document;
    
    beforeAll(() => {
        const dom = new JSDOM(`
            <form id="sampleForm">
                <input type="text" id="name" required>
                <input type="email" id="email" required>
                <button type="submit">Submit</button>
            </form>
        `);
        document = dom.window.document;
    });

    test('should not submit the form if required fields are empty', () => {
        const form = document.getElementById('sampleForm');
        const submitEvent = new Event('submit');
        
        form.dispatchEvent(submitEvent);
        
        expect(form.checkValidity()).toBe(false);
    });
});

Running Jest Tests

To run your Jest tests, add the following script to your package.json:

"scripts": {
    "test": "jest"
}

Then, execute the tests with:

npm test

End-to-End Testing with Selenium

Testing Form Submission

Next, we will create an end-to-end test using Selenium to ensure that the form submission works correctly.

Create a file named form.test.js in a separate directory for Selenium tests:

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

describe('HTML Form Submission', () => {
    let driver;

    beforeAll(async () => {
        driver = await new Builder().forBrowser('chrome').build();
        await driver.get('file:///path/to/your/form.html'); // Update path to your HTML file
    });

    afterAll(async () => {
        await driver.quit();
    });

    test('should submit the form and display a response', async () => {
        await driver.findElement(By.id('name')).sendKeys('John Doe');
        await driver.findElement(By.id('email')).sendKeys('[email protected]');
        await driver.findElement(By.id('sampleForm')).submit();

        const response = await driver.wait(until.elementLocated(By.id('response')), 5000);
        const responseText = await response.getText();
        
        expect(responseText).toContain('Thank you for your submission');
    });
});

Running Selenium Tests

To run your Selenium tests, ensure that your WebDriver (e.g., ChromeDriver) is running and execute the test script using Node.js:

node form.test.js

Best Practices for Testing HTML Forms

Best Practice	Description
Use Descriptive Test Names	Clearly describe what each test is verifying to improve readability.
Keep Tests Isolated	Each test should be independent to avoid cascading failures.
Test Edge Cases	Ensure to cover scenarios like invalid inputs, empty fields, and special characters.
Automate Tests in CI/CD Pipelines	Integrate your tests into CI/CD workflows to catch issues early.
Regularly Review and Update Tests	As your forms evolve, ensure your tests reflect the current functionality.

Conclusion

Automated testing for HTML forms is a critical component of modern web development. By implementing unit tests with Jest and end-to-end tests with Selenium, you can ensure that your forms are robust, user-friendly, and error-free. Following the best practices outlined in this tutorial will help you maintain high-quality code and improve the overall user experience.

Learn more with useful resources: