Hone logo
Hone
Problems

Automating a Simple Web Form with Playwright and Jest

This challenge focuses on setting up and writing basic end-to-end tests for a simple web form using Playwright and Jest. Automated testing is crucial for ensuring the reliability and functionality of web applications, and this exercise will provide a foundation for building more complex test suites. You'll be verifying that user input is correctly handled and displayed on a webpage.

Problem Description

You are tasked with creating a Jest test suite that utilizes Playwright to automate interactions with a simple HTML form. The form has two fields: "Name" (text input) and "Email" (text input). Upon submitting the form, a success message "Thank you, [Name]!" should appear below the form. Your tests should verify that:

  1. The form loads correctly.
  2. Entering a name and email, submitting the form, and verifying the success message appears with the correct name.
  3. Entering invalid email addresses (e.g., missing "@" symbol) results in an appropriate error message (assume a simple error message "Invalid email address" appears below the email field).

Key Requirements:

  • Use Playwright for browser automation.
  • Use Jest as the test runner.
  • Write tests in TypeScript.
  • The HTML for the form is provided (see below).
  • The tests should be robust and handle potential errors gracefully.

Expected Behavior:

  • Tests should pass if the form functions as described.
  • Tests should fail with clear error messages if the form's behavior deviates from the expected behavior.
  • The tests should be well-structured and easy to understand.

Edge Cases to Consider:

  • Empty name field.
  • Empty email field.
  • Invalid email formats (missing "@", missing domain, etc.).
  • Special characters in the name field.
  • Long name/email fields (though no specific length limits are imposed).

Examples

Example 1:

Input: Name: "Alice", Email: "alice@example.com"
Output: Success message: "Thank you, Alice!"
Explanation: The form is submitted with valid input, and the success message displays the entered name.

Example 2:

Input: Name: "Bob", Email: "bobexample.com"
Output: Error message: "Invalid email address"
Explanation: The email address is invalid (missing "@"), so the error message is displayed.

Example 3:

Input: Name: "", Email: "test@example.com"
Output: The form submits, but the success message is "Thank you, !" (empty name)
Explanation:  While not ideal, the form submits and displays a success message with an empty name.  The test should still verify the success message appears.

Constraints

  • Time Limit: Tests should execute within 5 seconds.
  • Input Format: The form fields accept standard text input.
  • HTML: The following HTML is provided and should not be modified:
<!DOCTYPE html>
<html>
<head>
    <title>Simple Form</title>
</head>
<body>
    <h1>Simple Form</h1>
    <form id="myForm">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Submit">
    </form>
    <div id="successMessage"></div>
    <div id="errorMessage"></div>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const successMessage = document.getElementById('successMessage');
            const errorMessage = document.getElementById('errorMessage');

            errorMessage.textContent = ''; // Clear previous error

            if (email.indexOf('@') === -1) {
                errorMessage.textContent = 'Invalid email address';
                return;
            }

            successMessage.textContent = `Thank you, ${name}!`;
        });
    </script>
</body>
</html>

Notes

  • You'll need to install Playwright, Jest, and TypeScript.
  • Consider using page.locator() for selecting elements.
  • Use page.fill() to enter text into input fields.
  • Use page.click() to simulate button clicks.
  • Use page.textContent() to verify the content of elements.
  • Think about how to structure your tests for readability and maintainability. Consider using describe and it blocks effectively.
  • The provided HTML includes a simple JavaScript implementation for form submission and validation. Your tests should interact with this JavaScript.
Loading editor...
typescript