Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ install-state.gz
!/vendor/**
!.vscode/settings.json
.DS_Store
cypress-a11y-report.json
/bin
/gopath
/Godeps/_workspace/src/github.com/openshift/console
Expand All @@ -31,7 +30,6 @@ cypress-a11y-report.json
/frontend/e2e/.test-config.json
/frontend/test-results/
/frontend/playwright-report/
/frontend/gui_test_screenshots
/frontend/package-lock.json
/frontend/po-files
/dynamic-demo-plugin/**/node_modules
Expand Down
6 changes: 3 additions & 3 deletions AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Before generating or modifying code, always consult the relevant file(s) to ensu

- **Monorepo:** `frontend/` (React + TypeScript, yarn workspaces), `pkg/` - Go backend code, `cmd/` - Go CLI commands
- **Key packages:** `@console/dynamic-plugin-sdk` (public API), `@console/shared` (utils), `@console/internal` (`public` folder - core UI/k8s)
- **Testing:** Jest (unit), Cypress (E2E), Go tests (backend). Read [TESTING.md](TESTING.md) for patterns and best practices. Use the `gen-rtl-test` skill for React Testing Library test generation.
- **Testing:** Jest (unit), Playwright (E2E), Go tests (backend). Read [TESTING.md](TESTING.md) for patterns and best practices. Use the `gen-rtl-test` skill for React Testing Library test generation.

## Static plugins

Expand Down Expand Up @@ -131,6 +131,6 @@ These files are the single source of truth for architecture, coding standards, a
- [Extension Types Reference](frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md) - complete extension type definitions, naming conventions (`console.*`), and deprecation notices.
- [Console API Documentation](frontend/packages/console-dynamic-plugin-sdk/docs/api.md) - React components, hooks, utilities, and TypeScript types exported by the SDK.

## Playwright migration
## Playwright E2E tests

We are migrating Cypress e2e tests to Playwright. Use `/migrate-cypress` to convert test files and `/debug-test` to fix failing tests. Shared migration context (translation tables, structural rules, checklist) is in `.claude/migration-context.md`.
E2E tests use Playwright. Tests live under `frontend/e2e/tests/` and are configured via `frontend/playwright.config.ts`. Use `/debug-test` to fix failing tests.
3 changes: 1 addition & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ FROM registry.ci.openshift.org/ocp/builder:rhel-9-base-nodejs-openshift-5.0 AS n
ADD . .
USER 0

ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 \
CYPRESS_INSTALL_BINARY=0
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

RUN container-entrypoint ./build-frontend.sh

Expand Down
4 changes: 1 addition & 3 deletions Dockerfile.builder
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@ RUN chmod 777 -R ${HOME}

RUN apt-get update \
&& apt-get install --no-install-recommends -y -q \
curl wget git unzip bzip2 jq expect \
libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
# ^^ additional Cypress dependencies: https://docs.cypress.io/guides/guides/continuous-integration.html#Dependencies
curl wget git unzip bzip2 jq expect

