Skip to content

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

Open
tysoncung wants to merge 1 commit intoapache:mainfrom
tysoncung:fix/63965-improve-playwright-variable-spec
Open

fix(ui/e2e): improve Playwright test patterns in variable.spec.ts#63992
tysoncung wants to merge 1 commit intoapache:mainfrom
tysoncung:fix/63965-improve-playwright-variable-spec

Conversation

@tysoncung
Copy link

Problem

variable.spec.ts and VariablePage.ts use several Playwright anti-patterns that can cause flakiness and reduce maintainability.

Solution

Changes in VariablePage.ts:

  • Replace page.waitForFunction() with DOM queries → locator-based .or() pattern using web-first assertions
  • Replace this.table.waitFor()expect().toBeVisible()
  • Replace locator('tbody tr')locator('tbody').getByRole('row')
  • Replace locator('thead input[type=checkbox]')locator('thead').getByRole('checkbox')
  • Replace locator('[id^=checkbox][id$=:control]')getByRole('checkbox')
  • Replace locator('tr:has-text(...)')tableRows.filter({ hasText })
  • Replace locator('td:nth-child(2)')getByRole('cell').nth(1)

Changes in variable.spec.ts:

  • Replace locator('[data-part="backdrop"]')getByRole('dialog')

Changes in playwright.config.ts:

  • Remove variable.spec.ts from testIgnore list

Checklist

  • page.waitForFunction() with DOM queries → locator-based waiting ✅
  • page.waitForTimeout() → N/A (not present)
  • waitForLoadState("networkidle") → N/A (not present)
  • Manual assertions → web-first assertions ✅
  • page.evaluate() for DOM manipulation → N/A (not present)
  • CSS :has-text() → user-facing locators ✅
  • Remove from ignore spec list ✅

Files Changed

  • airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts
  • airflow-core/src/airflow/ui/tests/e2e/specs/variable.spec.ts
  • airflow-core/src/airflow/ui/playwright.config.ts

Part of #63036
Closes #63965

…ache#63965) Replace Playwright anti-patterns with best practices in variable spec and VariablePage page object. Changes in VariablePage.ts: - Replace page.waitForFunction() with DOM queries with locator-based .or() pattern using web-first assertions - Replace this.table.waitFor() with expect().toBeVisible() - Replace locator('tbody tr') with locator('tbody').getByRole('row') - Replace locator('thead input[type=checkbox]') with locator('thead').getByRole('checkbox') - Replace locator('[id^=checkbox][id$=:control]') with getByRole('checkbox') - Replace locator('tr:has-text(...)') with tableRows.filter({ hasText }) - Replace locator('td:nth-child(2)') with getByRole('cell').nth(1) Changes in variable.spec.ts: - Replace locator('[data-part=backdrop]') with getByRole('dialog') Changes in playwright.config.ts: - Remove variable.spec.ts from testIgnore list closes apache#63965
@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Mar 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

1 participant