Add UI E2E test for DAGs list display by chen0427ok · Pull Request #59374 · apache/airflow

chen0427ok · 2025-12-12T16:40:11Z

Description

Implements UI E2E test case DAGS-001 to verify DAGs list displays correctly, as requested in issue #59307.

Changes

New test spec: dags-list.spec.ts with 3 comprehensive test cases
Extended DagsPage: Added methods to verify DAG list display functionality
Best practices: Used data-testid selectors as recommended in the E2E Testing README
Improved stability: Increased LoginPage timeouts for better reliability during test execution

Test Cases

Verify DAGs list displays after login - Ensures the DAG list is visible and contains at least one DAG
Verify DAG links are formatted correctly - Validates all DAG links follow the expected pattern /dags/{dag_id}
Verify specific test DAG exists in the list - Confirms the test DAG (example_bash_operator) is present

Test Results

Local Testing Results:

Chromium: 3/3 tests passed
WebKit: 3/3 tests passed
Firefox: 0/3 tests failed

Firefox Issue Details

All Firefox tests fail with the same error:

TimeoutError: locator.waitFor: Test timeout of 120000ms exceeded.
Call log:
  - waiting for locator('input[name="username"]') to be visible

Root Cause: Firefox browser receives a 404 Not Found nginx error page when navigating to /auth/login, while Chromium and WebKit successfully load the login page. This appears to be an environment/configuration issue rather than a test code problem, as evidenced by:

Screenshot shows nginx 404 error page
Same test code works perfectly in Chromium and WebKit
Issue occurs consistently across all three Firefox test cases

Screenshots: Test results and Firefox error screenshots are available in test-results/ directory.

Follows Contribution Guidelines

Uses Page Object Model (POM) pattern
Uses data-testid selectors where available
Test names start with "should"
Tests are independent and set up their own state
Includes meaningful assertions beyond navigation checks
Follows existing code style and conventions

Related Issue

Closes #59307

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code where necessary
I have made corresponding changes to the documentation (README.md already includes guidance)
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

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

pierrejeambrun

Thanks for the PR 🎉

One nit.

LGTM

airflow-core/src/airflow/ui/tests/e2e/specs/dags-list.spec.ts

pierrejeambrun · 2025-12-16T16:12:41Z

Need rebase + conflict solving.

vatsrahul1001 · 2025-12-16T18:58:50Z

@chen0427ok I think we are missing some of testable items in the issue

What to test

Verify the Dag list correct with card and table view both
Verify example DAGs are visible (e.g., example_bash_operator)
Verify Searching of DAGs, filtering of status as per different statuses
Verify sort

chen0427ok · 2025-12-17T06:23:19Z

@chen0427ok I think we are missing some of testable items in the issue

What to test

Verify the Dag list correct with card and table view both

Verify example DAGs are visible (e.g., example_bash_operator)

Verify Searching of DAGs, filtering of status as per different statuses

Verify sort

Thanks a lot for the detailed list of testable items! I’ll start working on covering each of them in the E2E tests and will update the PR once they’re ready.

chen0427ok · 2025-12-17T21:39:00Z

@chen0427ok I think we are missing some of testable items in the issue

What to test

Verify the Dag list correct with card and table view both

Verify example DAGs are visible (e.g., example_bash_operator)

Verify Searching of DAGs, filtering of status as per different statuses

Verify sort

Thank you for the feedback! I've addressed both items:

1. Rebased and Resolved Conflicts

Successfully rebased onto `upstream/main` and resolved all conflicts:
- Merged upstream's pagination tests and "DAG" → "Dag" naming changes
- Updated all test code to use consistent "Dag" naming
- All conflicts in `DagsPage.ts` and `dags-list.spec.ts` resolved

2. Added All Missing Test Items from Issue #59307

Implemented all 4 missing test functionalities:

Card/Table View Toggle (`Dags View Toggle`)

  - Verifies switching between card and table view
  - Validates both views display correctly

DAG Search (`Dags Search`)

  - Tests search functionality with test DAG name
  - Verifies filtered results are correct
  - Confirms clearing search restores full list

Status Filtering (`Dags Status Filtering`)

  - Tests filtering by different statuses (success, failed, running, queued)
  - Validates filter buttons are visible and functional

Sorting (`Dags Sorting`)

  - Verifies sort select is visible in card view
  - Tests sort dropdown opens with available options

