Back to skills
extension
Category: Development & EngineeringNo API key required

opal-frontend-cypress-e2e

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.

personAuthor: jakexiaohubgithub

Opal Frontend Cypress E2E Testing

Overview

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

Required References

  • For any E2E scenario creation or update, read references/E2E_New_Feature_Codex_Optimized_Instructions.md and follow it as the governing ruleset.
  • Keep references/E2E_Refactor_Codex_Optimized_Instructions.md as legacy reference material; consult it only when explicitly requested or when refactoring older features that need its legacy guidance.

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/** 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.