RUN curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.27.1/bin/linux/$(go env GOARCH)/kubectl && \
chmod +x ./kubectl && \
Expand Down
4 changes: 2 additions & 2 deletions INTERNATIONALIZATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ t('key' + id)
```

* The optional i18nKey property on the [react-i18next Trans component](https://react.i18next.com/latest/trans-component) should only be used as a last resort. There is a known (rare) issue with the parser, where it will sometimes incorrectly generate a key that contains HTML tags. If this is the case, you will see a missingKey error in the developer tools of your browser or in our end to end tests. In this instance, the i18nKey prop should be used and made the same as the text being internationalized. HTML tags like `<strong>` can be used directly in the i18nKey prop.
* Write tests for pseudolocalized code in Cypress
* Write tests for pseudolocalized code in Playwright

#### Adding internationalization to a new package
Whenever a new package is added, you will need to make a few changes so it is picked up by our existing internationalization tools.
Expand Down Expand Up @@ -114,7 +114,7 @@ These scripts can all be found in `./frontend/i18n-scripts`.
For more information, please review the [README](./frontend/i18n-scripts/README.md).

#### Testing
We test that internationalization is working for various pages and components using the [i18next-pseudo](https://github.com/MattBoatman/i18next-pseudo) JavaScript library, which returns translated strings in "pseudolocalization" format. Our Cypress custom commands [cy.isPseudoLocalized()](https://github.com/openshift/console/blob/9c930b7b411f5e88f2f890639159e09bdadb78dc/frontend/packages/integration-tests-cypress/support/i18n.ts#L45) and [cy.testI18n()](https://github.com/openshift/console/blob/9c930b7b411f5e88f2f890639159e09bdadb78dc/frontend/packages/integration-tests-cypress/support/i18n.ts#L13) append query params to URLs to invoke "pseudolocalization" and are used in various test suites such as [pseudolocalization.cy.ts](https://github.com/openshift/console/blob/175a6a274204bbe44def1963daf572e4463c36f9/frontend/packages/integration-tests-cypress/tests/i18n/pseudolocalization.cy.ts#L27) to verify strings in the masthead, dashboard, navigation menu, list views, and detail pages are translated.
We test that internationalization is working for various pages and components using the [i18next-pseudo](https://github.com/MattBoatman/i18next-pseudo) JavaScript library, which returns translated strings in "pseudolocalization" format. Playwright E2E tests under `frontend/e2e/tests/console/i18n/` append query params to URLs to invoke "pseudolocalization" and verify strings in the masthead, dashboard, navigation menu, list views, and detail pages are translated.

#### Supported Languages representation
Supported languages are represented using the ISO 639-1 Code defined in `frontend/packages/console-app/src/components/user-preferences/language/const.ts` with the exception of Chinese. While locale directories for Chinese still follow the ISO 639-1 Code format, the region code is also included to distinguish the supported simplified Chinese from other variants.
63 changes: 14 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,67 +258,32 @@ Run frontend tests:

### Integration Tests

Cypress integration tests are implemented in [Cypress.io](https://www.cypress.io/).
E2E integration tests are implemented using [Playwright](https://playwright.dev/). Tests live under `frontend/e2e/tests/` and are configured via [frontend/playwright.config.ts](frontend/playwright.config.ts).

To install Cypress:
**Important:** Set `BRIDGE_KUBEADMIN_PASSWORD` and `BRIDGE_BASE_ADDRESS` environment variables in your shell when testing against a live cluster.

```
cd frontend
yarn run cypress install
```

Launch Cypress test runner:
#### Running Playwright tests locally

```
cd frontend
oc login ...
yarn run test-cypress-console
```

This will launch the Cypress Test Runner UI in the `console` package, where you can run one or all Cypress tests.

**Important:** when testing with authentication, set `BRIDGE_KUBEADMIN_PASSWORD` environment variable in your shell.

#### Execute Cypress in different packages

An alternate way to execute cypress tests is via [frontend/integration-tests/test-cypress.sh](frontend/integration-tests/test-cypress.sh) which takes a `-p <package>` parameter to allow execution in different packages. It also can run Cypress tests in the Test Runner UI or in `-- headless` mode:

```
console/frontend > ./integration-tests/test-cypress.sh

