CONSOLE-5196: Replace page.locator with getByTestId in Playwright tests by rhamilto · Pull Request #16873 · openshift/console

rhamilto · 2026-07-28T16:10:06Z

Analysis / Root cause:
The Playwright e2e tests use page.locator('[data-test-id="..."]') and similar CSS attribute selectors instead of the idiomatic page.getByTestId() API. Since testIdAttribute is configured to data-test in playwright.config.ts, these legacy attributes (data-test-id, data-test-selector) are not matched by getByTestId() without first adding a corresponding data-test attribute to the React source.

Solution description:
Three incremental commits replace legacy locator patterns with getByTestId():

data-test-id → getByTestId() — Adds data-test alongside existing data-test-id on 4 React components (Dashboard, alert-routing-modal inputs, command-line-tools, node dashboard DetailsCard), then replaces 10 page.locator('[data-test-id="..."]') calls across 5 test/page files.
data-test-selector → getByTestId() — Adds data-test alongside existing data-test-selector on the details-item.tsx label element, then replaces 6 locator calls in console-notification.spec.ts.
locator('[data-test="..."]') → getByTestId() — Replaces 4 remaining locator('[data-test="x"]') calls with the equivalent getByTestId('x') in console-notification.spec.ts, channel-modal.spec.ts, and cluster-settings-page.ts.

Total: 13 files changed, 18 locator calls replaced.

Screenshots / screen recording:
N/A — no visual changes.

Test setup:
Console running locally or in CI.

Test cases:

npx playwright test e2e/tests/console/crd-extensions/console-notification.spec.ts — passes (1 pre-existing failure in crd-test-utils.ts unrelated to these changes)
npx playwright test e2e/tests/console/cluster-settings/channel-modal.spec.ts — passes
yarn eslint on all changed files — clean

Browser conformance:

Chrome
Firefox
Safari (or Epiphany on Linux)

Additional info:
Part of ongoing effort to migrate Playwright tests to idiomatic APIs per the locator priority in .claude/migration-context.md: getByTestId > getByRole > getByText > locator.

Reviewers and assignees:

🤖 Generated with Claude Code

Summary by CodeRabbit

Tests
- Improved end-to-end test reliability by standardizing element targeting for perspective switching, cluster settings, alert routing, notifications, command-line tools, and dashboard/polling views.
- Updated form and details-field assertions to use consistent test-id selectors across the affected scenarios.
Refactor
- Standardized UI test attributes on key dashboard and details components (including details cards, command-line tool headings, alert routing inputs, and details item help text).
- No user-facing functionality or behavior changed.

openshift-merge-bot · 2026-07-28T16:10:08Z

Pipeline controller notification
This repo is configured to use the pipeline controller. Second-stage tests will be triggered either automatically or after lgtm label is added, depending on the repository configuration. The pipeline controller will automatically detect which contexts are required and will utilize /test Prow commands to trigger the second stage.

For optional jobs, comment /test ? to see a list of all defined jobs. To trigger manually all jobs from second stage use /pipeline required command.

This repository is configured in: LGTM mode

openshift-ci-robot · 2026-07-28T16:10:10Z

@rhamilto: This pull request references CONSOLE-5196 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the epic to target the "5.0.0" version, but no target version was set.

Details

In response to this:

Analysis / Root cause:
The Playwright e2e tests use page.locator('[data-test-id="..."]') and similar CSS attribute selectors instead of the idiomatic page.getByTestId() API. Since testIdAttribute is configured to data-test in playwright.config.ts, these legacy attributes (data-test-id, data-test-selector) are not matched by getByTestId() without first adding a corresponding data-test attribute to the React source.

Solution description:
Three incremental commits replace legacy locator patterns with getByTestId():

data-test-id → getByTestId() — Adds data-test alongside existing data-test-id on 4 React components (Dashboard, alert-routing-modal inputs, command-line-tools, node dashboard DetailsCard), then replaces 10 page.locator('[data-test-id="..."]') calls across 5 test/page files.

data-test-selector → getByTestId() — Adds data-test alongside existing data-test-selector on the details-item.tsx label element, then replaces 6 locator calls in console-notification.spec.ts.

locator('[data-test="..."]') → getByTestId() — Replaces 4 remaining locator('[data-test="x"]') calls with the equivalent getByTestId('x') in console-notification.spec.ts, channel-modal.spec.ts, and cluster-settings-page.ts.

Total: 13 files changed, 18 locator calls replaced.

Screenshots / screen recording:
N/A — no visual changes.

Test setup:
Console running locally or in CI.

Test cases:

npx playwright test e2e/tests/console/crd-extensions/console-notification.spec.ts — passes (1 pre-existing failure in crd-test-utils.ts unrelated to these changes)

npx playwright test e2e/tests/console/cluster-settings/channel-modal.spec.ts — passes

yarn eslint on all changed files — clean

Browser conformance:

Chrome

Firefox

Safari (or Epiphany on Linux)

