(airflow) branch main updated: Improve Playwright test patterns in VariablePage (#63965) (#63979)

[choo121600]

This is an automated email from the ASF dual-hosted git repository.

choo121600 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 283ab813cf5 Improve Playwright test patterns in VariablePage (#63965) 
(#63979)
283ab813cf5 is described below

commit 283ab813cf5a52d881a610cb776ad6a7aefe3bab
Author: Imgyu Kim <kimi...@gmail.com>
AuthorDate: Thu Mar 26 21:29:35 2026 +0900

    Improve Playwright test patterns in VariablePage (#63965) (#63979)
    
    * Improve Playwright test patterns in VariablePage (#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 #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 <ja...@potiuk.com>
---
 .../src/airflow/ui/tests/e2e/pages/VariablePage.ts | 27 ++++------------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts 
b/airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts
index da34315fa4a..c2d39707cfd 100644
--- a/airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts
+++ b/airflow-core/src/airflow/ui/tests/e2e/pages/VariablePage.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import type { Locator, Page } from "@playwright/test";
+import { expect, type Locator, type Page } from "@playwright/test";
 
 import { BasePage } from "./BasePage";
 
@@ -56,7 +56,7 @@ export class VariablePage extends BasePage {
   }
 
   public rowByKey(key: string): Locator {
-    return this.page.locator(`tr:has-text("${key}")`);
+    return this.tableRows.filter({ hasText: key });
   }
 
   public async search(key: string) {
@@ -76,26 +76,9 @@ export class VariablePage extends BasePage {
   }
 
   private async waitForTableData(): Promise<void> {
-    await this.page.waitForFunction(
-      () => {
-        const table = document.querySelector('[data-testid="table-list"]');
+    const noData = this.page.getByText("No variables found");
+    const firstKeyCell = this.tableRows.first().locator("td:nth-child(2)");
 
-        if (!table) return false;
-
-        if (document.body.textContent.includes("No variables found")) {
-          return true;
-        }
-
-        const rows = table.querySelectorAll("tbody tr");
-
-        if (rows.length === 0) return false;
-
-        const keyCells = table.querySelectorAll("tbody tr td:nth-child(2)");
-
-        return [...keyCells].some((cell) => Boolean(cell.textContent.trim()));
-      },
-      undefined,
-      { timeout: 60_000 },
-    );
+    await expect(noData.or(firstKeyCell)).toBeVisible({ timeout: 60_000 });
   }
 }