(airflow) branch main updated: Improve Playwright test patterns in dag-code-tab.spec.ts #63410 (#63416)

[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 7ed94f14d06 Improve Playwright test patterns in dag-code-tab.spec.ts 
#63410 (#63416)
7ed94f14d06 is described below

commit 7ed94f14d06c1d5021eb8f5af5ac061a5278d582
Author: Haseeb Malik <118837269+haseebmali...@users.noreply.github.com>
AuthorDate: Thu Mar 12 06:37:32 2026 -0400

    Improve Playwright test patterns in dag-code-tab.spec.ts #63410 (#63416)
---
 .../src/airflow/ui/tests/e2e/pages/DagCodePage.ts  | 52 +++++++---------------
 1 file changed, 17 insertions(+), 35 deletions(-)

diff --git a/airflow-core/src/airflow/ui/tests/e2e/pages/DagCodePage.ts 
b/airflow-core/src/airflow/ui/tests/e2e/pages/DagCodePage.ts
index 7895b4ceb78..af9e91ef0eb 100644
--- a/airflow-core/src/airflow/ui/tests/e2e/pages/DagCodePage.ts
+++ b/airflow-core/src/airflow/ui/tests/e2e/pages/DagCodePage.ts
@@ -24,6 +24,7 @@ export class DagCodePage extends BasePage {
   public readonly editorScrollable: Locator;
   public readonly lineNumbers: Locator;
   public readonly syntaxTokens: Locator;
+  public readonly viewLines: Locator;
 
   public constructor(page: Page) {
     super(page);
@@ -31,12 +32,14 @@ export class DagCodePage extends BasePage {
     this.lineNumbers = page.locator(".monaco-editor .line-numbers");
     this.editorScrollable = page.locator(".monaco-scrollable-element");
     this.syntaxTokens = page.locator(".monaco-editor .view-line span span");
+    this.viewLines = page.locator(".monaco-editor .view-line");
   }
 
   public async navigateToCodeTab(dagId: string): Promise<void> {
     await this.navigateTo(`/dags/${dagId}/code`);
     await this.waitForCodeReady();
   }
+
   public async verifyCodeIsScrollable(): Promise<void> {
     await this.waitForCodeReady();
 
@@ -44,59 +47,38 @@ export class DagCodePage extends BasePage {
 
     await expect(scrollable).toBeVisible({ timeout: 30_000 });
 
-    // For a sufficiently long file the scroll-height exceeds the client-height
-    const isScrollable = await scrollable.evaluate((el) => el.scrollHeight > 
el.clientHeight);
-
-    expect(isScrollable).toBe(true);
+    await expect
+      .poll(async () => scrollable.evaluate((el) => el.scrollHeight > 
el.clientHeight), {
+        timeout: 10_000,
+      })
+      .toBe(true);
   }
 
   public async verifyLineNumbersDisplayed(): Promise<void> {
     await this.waitForCodeReady();
 
     await expect(this.lineNumbers.first()).toBeVisible({ timeout: 30_000 });
-
-    const lineNumberCount = await this.lineNumbers.count();
-
-    expect(lineNumberCount).toBeGreaterThan(0);
-
-    const firstLineText = await this.lineNumbers.first().textContent();
-
-    expect(firstLineText?.trim()).toBe("1");
+    await expect(this.lineNumbers).not.toHaveCount(0);
+    await expect(this.lineNumbers.first()).toHaveText("1");
   }
 
   public async verifySourceCodeDisplayed(): Promise<void> {
     await this.waitForCodeReady();
 
-    const viewLines = this.page.locator(".monaco-editor .view-line");
-
-    await expect(viewLines.first()).toBeVisible({ timeout: 30_000 });
-
-    const lineCount = await viewLines.count();
-
-    expect(lineCount).toBeGreaterThan(0);
+    await expect(this.viewLines.first()).toBeVisible({ timeout: 30_000 });
+    await expect(this.viewLines).not.toHaveCount(0);
   }
 
   public async verifySyntaxHighlighting(): Promise<void> {
     await this.waitForCodeReady();
 
-    const tokens = this.syntaxTokens;
-
-    await expect(tokens.first()).toBeVisible({ timeout: 30_000 });
-
-    const tokenCount = await tokens.count();
-
-    expect(tokenCount).toBeGreaterThan(1);
-
-    const classNames = await tokens.first().getAttribute("class");
-
-    expect(classNames).toMatch(/mtk\d+/);
+    await expect(this.syntaxTokens.first()).toBeVisible({ timeout: 30_000 });
+    await expect(this.syntaxTokens).not.toHaveCount(0);
+    await expect(this.syntaxTokens.first()).toHaveAttribute("class", /mtk\d+/);
   }
 
   private async waitForCodeReady(): Promise<void> {
-    await this.editorContainer.waitFor({ state: "visible", timeout: 60_000 });
-
-    const viewLines = this.page.locator(".monaco-editor .view-line");
-
-    await viewLines.first().waitFor({ state: "visible", timeout: 30_000 });
+    await expect(this.editorContainer).toBeVisible({ timeout: 60_000 });
+    await expect(this.viewLines.first()).toBeVisible({ timeout: 30_000 });
   }
 }