Additional info:
Part of ongoing effort to migrate Playwright tests to idiomatic APIs per the locator priority in .claude/migration-context.md: getByTestId > getByRole > getByText > locator.

Reviewers and assignees:

🤖 Generated with Claude Code

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

coderabbitai · 2026-07-28T16:10:31Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: c61a2039-6855-4032-bc49-a019ae7808e6

📥 Commits

Reviewing files that changed from the base of the PR and between da1f149 and c344267.

📒 Files selected for processing (13)

frontend/e2e/pages/base-page.ts
frontend/e2e/pages/cluster-settings-page.ts
frontend/e2e/tests/console/app/poll-console-updates.spec.ts
frontend/e2e/tests/console/cluster-settings/alertmanager/alertmanager.spec.ts
frontend/e2e/tests/console/cluster-settings/channel-modal.spec.ts
frontend/e2e/tests/console/crd-extensions/console-cli-download.spec.ts
frontend/e2e/tests/console/crd-extensions/console-notification.spec.ts
frontend/e2e/tests/smoke/developer/smoke-test.spec.ts
frontend/packages/console-app/src/components/nodes/node-dashboard/DetailsCard.tsx
frontend/packages/console-shared/src/components/dashboard/Dashboard.tsx
frontend/public/components/command-line-tools.tsx
frontend/public/components/modals/alert-routing-modal.tsx
frontend/public/components/utils/details-item.tsx

🚧 Files skipped from review as they are similar to previous changes (11)

frontend/e2e/pages/cluster-settings-page.ts
frontend/e2e/tests/smoke/developer/smoke-test.spec.ts
frontend/packages/console-shared/src/components/dashboard/Dashboard.tsx
frontend/e2e/tests/console/cluster-settings/channel-modal.spec.ts
frontend/e2e/tests/console/crd-extensions/console-cli-download.spec.ts
frontend/packages/console-app/src/components/nodes/node-dashboard/DetailsCard.tsx
frontend/public/components/modals/alert-routing-modal.tsx
frontend/public/components/utils/details-item.tsx
frontend/public/components/command-line-tools.tsx
frontend/e2e/tests/console/crd-extensions/console-notification.spec.ts
frontend/e2e/tests/console/cluster-settings/alertmanager/alertmanager.spec.ts

Walkthrough

Frontend test hooks and Playwright end-to-end selectors are standardized across dashboard, details, command-line, alert-routing, channel, notification, and perspective-switching components without changing test behavior.

Changes

Selector normalization

Layer / File(s)	Summary
UI test hook updates `frontend/packages/console-app/...`, `frontend/packages/console-shared/...`, `frontend/public/components/...`	Components add matching `data-test` attributes while retaining existing test IDs.
Page object selector updates `frontend/e2e/pages/*.ts`	Page objects use `getByTestId` for perspective and channel dropdown controls.
End-to-end selector updates `frontend/e2e/tests/...`	Console and smoke tests replace legacy attribute locators with `getByTestId` while preserving existing assertions and interactions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: cajieh, rawagner

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly states the main change: replacing Playwright locators with getByTestId across tests.
Description check	✅ Passed	The PR description follows the template with root cause, solution, test setup, test cases, and extra context.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	No Ginkgo test titles were changed: the diff contains only TS/TSX/docs/config files and zero .go files, so this check is not applicable.
Test Structure And Quality	✅ Passed	PASS: The PR only changes frontend Playwright files; no Ginkgo/cluster test code is touched, so the Ginkgo-specific checklist is not applicable.
Microshift Test Compatibility	✅ Passed	Selector-only Playwright changes; no new Ginkgo It/Describe/Context/When tests or new MicroShift-unsupported API usage were added.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	This PR only swaps Playwright selectors; no new Ginkgo tests or SNO-unsafe multi-node assumptions were added.
Topology-Aware Scheduling Compatibility	✅ Passed	PASS: Diff is frontend/e2e/UI only; no manifests/controllers, replica counts, affinity, tolerations, or node selectors were introduced.
Ote Binary Stdout Contract	✅ Passed	No changed file adds stdout writes in main/suite setup; the only console output is in unrelated build/config scripts, not the OTE binary path.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	Only selector/data-test updates were made; no new Ginkgo tests or IPv4/external-network assumptions were added.
No-Weak-Crypto	✅ Passed	No MD5/SHA1/DES/RC4/3DES/Blowfish/ECB, custom crypto, or secret/token timing comparisons found in the PR’s changed frontend files.
Container-Privileges	✅ Passed	Changed files are frontend/code-only; diff scan found no K8s/container manifests or privileged settings like privileged:true, hostNetwork, or allowPrivilegeEscalation.
No-Sensitive-Data-In-Logs	✅ Passed	No console/logger calls or other log output were added in the changed files; the only sensitive term found is a `secret` prop passed to a request, not logged.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

_{Comment @coderabbitai help to get the list of available commands.}

rhamilto · 2026-07-28T17:55:35Z

/pipeline required

openshift-merge-bot · 2026-07-28T17:55:38Z

