tests-prompts/e2e-tests.md

Prompt 1 – Accessibility Enhancement for Test Resilience

Objective:
Prepare React components by improving accessibility.

---

Analyze the following React component and enhance it to maximize accessibility and E2E test robustness.

Focus on the following:

1. Add appropriate ARIA attributes to identify the roles, states, and properties of UI elements.
2. Ensure full keyboard navigation support, including tab order and focus visibility.
3. Use semantic HTML elements instead of generic containers (<div, <span) where appropriate.
4. Assign descriptive aria-label or aria-labelledby attributes to elements lacking textual content.
5. Integrate data-testid or data-qa attributes as a fallback for selectors when ARIA or semantics are insufficient.
6. Provide improved JSX output, with:
   • Inline comments explaining each accessibility change
   • Justification for replacing or modifying tags and attributes

The final version should be:

• Fully accessible
• Ready for stable E2E testing
• Maintainable and understandable by frontend developers

---

Prompt 2 – Page Object Model Generation for E2E Testing

Objective:
Generate Playwright Page Object Models (POM) that enable robust and maintainable E2E test automation by encapsulating UI interactions.

---

Based on the following application page HTML structure, generate a comprehensive Playwright Page Object Model using TypeScript.

Follow these best practices:

1. Use multiple selector strategies:

   • Prioritize aria-* attributes for accessibility-aware selectors
   • Use meaningful text content where applicable
   • Fallback on data-testid or data-qa attributes
   • Avoid brittle selectors like raw CSS class names or nth-child unless necessary

2. Implement self-healing patterns, such as:

   • Fallback selectors for dynamic content
   • Try-catch wrappers or optional waits for conditionally rendered elements

3. Create methods that reflect user behavior, such as:

   • fillForm(data)
   • submitLogin()
   • navigateToSection(sectionName)
   • assertErrorMessage(message)

4. Ensure type safety with TypeScript:

   • Define proper return types and argument interfaces
   • Avoid usage of any

5. Encapsulate logic to reduce test duplication:

   • PageObject should expose business-level actions, not implementation details

Structure the code as:

• A class per page/component
• Constructor receiving the Playwright Page instance
• Public methods for reusable user interactions
• Private helpers where necessary

---

Prompt 3 – Gherkin to Playwright E2E Test Generation

Objective:
Transform business-readable scenarios (in Gherkin format) into executable Playwright E2E tests using TypeScript and the Page Object Model pattern.

Convert the following Gherkin test scenarios into fully functional Playwright tests using TypeScript.

Guidelines:

1. Use the previously generated Page Object Models to drive interactions. Avoid direct DOM calls in the test files.

2. Implement each step from the Gherkin scenario:

   • Use beforeEach/afterEach for setup and cleanup
   • Structure tests using test.describe, test.beforeEach, test, and assertions

3. Follow the Arrange–Act–Assert (AAA) pattern:

   • Arrange: set up environment, mocks, or seed data
   • Act: execute user interactions
   • Assert: validate outcomes (UI feedback, navigation, etc.)

4. Handle authentication or navigation as reusable helpers (e.g., login as user, navigate to dashboard)

5. Write meaningful assertions:

   • Expect visibility, text content, form validity
   • Assert navigation URLs or component presence

6. Incorporate error handling and traceability:

   • Use try/catch when simulating edge/error cases
   • Add test.info().attach() or screenshots if supported

The generated test should be:

• Readable and maintainable
• Robust against UI changes
• Closely aligned with user stories and business logic