Summary

This PR adds comprehensive E2E tests for the Variables page (/variables) functionality.

Closes #60565

What to test (from issue requirements)

• Verify variables list displays
• Create variable
• Edit variable
• Delete variable
• Search variables
• Import variables from file
• Verify pagination works
• Verify sorting behaviour

Implementation Details

Page Object: VariablesPage.ts

Created a new page object following the Page Object Model (POM) pattern with:

• Locators for all interactive elements (buttons, inputs, table cells)
• Methods for all CRUD operations
• Navigation and wait helpers
• Search and pagination utilities

Test Specs: variables.spec.ts

Test suites include:

1. List Display - Verifies page structure, column headers, and basic layout
2. CRUD Operations - Create, edit, and delete individual variables
3. Search - Filter variables by search term, clear search, handle no results
4. Import - Import variables from JSON file
5. Pagination - Display pagination controls, navigate between pages
6. Sorting - Verify sortable column headers

Acceptance Criteria Compliance

• All tests follow Page Object Model (POM) pattern
• Tests use testConfig compatible pattern
• Tests create/cleanup their own test data in beforeAll/afterAll
• Tests work across Chromium, Firefox, and WebKit browsers (using Playwright)
• No hardcoded values - uses dynamic data with unique keys

Testing

These tests can be run locally with:

breeze testing ui-e2e-tests --test-pattern "variables.spec.ts"

Or directly:

cd airflow-core/src/airflow/ui
pnpm install
pnpm test:e2e:install
pnpm test:e2e -- --grep "Variables"

Related Issues

• Closes UI E2E Test || ADMIN-001: Verify Variables Page functionality #60565
• Related to meta issue UI E2E Test Scenarios - Implementation Meta issue #59028