Why are semantic selectors required instead of CSS classes?

Semantic selectors like getByRole or getByLabel are preferred because they are more resilient to UI refactors and ensure the application is accessible.

What is Gate 5 in the frontend development cycle?

Gate 5 is the End-to-End (E2E) testing phase that ensures all user flows are validated in real browser environments using Playwright before moving to performance optimization.

How does the skill prevent flaky tests?

The skill requires tests to pass three times consecutively. If a test fails once but passes later, it is flagged as flaky and must be stabilized before passing the gate.

Can it test error states like API failures?

Yes, testing error paths such as 500 errors, validation failures, and network timeouts is a mandatory requirement for completing the E2E gate.

Does this skill support cross-browser testing?

Yes, it mandates testing across three major browser engines: Chromium, Firefox, and WebKit (Safari) to ensure consistent behavior for all users.

Frontend E2E Testing Gate

Name: Frontend E2E Testing Gate
Author: luanrodrigues

byluanrodrigues

•

보안 및 테스팅

Automates comprehensive end-to-end testing cycles using Playwright to validate user flows across multiple browsers and responsive viewports.

This skill serves as Gate 5 in the specialized frontend development cycle, orchestrating the transition from visual components to fully validated user experiences. It ensures that every user flow defined during the design phase is backed by robust Playwright E2E tests, covering happy paths, error handling, and edge cases. By enforcing cross-browser validation on Chromium, Firefox, and WebKit and requiring semantic selector usage, it provides a rigorous quality assurance layer that eliminates flaky tests and ensures production readiness.

주요 기능

01Flaky test detection through mandatory consecutive pass requirements

022 GitHub stars

03Automated Playwright test orchestration and execution

04Mandatory cross-browser validation (Chromium, Firefox, WebKit)

05Comprehensive coverage of happy and error paths (API 500, timeouts)

06Enforcement of semantic and ARIA role-based selectors

사용 사례

01Validating complex multi-step transaction and authentication flows

02Ensuring frontend resilience against backend failures and timeouts

03Verifying responsive layout functionality across mobile and desktop viewports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add luanrodrigues/ia-frmwrk dev-frontend-e2e

For use in Claude.ai and ChatGPT

주요 기능

01Flaky test detection through mandatory consecutive pass requirements

022 GitHub stars

03Automated Playwright test orchestration and execution

04Mandatory cross-browser validation (Chromium, Firefox, WebKit)

05Comprehensive coverage of happy and error paths (API 500, timeouts)

06Enforcement of semantic and ARIA role-based selectors

사용 사례

01Validating complex multi-step transaction and authentication flows

02Ensuring frontend resilience against backend failures and timeouts

03Verifying responsive layout functionality across mobile and desktop viewports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add luanrodrigues/ia-frmwrk dev-frontend-e2e

For use in Claude.ai and ChatGPT