Claude Code Plugins

Community-maintained marketplace

Feedback

opal-frontend-cypress-e2e

@hmcts/opal-frontend
8
0

Cypress end-to-end testing guidance for opal-frontend, including Cucumber feature layout, tags, step definitions, Actions or Flows, selectors, and accessibility specs. Use when adding or updating E2E scenarios.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name opal-frontend-cypress-e2e
description Cypress end-to-end testing guidance for opal-frontend, including Cucumber feature layout, tags, step definitions, Actions or Flows, selectors, and accessibility specs. Use when adding or updating E2E scenarios.

Opal Frontend Cypress E2E Testing

Overview

Use these rules when writing or updating Cypress E2E tests and Cucumber feature files in opal-frontend.

Feature Layout and Tags

  • Preferred home is cypress/e2e/functional/opal.
  • Feature files live under capability folders (for example, features/manualAccountCreation/**, features/fineAccountEnquiry/**).
  • Tag scenarios with @functional, @smoke, and Jira IDs so suites can target subsets.
  • Keep legacy suites in cypress/e2e/Old_functional_E2E_Tests; new scenarios should follow the opal layout.

Accessibility Coverage

  • Accessibility specs live alongside features and should navigate to each page, inject axe-core, run scans, and assert no violations.
  • When a new page or view is added to a feature, add or update its accessibility spec.

Step Definitions

  • Step definitions in cypress/support/step_definitions/newStyleSteps/** must be thin shims.
  • Each Given, When, Then should delegate to a single Action or Flow method.
  • Shared DB or setup logic belongs in databaseSteps or support/utils, not in steps.

Actions, Flows, and Selectors

  • Actions in cypress/e2e/functional/opal/actions/** wrap interactions, API stubs, and navigation using selectors from cypress/shared/selectors/**.
  • Flows in cypress/e2e/functional/opal/flows/** compose actions into business journeys and are the verbs exposed to steps and component specs.
  • Selectors are centralized. Add hooks in Angular templates and document them in cypress/shared/selectors/**. Avoid positional CSS.

Running a Feature

  • Run a single feature file with: yarn cypress run --browser chrome --spec 'cypress/e2e/functional/opal/features/manualAccountCreation/populateAndSubmit/PopulateAndSubmit.feature'

Handling Real Product Bugs

  • When a feature fails because of a real product bug, do not patch application behavior just to green the test.
  • Skip or xfail the test if unavoidable and report the underlying issue in the task update.