Automating Form Submissions with Playwright and Jest

This challenge focuses on building robust end-to-end tests for a simple web form using Playwright and Jest. You will learn to interact with web elements, perform common actions like typing and clicking, and assert expected outcomes, providing a solid foundation for automated testing of web applications.

Problem Description

Your task is to create a set of Playwright tests written in TypeScript, executed using the Jest test runner, to automate the interaction with a basic contact form on a pre-defined webpage. The tests should verify that users can successfully submit the form with valid data and that appropriate feedback is provided.

Key Requirements:

1. Setup Playwright with Jest: Configure your project to run Playwright tests using Jest as the test runner. This includes installing necessary dependencies and setting up the Jest configuration.
2. Navigate to the Form Page: Write a test that navigates to a specified URL containing the contact form.
3. Interact with Form Fields: Write tests that simulate user input for each field in the form (e.g., name, email, message).
   • Fill in the 'Name' input field.
   • Fill in the 'Email' input field.
   • Fill in the 'Message' textarea.
4. Submit the Form: Simulate a click on the 'Submit' button.
5. Verify Successful Submission: After submitting the form, assert that a success message is displayed on the page.
6. Handle Invalid Input (Optional but Recommended): Consider adding a test to check the behavior when submitting the form with invalid or missing data (e.g., an invalid email format, an empty required field).

Expected Behavior:

• When valid data is entered and the form is submitted, a "Thank you for your submission!" message should appear.
• (Optional) When invalid data is entered, appropriate error messages or visual cues should be present.

Edge Cases to Consider:

• What happens if the form fields are pre-populated?
• How do you handle asynchronous operations, such as network requests triggered by form submission?

Examples

Example 1: Successful Form Submission

Input: The user navigates to http://localhost:3000/contact (assuming a local development server). The user types "John Doe" into the 'Name' field. The user types "john.doe@example.com" into the 'Email' field. The user types "This is a test message." into the 'Message' field. The user clicks the 'Submit' button.

Output: The page displays the text "Thank you for your submission!".

Explanation: The test successfully fills all required fields with valid data and submits the form. The assertion checks for the expected success message.

Example 2: Handling Empty Required Field (Illustrative, not strictly required by initial prompt)

Input: The user navigates to http://localhost:3000/contact. The user leaves the 'Name' field empty. The user types "jane.doe@example.com" into the 'Email' field. The user types "Another message." into the 'Message' field. The user clicks the 'Submit' button.

Output: An error message like "Name is required." appears next to the 'Name' field, and the success message is not displayed.

Explanation: This hypothetical test checks how the form handles missing required input. The assertion would look for specific error indicators.

Constraints

• The tests must be written in TypeScript.
• The tests must use Playwright as the automation library.
• The tests must be executed using the Jest test runner.
• Assume a development server is running at http://localhost:3000 and hosts the contact form.
• The contact form will have input fields for 'Name' (id: name), 'Email' (id: email), a textarea for 'Message' (id: message), and a submit button (id: submit-button).
• The success message will have the text content "Thank you for your submission!" and will be contained within an element with the id success-message.

Notes

• You will need to install Playwright and Jest as development dependencies.
• Consider using Playwright's page.fill() for input fields and page.click() for buttons.
• Use page.waitForSelector() to ensure elements are present before interacting with them.
• Use Jest's expect() assertions to verify outcomes.
• A good starting point for Playwright setup with Jest can be found in the official Playwright documentation.
• Think about how to structure your tests using describe and it blocks for organization.
• You might want to create a simple HTML file and a basic web server (e.g., using http-server or a simple Node.js script) to host the form locally for testing purposes if you don't have an existing one.