Code Quality

  All changes follow contribution guidelines:
  - Page Object Model pattern
  - \`data-testid\` selectors from UI implementation
  - Timeout configuration in \`beforeEach\` hooks
  - Independent test cases with proper setup
  - Meaningful assertions

airflow-core/src/airflow/ui/tests/e2e/specs/dags-list.spec.ts

choo121600

There seem to be many unnecessary timeouts. I’m not an expert either, so could you explain why they were added?

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

airflow-core/src/airflow/ui/tests/e2e/specs/dags-list.spec.ts

choo121600 · 2025-12-18T08:05:35Z

Also, there are a lot of comments for each step, and personally, they feel unnecessary as well.

vatsrahul1001 · 2025-12-18T08:32:28Z

@chen0427ok Looks like e2e UI test breaking after last change https://github.com/apache/airflow/actions/runs/20329152656/job/58403639820?pr=59374

chen0427ok · 2025-12-19T09:20:01Z

@chen0427ok Looks like e2e UI test breaking after last change https://github.com/apache/airflow/actions/runs/20329152656/job/58403639820?pr=59374

Hi @vatsrahul1001

I've updated the test approach to avoid depending on data-testid="dag-id", which doesn't exist in the current frontend codebase.

Instead, I'm now using href-based selectors (a[href^="/dags/"] + regex filtering) to locate DAG elements. This approach:

Works with the existing frontend code (no modifications needed)
Runs successfully against pre-built Docker images in CI
Is more semantic and stable

The test now passes locally and should work in CI as well.

Let me know if you have any questions!

vatsrahul1001 · 2025-12-21T07:14:04Z

@chen0427ok, static checks are failing.

Also, I tried running the test locally from my local and noticed for some of test login is failing with 429(Too many request)

As all test running in parallel and doing login we are facing this issue. Did you not noticed this why running entire test suite

chen0427ok · 2025-12-21T18:15:31Z

@chen0427ok, static checks are failing.

Also, I tried running the test locally from my local and noticed for some of test login is failing with 429(Too many request)

As all test running in parallel and doing login we are facing this issue. Did you not noticed this why running entire test suite

Hi @vatsrahul1001,

Apologies for the delayed response - I was caught up with other tasks and didn't see your message immediately.

Static Checks

Good news! The static checks are now passing. The latest CI run shows all checks completed successfully:

Static checks: basic checks only
CI image checks / Static checks
Compile / format / lint UI

The previous failures were related to the data-testid approach. After switching to href-based selectors, all linting and type checking issues have been resolved.

429 Rate Limit Issue - My Apologies

You're absolutely right, and I apologize for not raising this issue proactively. I did encounter the 429 "Too Many Requests" error when running the entire test suite locally, but it was intermittent (flaky) - sometimes tests would pass, sometimes they'd fail with 429. Because of this inconsistency, I didn't realize it was a systematic issue and failed to report it. I should have been more thorough.

Thank you for creating PR #59692 to address this! I can see you've implemented Shared Authentication State using Playwright's storage state, which is exactly the approach I was thinking would be ideal:

Login once in global setup
Save auth state
Reuse across all tests

This will solve the problem systematically for all E2E tests, not just mine.

Next Steps

Once PR #59692 is merged, should I:

Rebase my PR on top of it?
Or will my tests automatically benefit from the shared auth state without changes?

Please let me know if there's anything else I need to adjust in this PR. Again, apologies for not catching and reporting the 429 issue earlier!

Best regards

vatsrahul1001 · 2025-12-22T08:38:18Z

@chen0427ok, static checks are failing.
Also, I tried running the test locally from my local and noticed for some of test login is failing with 429(Too many request)
As all test running in parallel and doing login we are facing this issue. Did you not noticed this why running entire test suite

Hi @vatsrahul1001,

Apologies for the delayed response - I was caught up with other tasks and didn't see your message immediately.

Static Checks

Good news! The static checks are now passing. The latest CI run shows all checks completed successfully:

Static checks: basic checks only

CI image checks / Static checks

Compile / format / lint UI

The previous failures were related to the data-testid approach. After switching to href-based selectors, all linting and type checking issues have been resolved.

429 Rate Limit Issue - My Apologies

You're absolutely right, and I apologize for not raising this issue proactively. I did encounter the 429 "Too Many Requests" error when running the entire test suite locally, but it was intermittent (flaky) - sometimes tests would pass, sometimes they'd fail with 429. Because of this inconsistency, I didn't realize it was a systematic issue and failed to report it. I should have been more thorough.

Thank you for creating PR #59692 to address this! I can see you've implemented Shared Authentication State using Playwright's storage state, which is exactly the approach I was thinking would be ideal:

Login once in global setup

Save auth state

Reuse across all tests

This will solve the problem systematically for all E2E tests, not just mine.

Next Steps

Once PR #59692 is merged, should I:

Rebase my PR on top of it?

Or will my tests automatically benefit from the shared auth state without changes?

Please let me know if there's anything else I need to adjust in this PR. Again, apologies for not catching and reporting the 429 issue earlier!

Best regards

@chen0427ok PR #59692 is merged now you should rebase and resolve conflicts

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

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

vatsrahul1001 · 2025-12-23T03:56:40Z

@chen0427ok I noticed a few tests were failing last time. Did you get time to check those?

chen0427ok · 2025-12-23T04:02:31Z

@chen0427ok I noticed a few tests were failing last time. Did you get time to check those?

Hi @vatsrahul1001,
Yes, I took a look at the failing tests from the last run.
After reverting the login timeout back to 15_000 as suggested by @choo121600 and rebasing on top of the shared auth state changes, the tests are passing on my side and the current CI run looks good so far.
Please let me know if you still see any failures or if there’s anything else I should adjust.

Increases the timeout for the dags-list.spec.ts e2e test to prevent flakiness.

vatsrahul1001 · 2026-01-23T11:02:22Z

@chen0427ok tests are still failing

chen0427ok · 2026-01-23T11:54:03Z

@chen0427ok tests are still failing

I'm currently fixing, it seems like the selector or test-id has been updated. I'll fix it asap!

… assertion with polling to handle UI rendering timing differences between local and CI environments.

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

vatsrahul1001 · 2026-01-26T11:30:15Z

@choo121600 can you review one more time on this?

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

- Use case-insensitive regex (/no dag/i) for empty state detection to handle singular/plural/casing variations - Add fallback <table> locator in waitForDagList when data-testid attributes are missing - Change confirmButton from .nth(1) to .last() to handle icon-only trigger buttons - Replace waitForTimeout(500) with expect.poll in Dags Sorting test

choo121600 · 2026-01-27T10:38:35Z

It looks like CI is still failing.
Could you try recompile and re-running the tests?

You can do this with:

breeze ui compile-assets

choo121600 · 2026-01-27T11:46:44Z

After checking, it seems that this CI failure is not related to your PR 🥲
I’ve just opened a separate PR(#61117) to address the issue.

chen0427ok · 2026-01-27T11:57:27Z

After checking, it seems that this CI failure is not related to your PR 🥲 I’ve just opened a separate PR(#61117) to address the issue.

Thank you so much for investigating! That's a relief. I'll wait for PR #61117 to be merged, and then I'll update my branch to trigger the checks again

guan404ming · 2026-01-28T01:58:14Z

Looks good, thanks!

choo121600

All CI checks have passed, and the tests look good.
Thanks for your hard work!

boring-cyborg · 2026-01-28T04:01:12Z

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

choo121600 · 2026-01-28T04:06:22Z

@chen0427ok Congrats on your first merged PR.
Thank you for your efforts in addressing the review comments, and welcome to the community 🙌

chen0427ok · 2026-01-28T04:35:52Z

@chen0427ok Congrats on your first merged PR.
Thank you for your efforts in addressing the review comments, and welcome to the community 🙌

Thank you so much for the support and the thorough reviews! I learned a lot from this PR and I'm excited to keep contributing.

* Fix race conditions in pagination for slower browsers - Add API interception before pagination clicks - Increase timeout from 10s to 30s for Firefox compatibility - Add test.setTimeout(120_000) to pagination and search tests - Improve waitForDagList timeout to 30s Add comprehensive E2E tests for DAGs list page: - Dags List Display: verify list visibility, dag links, dag existence - Dags View Toggle: switch between card and table views - Dags Search: search and clear with race condition handling - Dags Status Filtering: filter by success/failed/running/queued - Dags Sorting: sort by name in card view * fix(tests): Increase timeout for dags-list spec Increases the timeout for the dags-list.spec.ts e2e test to prevent flakiness. * fix(tests): Update E2E test selectors to match current UI * fix(tests): Use expect.poll for flaky Dags Search test Replace direct assertion with polling to handle UI rendering timing differences between local and CI environments. * fix(tests): Handle empty state in waitForDagList to prevent timeout * fix(tests): Harden E2E locators and replace fixed delays with polling - Use case-insensitive regex (/no dag/i) for empty state detection to handle singular/plural/casing variations - Add fallback <table> locator in waitForDagList when data-testid attributes are missing - Change confirmButton from .nth(1) to .last() to handle icon-only trigger buttons - Replace waitForTimeout(500) with expect.poll in Dags Sorting test --------- Co-authored-by: Rahul Vats <43964496+vatsrahul1001@users.noreply.github.com> Co-authored-by: Yeonguk Choo <choo121600@gmail.com>

chen0427ok requested review from bbovenzi, guan404ming, pierrejeambrun, ryanahamilton and shubhamraj-git as code owners December 12, 2025 16:40

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Dec 12, 2025

choo121600 reviewed Dec 14, 2025

View reviewed changes

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

pierrejeambrun approved these changes Dec 16, 2025

View reviewed changes

airflow-core/src/airflow/ui/tests/e2e/specs/dags-list.spec.ts Outdated Show resolved Hide resolved

chen0427ok force-pushed the test/ui-e2e-dags-list-display branch from d26e0b3 to 7a4a28c Compare December 17, 2025 21:33

chen0427ok requested a review from vatsrahul1001 as a code owner December 17, 2025 21:33

vatsrahul1001 reviewed Dec 18, 2025

View reviewed changes

airflow-core/src/airflow/ui/tests/e2e/specs/dags-list.spec.ts Show resolved Hide resolved

chen0427ok force-pushed the test/ui-e2e-dags-list-display branch from f5202e2 to 35bf95b Compare December 18, 2025 07:16

choo121600 reviewed Dec 18, 2025

View reviewed changes

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

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

airflow-core/src/airflow/ui/tests/e2e/specs/dags-list.spec.ts Outdated Show resolved Hide resolved

vatsrahul1001 mentioned this pull request Dec 21, 2025

Fix E2E test login rate limiting by sharing auth state across tests #59692

Merged

chen0427ok force-pushed the test/ui-e2e-dags-list-display branch from 556ffe4 to aa17893 Compare December 22, 2025 12:24

choo121600 reviewed Dec 22, 2025

View reviewed changes

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

choo121600 reviewed Dec 22, 2025

View reviewed changes

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

chen0427ok force-pushed the test/ui-e2e-dags-list-display branch from fe58285 to 3ad4aa9 Compare December 23, 2025 03:52

chen0427ok force-pushed the test/ui-e2e-dags-list-display branch from d64189f to 9a671bb Compare January 19, 2026 13:00

fix(tests): Increase timeout for dags-list spec

def308e

Increases the timeout for the dags-list.spec.ts e2e test to prevent flakiness.

chen0427ok added 2 commits January 23, 2026 23:06

fix(tests): Update E2E test selectors to match current UI

2781aa0

fix(tests): Use expect.poll for flaky Dags Search test Replace direct…

13a7348

… assertion with polling to handle UI rendering timing differences between local and CI environments.

choo121600 reviewed Jan 26, 2026

View reviewed changes

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

chen0427ok and others added 2 commits January 26, 2026 14:56

fix(tests): Handle empty state in waitForDagList to prevent timeout

489610f

Merge branch 'main' into test/ui-e2e-dags-list-display

79b0892

Merge branch 'main' into test/ui-e2e-dags-list-display

9ac8806

choo121600 reviewed Jan 26, 2026

View reviewed changes

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

chen0427ok and others added 2 commits January 27, 2026 14:16

Merge branch 'main' into test/ui-e2e-dags-list-display

aadb4a3

Merge branch 'main' into test/ui-e2e-dags-list-display

fa2d951

guan404ming approved these changes Jan 28, 2026

View reviewed changes

choo121600 approved these changes Jan 28, 2026

View reviewed changes

choo121600 merged commit eb49aea into apache:main Jan 28, 2026
245 of 246 checks passed

Comments

Conversation

chen0427ok commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Test Cases

Test Results

Firefox Issue Details

Follows Contribution Guidelines

Related Issue

Checklist

Uh oh!

Uh oh!

pierrejeambrun 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!

Uh oh!

pierrejeambrun commented Dec 16, 2025

Uh oh!

vatsrahul1001 commented Dec 16, 2025

Uh oh!

chen0427ok commented Dec 17, 2025

Uh oh!

chen0427ok commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. Rebased and Resolved Conflicts

2. Added All Missing Test Items from Issue #59307

Card/Table View Toggle (`Dags View Toggle`)

DAG Search (`Dags Search`)

Status Filtering (`Dags Status Filtering`)

Sorting (`Dags Sorting`)

Code Quality

Uh oh!

Uh oh!

choo121600 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

choo121600 commented Dec 18, 2025

Uh oh!

vatsrahul1001 commented Dec 18, 2025

Uh oh!

chen0427ok commented Dec 19, 2025

Uh oh!

vatsrahul1001 commented Dec 21, 2025

Uh oh!

chen0427ok commented Dec 21, 2025

Static Checks

429 Rate Limit Issue - My Apologies

Next Steps

Uh oh!

vatsrahul1001 commented Dec 22, 2025

Static Checks

429 Rate Limit Issue - My Apologies

Next Steps

Uh oh!

Uh oh!

Uh oh!

vatsrahul1001 commented Dec 23, 2025

Uh oh!

chen0427ok commented Dec 23, 2025

Uh oh!

vatsrahul1001 commented Jan 23, 2026

Uh oh!

chen0427ok commented Jan 23, 2026

Uh oh!

Uh oh!

vatsrahul1001 commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

choo121600 commented Jan 27, 2026

Uh oh!

choo121600 commented Jan 27, 2026

Uh oh!

chen0427ok commented Jan 27, 2026

chen0427ok commented Dec 12, 2025 •

edited

Loading

pierrejeambrun left a comment •

edited

Loading

chen0427ok commented Dec 17, 2025 •

edited

Loading

vatsrahul1001 commented Jan 26, 2026 •

edited

Loading