Improve Playwright test patterns in VariablePage (#63965) by kimimgo · Pull Request #63979 · apache/airflow

kimimgo · 2026-03-20T09:20:28Z

Changes in `VariablePage.ts`

Before	After	Checklist item
`tr:has-text(key)`	`tableRows.filter({ hasText: key })`	CSS :has-text() → user-facing locators
`[id^="checkbox"][id":control"]`	`getByRole('checkbox')`	CSS attr selector → role-based
`page.waitForFunction()` with DOM queries	`Promise.race` of locator `waitFor()`	waitForFunction → locator-based waiting
`thead input[type='checkbox']`	`thead getByRole('checkbox')`	CSS selector → role-based

No test coverage or behavior changes. Test patterns only.

- Replace CSS :has-text() with locator.filter({ hasText }) in rowByKey - Replace CSS attribute selector with getByRole('checkbox') in selectRow - Replace page.waitForFunction() DOM queries with locator-based waiting (Promise.race of noData text vs first table row) - Replace CSS input[type='checkbox'] with getByRole('checkbox') in selectAllCheckbox Aligns with Playwright best practices per apache#63036.

boring-cyborg · 2026-03-20T09:20:32Z

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
Be sure to read the Airflow Coding style.
Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
Apache Airflow is a community-driven project and together we are making it better 🚀.
In case of doubts contact the developers at:
Mailing List: dev@airflow.apache.org
Slack: https://s.apache.org/airflow-slack

…ByRole getByRole('checkbox') resolves to Chakra UI's hidden <input> which is not visible/stable, causing TimeoutError. Keep original CSS selectors for checkbox interactions until Chakra components expose proper accessible roles.

choo121600

Hello, @kimimgo Thanks for contribution :)
Could you try running the test locally after removing **/variable.spec.ts from testIgnore in playwright.config.ts?

kimimgo · 2026-03-22T12:19:40Z

Thanks @choo121600! I'll set up the local Airflow dev environment and run the test with variable.spec.ts removed from testIgnore. Will report back with results.

kimimgo · 2026-03-22T12:49:24Z

Ran the tests locally with breeze testing ui-e2e-tests --test-pattern 'variable.spec.ts'.

All 5 tests failed due to locale mismatch — my local Airflow renders in Korean (e.g. "변수 추가" instead of "Add Variable"), so English-text locators fail. Not related to PR changes.

The test file parses correctly (playwright test --list shows all 15 cases across 3 browsers), and the locator patterns are syntactically valid.

Could you verify with an English locale, or should I set locale: 'en-US' in the Playwright config?

choo121600 · 2026-03-23T22:38:16Z

I've applied the fix in this PR, thanks!
Looks like you're Korean — nice to meet you 🙌
Since Airflow i18n are stored in localStorage, clearing it should resolve the issue 😉

kimimgo · 2026-03-24T03:24:45Z

Nice to meet you too @choo121600! 🙌 Thanks for the tip — I'll clear localStorage next time to reset the locale before running E2E tests. Good to know about the i18n setup.

kimimgo · 2026-03-24T03:28:43Z

Ran locally with clean localStorage — all 5 tests pass! ✅

  ✓ verify variables table displays (1.2s)
  ✓ verify editing a variable (1.5s)
  ✓ verify search filters (1.5s)
  ✓ verify importing variables using Import Variables button (1.9s)
  ✓ verify deleting the variable (3.0s)

  5 passed (9.7s)

Ready for merge.

airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts

Replace Promise.race + waitFor() with Playwright's built-in .or() combinator for assertion-based waiting. Verified locally with 5/5 pass.

choo121600 · 2026-03-26T12:29:38Z

Cool, thanks for the contribution!
Welcome to the Airflow community 🙌

boring-cyborg · 2026-03-26T12:29:39Z

Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions.

…he#63979) * Improve Playwright test patterns in VariablePage (apache#63965) - Replace CSS :has-text() with locator.filter({ hasText }) in rowByKey - Replace CSS attribute selector with getByRole('checkbox') in selectRow - Replace page.waitForFunction() DOM queries with locator-based waiting (Promise.race of noData text vs first table row) - Replace CSS input[type='checkbox'] with getByRole('checkbox') in selectAllCheckbox Aligns with Playwright best practices per apache#63036. * Revert checkbox selectors — Chakra hidden input incompatible with getByRole getByRole('checkbox') resolves to Chakra UI's hidden <input> which is not visible/stable, causing TimeoutError. Keep original CSS selectors for checkbox interactions until Chakra components expose proper accessible roles. * Use expect().toBeVisible() with .or() combinator Replace Promise.race + waitFor() with Playwright's built-in .or() combinator for assertion-based waiting. Verified locally with 5/5 pass. --------- Co-authored-by: Jarek Potiuk <jarek@potiuk.com>

kimimgo requested review from choo121600 and vatsrahul1001 as code owners March 20, 2026 09:20

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Mar 20, 2026

choo121600 reviewed Mar 21, 2026

View reviewed changes

Merge branch 'main' into fix/e2e-variable-playwright-63965

07958d0

choo121600 mentioned this pull request Mar 23, 2026

Add locale configuration to Playwright test settings #64125

Merged

1 task

choo121600 reviewed Mar 24, 2026

View reviewed changes

airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts Outdated Show resolved Hide resolved

Use expect().toBeVisible() with .or() combinator

ce35df9

Replace Promise.race + waitFor() with Playwright's built-in .or() combinator for assertion-based waiting. Verified locally with 5/5 pass.

choo121600 approved these changes Mar 26, 2026

View reviewed changes

choo121600 merged commit 283ab81 into apache:main Mar 26, 2026
222 of 224 checks passed

choo121600 mentioned this pull request Mar 26, 2026

fix(ui/e2e): improve Playwright test patterns in variable.spec.ts #63992

Closed

7 tasks

choo121600 mentioned this pull request Apr 3, 2026

Improve Playwright response assertion in variable.spec.ts #63951

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Playwright test patterns in VariablePage (#63965)#63979

Improve Playwright test patterns in VariablePage (#63965)#63979
choo121600 merged 4 commits intoapache:mainfrom
kimimgo:fix/e2e-variable-playwright-63965

kimimgo commented Mar 20, 2026

Uh oh!

boring-cyborg bot commented Mar 20, 2026

Uh oh!

choo121600 left a comment •

edited

Loading

Uh oh!

kimimgo commented Mar 22, 2026 •

edited

Loading

Uh oh!

kimimgo commented Mar 22, 2026

Uh oh!

choo121600 commented Mar 23, 2026

Uh oh!

kimimgo commented Mar 24, 2026

Uh oh!

kimimgo commented Mar 24, 2026

Uh oh!

Uh oh!

Uh oh!

choo121600 commented Mar 26, 2026

Uh oh!

boring-cyborg bot commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kimimgo commented Mar 20, 2026

Changes in VariablePage.ts

Uh oh!

boring-cyborg bot commented Mar 20, 2026

Uh oh!

choo121600 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kimimgo commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kimimgo commented Mar 22, 2026

Uh oh!

choo121600 commented Mar 23, 2026

Uh oh!

kimimgo commented Mar 24, 2026

Uh oh!

kimimgo commented Mar 24, 2026

Uh oh!

Uh oh!

Uh oh!

choo121600 commented Mar 26, 2026

Uh oh!

boring-cyborg bot commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Changes in `VariablePage.ts`

choo121600 left a comment •

edited

Loading

kimimgo commented Mar 22, 2026 •

edited

Loading