Implementing Page Objects with Jest for Web UI Testing

Page Objects are a crucial design pattern for web UI testing, promoting code reusability, maintainability, and readability. This challenge asks you to implement a simple Page Object for a hypothetical "Login Page" and write Jest tests to verify its functionality. Successfully completing this challenge demonstrates understanding of Page Object principles and how to integrate them with a testing framework like Jest.

Problem Description

You are tasked with creating a Page Object for a login page on a website. The login page has the following elements:

• Username Input Field: An input field where the user enters their username. Its selector is #username.
• Password Input Field: An input field where the user enters their password. Its selector is #password.
• Login Button: A button that triggers the login process. Its selector is button[type="submit"].
• Success Message: A paragraph element that appears after successful login. Its selector is #success-message.
• Error Message: A paragraph element that appears after failed login. Its selector is #error-message.

You need to:

1. Create a LoginPage class: This class will encapsulate all interactions with the login page elements. It should have methods for:

   • open(): Navigates to the login page URL (assume it's https://example.com/login).
   • setUsername(username: string): Enters the provided username into the username input field.
   • setPassword(password: string): Enters the provided password into the password input field.
   • clickLoginButton(): Clicks the login button.
   • getSuccessMessage(): Returns the text content of the success message element.
   • getErrorMessage(): Returns the text content of the error message element.

2. Write Jest tests: Create at least three Jest tests to verify the following:

   • Successful Login: Verify that a successful login displays the correct success message.
   • Failed Login: Verify that an incorrect login displays the correct error message.
   • Element Existence: Verify that all the elements (username input, password input, login button, success message, error message) exist on the page after opening the login page.

Assume you have a testing library like jest-dom installed for assertions. You can use document.querySelector to locate elements.

Examples

Example 1: Successful Login

Input: Username: "validUser", Password: "validPassword", Expected Success Message: "Login successful!"
Output: The test should pass, asserting that `getSuccessMessage()` returns "Login successful!".
Explanation: The test navigates to the login page, enters valid credentials, clicks the login button, and then asserts that the success message is displayed correctly.

Example 2: Failed Login

Input: Username: "invalidUser", Password: "invalidPassword", Expected Error Message: "Invalid credentials."
Output: The test should pass, asserting that `getErrorMessage()` returns "Invalid credentials.".
Explanation: The test navigates to the login page, enters invalid credentials, clicks the login button, and then asserts that the error message is displayed correctly.

Example 3: Element Existence

Input: None (checks for element presence)
Output: The test should pass, asserting that all elements (username input, password input, login button, success message, error message) are present in the DOM.
Explanation: The test navigates to the login page and uses `document.querySelector` to check if each element exists.

Constraints

• The login page URL is fixed at https://example.com/login.
• You must use TypeScript.
• You are free to use any testing library (e.g., jest-dom) for assertions.
• The tests should be written using Jest.
• Focus on the Page Object implementation and the core Jest tests. No need to mock network requests or implement a full-fledged authentication system. Assume the page loads and elements are present.

Notes

• Consider using a helper function to check if an element exists in the DOM.
• Think about how to structure your LoginPage class to make it reusable and easy to maintain.
• The success and error messages are hardcoded for simplicity. In a real-world scenario, these might be retrieved from configuration or localization files.
• This challenge focuses on the fundamental concepts of Page Objects and Jest testing. More advanced techniques like waiting for elements to load or handling asynchronous operations are beyond the scope of this exercise.