End-to-End Testing for a Simple E-commerce Product Page

You will create an end-to-end (E2E) test suite using Jest and Playwright to simulate user interactions with a simulated e-commerce product page. This challenge will help you understand how to test user flows, verify UI elements, and ensure the application behaves as expected from a user's perspective.

Problem Description

Your task is to build an E2E test suite for a simple, static HTML page that represents a product listing. This page will contain a product title, description, price, an "Add to Cart" button, and a display for the current cart item count. You will use Jest as your test runner and Playwright to control a headless browser.

Your E2E tests should cover the following core functionalities:

• Initial Page Load: Verify that the product details (title, description, price) are displayed correctly when the page loads.
• Add to Cart: Simulate a user clicking the "Add to Cart" button and verify that the cart item count updates accordingly.
• Multiple Additions: Test adding the same product to the cart multiple times and confirm the count increments correctly.
• Cart Persistence (Simulated): While we won't have a real backend, simulate scenarios where the cart count might be preserved (e.g., after a page refresh, though Playwright handles this implicitly).

Examples

Example 1: Initial Load Verification

Input: A static HTML file for a product page.
Output:
- The product title "Awesome Gadget" is visible.
- The product description "This is the most awesome gadget ever!" is visible.
- The product price "$99.99" is visible.
- The cart item count displays "0".

Explanation: Upon opening the product page, all initial product information should be present and the cart should be empty.

Example 2: Adding to Cart

Input: The product page from Example 1.
Action: User clicks the "Add to Cart" button.
Output:
- The cart item count updates to "1".

Explanation: After the first click on "Add to Cart", the cart count should increment from 0 to 1.

Example 3: Multiple Additions and Cart Count

Input: The product page, with the cart count already at "1" (simulating a previous addition).
Action: User clicks the "Add to Cart" button twice.
Output:
- The cart item count updates to "3".

Explanation: If the cart already has 1 item, clicking "Add to Cart" twice more should result in a total of 3 items.

Constraints

• Testing Framework: Jest must be used as the test runner.
• Browser Automation: Playwright must be used for browser automation.
• Language: All test code must be written in TypeScript.
• Page Structure: The product page will be a simple HTML file. You will be provided with the HTML structure. Assume no dynamic data fetching from an API.
• No Backend: For this challenge, assume no actual backend is involved. The cart count update is purely a client-side DOM manipulation.

Notes

• You will need to set up a local development environment with Node.js, npm/yarn, Jest, and Playwright.
• You'll need to create a mock HTML file for your product page.
• Consider how to select HTML elements within your Playwright tests (e.g., by id, class, data-testid). Using data-testid attributes is a good practice for E2E tests.
• Think about how to handle asynchronous operations, as browser interactions are inherently asynchronous. Playwright provides async/await for this.
• The goal is to mimic real user interactions and verify the resulting state of the UI.