Runs Cypress tests in Test Runner or headless mode
Usage: test-cypress [-p] <package> [-s] <filemask> [-h true]
'-p <package>' may be 'console, 'olm' or 'devconsole'
'-s <specmask>' is a file mask for spec test files, such as 'tests/monitoring/*'. Used only in headless mode when '-p' is specified.
'-h true' runs Cypress in headless mode. When omitted, launches Cypress Test Runner
Examples:
./integration-tests/test-cypress.sh // displays this help text
./integration-tests/test-cypress.sh -p console // opens Cypress Test Runner for console tests
./integration-tests/test-cypress.sh -p olm // opens Cypress Test Runner for OLM tests
./integration-tests/test-cypress.sh -h true // runs all packages in headless mode
./integration-tests/test-cypress.sh -p olm -h true // runs OLM tests in headless mode
./integration-tests/test-cypress.sh -p console -s 'tests/crud/*' -h true // runs console CRUD tests in headless mode
export BRIDGE_BASE_ADDRESS="$(oc get consoles.config.openshift.io cluster -o jsonpath='{.status.consoleURL}')"
export BRIDGE_KUBEADMIN_PASSWORD=<your-kubeadmin-password>
yarn test-playwright # run all tests
yarn test-playwright --project=smoke # run smoke tests only
yarn test-playwright --project=console # run console tests only
yarn test-playwright --headed # run with browser visible
yarn test-playwright --debug # run in debug mode
yarn test-playwright --ui # run with Playwright UI
```

When running in headless mode, Cypress will test using its integrated Electron browser, but if you want to use Chrome or Firefox instead, set `BRIDGE_E2E_BROWSER_NAME` environment variable in your shell with the value `chrome` or `firefox`.

[**_More information on Console's Cypress usage_**](frontend/packages/integration-tests/README.md)

[**_More information on DevConsole's Cypress usage_**](frontend/packages/dev-console/integration-tests/README.md)

#### How the Integration Tests Run in CI

The end-to-end tests run against pull requests using [ci-operator](https://github.com/openshift/ci-operator/).
The tests are defined in [this manifest](https://github.com/openshift/release/blob/main/ci-operator/jobs/openshift/console/openshift-console-main-presubmits.yaml)
in the [openshift/release](https://github.com/openshift/release) repo and were generated with [ci-operator-prowgen](https://github.com/openshift/ci-operator-prowgen).

CI runs the [test-prow-e2e.sh](test-prow-e2e.sh) script, which runs [frontend/integration-tests/test-cypress.sh](frontend/integration-tests/test-cypress.sh).

`test-cypress.sh` runs all Cypress tests, in all 'packages' (console, olm, and devconsole), in `-- headless` mode via:

`test-cypress.sh -h true`
The tests are defined in the [ci-operator config](https://github.com/openshift/release/blob/main/ci-operator/config/openshift/console/openshift-console-main.yaml)
in the [openshift/release](https://github.com/openshift/release) repo.

For more information on `test-cypress.sh` usage please see [Execute Cypress in different packages](#execute-cypress-in-different-packages)
CI runs the [test-prow-e2e.sh](test-prow-e2e.sh) script, which runs [frontend/integration-tests/test-playwright-e2e.sh](frontend/integration-tests/test-playwright-e2e.sh).

### Internationalization

Expand Down
32 changes: 7 additions & 25 deletions TESTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,16 @@ Focuses on testing individual React components, hooks, and utilities in isolatio
- Libraries: `@testing-library/react`, `@testing-library/jest-dom`

### Integration tests
- Tool: Cypress
- Specialized test suites for components:
- Tool: Playwright
- Specialized test suites (projects) for:
- Core Console
- OLM (Operator Lifecycle Manager)
- Dev Console
- Shipwright
- Web Terminal
- Telemetry
- Helm
- Knative
- Topology
- Web Terminal
- Smoke
- Helm
- Topology
- Supports headless and interactive modes
Expand Down Expand Up @@ -154,23 +155,4 @@ Prerequisites: `oc login` to a cluster, set `BRIDGE_KUBEADMIN_PASSWORD` and `WEB
- `yarn test-playwright-admin` — run only admin persona tests
- `yarn test-playwright-developer` — run only developer persona tests

## End-to-End Testing with Cypress (legacy)

Integration/E2E tests validate full user workflows against a real/simulated OpenShift cluster using Cypress + Cucumber (Gherkin BDD).

- **Focus Areas**: Core Console, OLM, Dev Console, Shipwright, Web Terminal, Telemetry, Knative, Helm, Topology.
- **Key Characteristics**: Gherkin scenarios (.feature files) + step definitions; supports headless/interactive modes; integrates axe-core for a11y.

- **Structure**: Use Gherkin for scenarios (Given/When/Then) in .feature files; implement steps in JS/TS.
- **Selectors**: Prefer `data-test` attributes (e.g., `cy.get('[data-test="create-deployment"]')`) over brittle CSS/ARIA.
- **Async Handling**: Use `cy.wait` sparingly; prefer `cy.intercept` for API mocks + assertions.
- **Mocking**: MSW for API responses; mock external services (e.g., K8s API) to avoid cluster dependency.

### Running E2E Tests (Setup & Commands)

For full prerequisites (cluster login, Cypress install), see [README.md#integration-tests](README.md#integration-tests).

See `package.json` scripts for a list of available commands to run E2E tests in different modes.
- `yarn test-cypress-<suite>` to open an interactive window for a specific Cypress test suite (e.g., `yarn test-cypress-olm`, `yarn test-cypress-devconsole`). **AI agents may struggle with interactive mode**.
- `yarn test-cypress-<suite>-headless` to run the same suite in headless mode (e.g., `yarn test-cypress-olm-headless`)
- `yarn test-cypress-<suite>-nightly` runs an extended suite of tests in headless mode, intended for CI/nightly runs (e.g., `yarn test-cypress-olm-nightly`)
See [README.md#integration-tests](README.md#integration-tests) for full prerequisites and running instructions.
108 changes: 0 additions & 108 deletions frontend/integration-tests/test-cypress.sh

This file was deleted.

2 changes: 0 additions & 2 deletions frontend/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,10 @@ export default defineConfig({
testPathIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/public/dist',
'<rootDir>/.*/integration-tests',
'<rootDir>/e2e',
],
modulePathIgnorePatterns: [
'<rootDir>/public/dist',
'<rootDir>/.*/integration-tests',
'<rootDir>/e2e',
],
testRegex: '.*\\.spec\\.(ts|tsx|js|jsx)$',
Expand Down
Loading