Scheduling tests matching the pipeline_run_if_changed or not excluded by pipeline_skip_if_only_changed parameters:
/test e2e-gcp-console
/test e2e-playwright

rhamilto · 2026-07-29T00:21:00Z

Flakes in other tests.
/test e2e-playwright

rhamilto · 2026-07-29T00:26:21Z

Flakes in other tests.
/test e2e-playwright

Add data-test attributes alongside existing data-test-id attributes in React source components so Playwright's getByTestId() can target them (testIdAttribute is configured to match data-test). Then replace all page.locator('[data-test-id="..."]') calls with idiomatic getByTestId() in e2e tests and page objects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add data-test attribute alongside existing data-test-selector on the DetailsItem label element in details-item.tsx (the value element already had one). Then replace all page.locator('[data-test-selector="..."]') calls with getByTestId() in console-notification.spec.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

rhamilto · 2026-07-29T00:33:01Z

Flakes in other tests.
/test e2e-playwright

rhamilto · 2026-07-29T11:41:35Z

/test e2e-playwright

rhamilto · 2026-07-29T14:31:49Z

/approve
/verified by CI
/label px-approved
/label docs-approved

openshift-ci-robot · 2026-07-29T14:32:01Z

@rhamilto: This PR has been marked as verified by CI.

Details

In response to this:

/approve
/verified by CI
/label px-approved
/label docs-approved

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

logonoff

/lgtm

openshift-merge-bot · 2026-07-29T14:37:39Z

Tests from second stage were triggered manually. Pipeline can be controlled only manually, until HEAD changes. Use command to trigger second stage.

openshift-ci · 2026-07-29T14:37:40Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, rhamilto

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [logonoff,rhamilto]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

logonoff · 2026-07-29T14:59:24Z

/pipeline required

openshift-merge-bot · 2026-07-29T14:59:28Z

Scheduling tests matching the pipeline_run_if_changed or not excluded by pipeline_skip_if_only_changed parameters:
/test e2e-gcp-console
/test e2e-playwright

rhamilto · 2026-07-29T17:20:01Z

/test backend

openshift-ci · 2026-07-29T17:44:07Z

@rhamilto: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Jul 28, 2026

openshift-ci Bot requested review from cajieh and rawagner July 28, 2026 16:19

coderabbitai Bot mentioned this pull request Jul 28, 2026

CONSOLE-5196: Fix Playwright e2e flakes and CI reliability #16863

Merged

8 tasks

openshift-ci Bot added component/core Related to console core functionality component/dashboard Related to dashboard approved Indicates a PR has been approved by an approver from all required OWNERS files. component/shared Related to console-shared labels Jul 28, 2026

openshift-ci Bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 29, 2026

rhamilto force-pushed the CONSOLE-5196-cleanup branch from fa9a71b to 88dee0f Compare July 29, 2026 00:26

rhamilto force-pushed the CONSOLE-5196-cleanup branch from 88dee0f to da1f149 Compare July 29, 2026 00:28

openshift-ci Bot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 29, 2026

rhamilto and others added 3 commits July 28, 2026 20:31

Replace locator('[data-test=...]') with getByTestId()

c344267

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

rhamilto force-pushed the CONSOLE-5196-cleanup branch from da1f149 to c344267 Compare July 29, 2026 00:32

openshift-ci-robot added the verified Signifies that the PR passed pre-merge verification criteria label Jul 29, 2026

openshift-ci Bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Jul 29, 2026

logonoff approved these changes Jul 29, 2026

View reviewed changes

openshift-ci Bot assigned logonoff Jul 29, 2026

openshift-ci Bot added the lgtm Indicates that a PR is ready to be merged. label Jul 29, 2026

openshift-merge-bot Bot merged commit e6cdc2c into openshift:main Jul 29, 2026
11 checks passed

logonoff deleted the CONSOLE-5196-cleanup branch July 29, 2026 17:52

Uh oh!

Conversation

rhamilto commented Jul 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

openshift-merge-bot Bot commented Jul 28, 2026

Uh oh!

openshift-ci-robot commented Jul 28, 2026 • edited by openshift-ci Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

rhamilto commented Jul 28, 2026

Uh oh!

openshift-merge-bot Bot commented Jul 28, 2026

Uh oh!

rhamilto commented Jul 29, 2026

Uh oh!

rhamilto commented Jul 29, 2026

Uh oh!

rhamilto commented Jul 29, 2026

Uh oh!

rhamilto commented Jul 29, 2026

Uh oh!

rhamilto commented Jul 29, 2026

Uh oh!

openshift-ci-robot commented Jul 29, 2026

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-merge-bot Bot commented Jul 29, 2026

Uh oh!

openshift-ci Bot commented Jul 29, 2026

Uh oh!

logonoff commented Jul 29, 2026

Uh oh!

openshift-merge-bot Bot commented Jul 29, 2026

Uh oh!

rhamilto commented Jul 29, 2026

Uh oh!

openshift-ci Bot commented Jul 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rhamilto commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

openshift-ci-robot commented Jul 28, 2026 •

edited by openshift-ci Bot

Loading

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading