add E2E tests for DAG Runs tab

airflow-core/src/airflow/ui/src/pages/DagRuns.tsx

@@ -80,7 +80,7 @@ const runColumns = (translate: TFunction, dagId?: string): Array<ColumnDef<DAGRu
     accessorKey: "dag_run_id",
     cell: ({ row: { original } }: DagRunRow) => (
       <Link asChild color="fg.info" fontWeight="bold">
-        <RouterLink to={`/dags/${original.dag_id}/runs/${original.dag_run_id}`}>
+        <RouterLink data-testid="run-id" to={`/dags/${original.dag_id}/runs/${original.dag_run_id}`}>
           <TruncatedText text={original.dag_run_id} />
         </RouterLink>
       </Link>
@@ -104,7 +104,11 @@ const runColumns = (translate: TFunction, dagId?: string): Array<ColumnDef<DAGRu
       row: {
         original: { state },
       },
-    }) => <StateBadge state={state}>{translate(`common:states.${state}`)}</StateBadge>,
+    }) => (
+      <Flex data-testid="run-state">
+        <StateBadge state={state}>{translate(`common:states.${state}`)}</StateBadge>
+      </Flex>
+    ),
     header: () => translate("state"),
   },
   {
@@ -243,16 +247,18 @@ export const DagRuns = () => {
   return (
     <>
       <DagRunsFilters dagId={dagId} />
-      <DataTable
-        columns={columns}
-        data={data?.dag_runs ?? []}
-        errorMessage={<ErrorAlert error={error} />}
-        initialState={tableURLState}
-        isLoading={isLoading}
-        modelName={translate("common:dagRun_other")}
-        onStateChange={setTableURLState}
-        total={data?.total_entries}
-      />
+      <div data-testid="dag-runs-table">
+        <DataTable
+          columns={columns}
+          data={data?.dag_runs ?? []}
+          errorMessage={<ErrorAlert error={error} />}
+          initialState={tableURLState}
+          isLoading={isLoading}
+          modelName={translate("common:dagRun_other")}
+          onStateChange={setTableURLState}
+          total={data?.total_entries}
+        />
+      </div>
     </>
   );
 };

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

@@ -36,6 +36,9 @@
   // Pagination elements
   public readonly paginationNextButton: Locator;
   public readonly paginationPrevButton: Locator;
+  // Runs tab elements
+  public readonly runsTab: Locator;
+  public readonly runsTable: Locator;
 
   public readonly stateElement: Locator;
   public readonly triggerButton: Locator;
@@ -48,6 +51,8 @@
     this.stateElement = page.locator('*:has-text("State") + *').first();
     this.paginationNextButton = page.locator('[data-testid="next"]');
     this.paginationPrevButton = page.locator('[data-testid="prev"]');
+    this.runsTab = page.locator('a[href$="/runs"]');
+    this.runsTable = page.locator('[data-testid="dag-runs-table"]');
   }
 
   // URL builders for dynamic paths
@@ -75,6 +80,36 @@
     await this.waitForDagList();
   }
 
+  /**
+   * Click on a specific run to view details
+   */
+  public async clickRun(runId: string): Promise<void> {
+    const runLink = this.page.locator(`a:has-text("${runId}")`).first();
+
+    await runLink.waitFor({ state: "visible" });
+    await runLink.click();
+    await this.waitForPageLoad();
+  }
+
+  /**
+   * Filter runs by state
+   */
+  public async filterByState(state: string): Promise<void> {
+    // Click on the state filter
+    const stateFilter = this.page.locator('button:has-text("State")');
+
+    await stateFilter.waitFor({ state: "visible" });
+    await stateFilter.click();
+
+    // Select the specific state
+    const stateOption = this.page.locator(`[role="option"]:has-text("${state}")`);
+
+    await stateOption.waitFor({ state: "visible" });
+    await stateOption.click();
+
+    await this.waitForPageLoad();
+  }
+
   /**
    * Get all Dag names from the current page
    */
@@ -86,6 +121,34 @@
     return texts.map((text) => text.trim()).filter((text) => text !== "");
   }
 
+  /**
+   * Get run details from the runs table
+   */
+  public async getRunDetails(): Promise<
+    Array<{
+      runId: string;
+      state: string;
+    }>
+  > {
+    const runRows = this.page.locator('[data-testid="dag-runs-table"] table tbody tr');
+
+    await runRows.first().waitFor({ state: "visible", timeout: 10_000 });
+
+    const runCount = await runRows.count();
+    const runs: Array<{ runId: string; state: string }> = [];
+
+    for (let i = 0; i < runCount; i++) {
+      const row = runRows.nth(i);
+
+      const runId = (await row.locator('[data-testid="run-id"]').textContent()) ?? "";
+      const state = (await row.locator('[data-testid="run-state"]').textContent()) ?? "";
+
+      runs.push({ runId: runId.trim(), state: state.trim() });
+    }
+
+    return runs;
+  }
+
   /**
    * Navigate to Dags list page
    */
@@ -100,6 +163,38 @@
     await this.navigateTo(DagsPage.getDagDetailUrl(dagName));
   }
 
+  /**
+   * Navigate to the Runs tab for a specific DAG
+   */
+  public async navigateToRunsTab(dagName: string): Promise<void> {
+    await this.navigateToDagDetail(dagName);
+    await this.runsTab.waitFor({ state: "visible" });
+    await this.runsTab.click();
+    await this.waitForPageLoad();
+  }
+
+  /**
+   * Search for dag runs by run ID pattern
+   */
+  public async searchRun(searchTerm: string): Promise<void> {
+    // Find the run ID pattern input field
+    const searchInput = this.page.locator('input[placeholder*="Run ID"]').or(
+      this.page.locator('input[name="runIdPattern"]'),
+    );
+
+    await searchInput.waitFor({ state: "visible" });
+    await searchInput.fill(searchTerm);
+
+    // Wait for the search to take effect
+    await this.page.waitForResponse(
+      (response) =>
+        response.url().includes("dagRuns") &&
+        response.request().method() === "GET" &&
+        response.status() === 200,
+    );
+    await this.waitForPageLoad();
+  }
+
   /**
    * Trigger a Dag run
    */
@@ -112,9 +207,6 @@
     return dagRunId;
   }
 
-  /**
-   * Navigate to details tab and verify Dag details are displayed correctly
-   */
   public async verifyDagDetails(dagName: string): Promise<void> {
     await this.navigateToDagDetail(dagName);
 
@@ -185,6 +277,29 @@
     throw new Error(`Dag run did not complete within 5 minutes: ${dagRunId}`);
   }
 
+  /**
+   * Verify we're on the run details page
+   */
+  public async verifyRunDetailsPage(runId: string): Promise<void> {
+    // Wait for the page to load
+    await this.waitForPageLoad();
+
+    // Verify URL contains the run ID
+    await expect(this.page).toHaveURL(new RegExp(`/runs/${runId}`));
+  }
+
+  /**
+   * Verify the Runs tab is displayed correctly
+   */
+  public async verifyRunsTabDisplayed(): Promise<void> {
+    // Verify the runs table is present
+    await expect(this.runsTable).toBeVisible();
+
+    // Verify pagination controls are visible
+    await expect(this.paginationNextButton).toBeVisible();
+    await expect(this.paginationPrevButton).toBeVisible();
+  }
+
   private async getCurrentDagRunStatus(): Promise<string> {
     try {
       const statusText = await this.stateElement.textContent().catch(() => "");
@@ -255,7 +370,7 @@
    * Wait for DAG list to be rendered
    */
   private async waitForDagList(): Promise<void> {
     await expect(this.page.locator('[data-testid="dag-id"]').first()).toBeVisible({
       timeout: 10_000,
     });
   }

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

@@ -1,3 +1,3 @@
 /*!
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -84,3 +84,142 @@
     await dagsPage.verifyDagDetails(testDagId);
   });
 });
+
+/*
+ * Dag Runs Tab E2E Tests
+ */
+test.describe("Dag Runs Tab", () => {
+  let dagsPage: DagsPage;
+
+  const testDagId = testConfig.testDag.id;
+
+  test.beforeEach(async ({ page }) => {
+    dagsPage = new DagsPage(page);
+    await dagsPage.triggerDag(testDagId);
+  });
+
+  test("should navigate to Runs tab and display correctly", async () => {
+    await dagsPage.navigateToRunsTab(testDagId);
+
+    // Verify runs table is displayed
+    await dagsPage.verifyRunsTabDisplayed();
+
+    // Verify we can see run details
+    const runs = await dagsPage.getRunDetails();
+
+    expect(runs.length).toBeGreaterThan(0);
+  });
+
+  test("should verify run details are displayed correctly", async () => {
+    await dagsPage.navigateToRunsTab(testDagId);
+
+    const runs = await dagsPage.getRunDetails();
+
+    expect(runs.length).toBeGreaterThan(0);
+
+    // Verify first run has required fields
+    const [firstRun] = runs;
+
+    expect(firstRun.runId).toBeTruthy();
+    expect(firstRun.state).toBeTruthy();
+  });
+
+  test("should click run and navigate to details page", async () => {
+    await dagsPage.navigateToRunsTab(testDagId);
+
+    const runs = await dagsPage.getRunDetails();
+
+    expect(runs.length).toBeGreaterThan(0);
+
+    const [firstRun] = runs;
+
+    await dagsPage.clickRun(firstRun.runId);
+
+    // Verify we're on the run details page
+    await dagsPage.verifyRunDetailsPage(firstRun.runId);
+  });
+
+  test("should filter runs by state", async () => {
+    await dagsPage.navigateToRunsTab(testDagId);
+
+    const runs = await dagsPage.getRunDetails();
+
+    expect(runs.length).toBeGreaterThan(0);
+
+    const [firstRun] = runs;
+
+    if (firstRun === undefined) {
+      throw new Error("No runs found");
+    }
+
+    const targetState = firstRun.state;
+
+    await dagsPage.filterByState(targetState);
+
+    const filteredRuns = await dagsPage.getRunDetails();
+
+    expect(filteredRuns.length).toBeGreaterThan(0);
+    expect(filteredRuns.every((run) => run.state === targetState)).toBeTruthy();
+  });
+
+  test("should search runs", async () => {
+    await dagsPage.navigateToRunsTab(testDagId);
+
+    const runs = await dagsPage.getRunDetails();
+
+    expect(runs.length).toBeGreaterThan(0);
+
+    const [firstRun] = runs;
+
+    if (firstRun === undefined) {
+      throw new Error("No runs found");
+    }
+
+    const targetRunId = firstRun.runId;
+
+    await dagsPage.searchRun(targetRunId);
+
+    const searchedRuns = await dagsPage.getRunDetails();
+
+    expect(searchedRuns.length).toBeGreaterThan(0);
+    const [firstSearchedRun] = searchedRuns;
+
+    if (firstSearchedRun === undefined) {
+      throw new Error("No searched runs found");
+    }
+
+    expect(firstSearchedRun.runId).toContain(targetRunId);
+  });
+
+  test("should verify pagination works on the Runs tab", async () => {
+    await dagsPage.navigateToRunsTab(testDagId);
+
+    await expect(dagsPage.paginationNextButton).toBeVisible();
+    await expect(dagsPage.paginationPrevButton).toBeVisible();
+
+    const initialRuns = await dagsPage.getRunDetails();
+
+    expect(initialRuns.length).toBeGreaterThan(0);
+
+    // Check if next button is enabled (has more than one page)
+    const isNextEnabled = await dagsPage.paginationNextButton.isEnabled();
+
+    if (!isNextEnabled) {
+      test.skip(true, "Pagination skipped because not enough runs");
+    }
+
+    await dagsPage.clickNextPage();
+
+    const runsAfterNext = await dagsPage.getRunDetails();
+
+    expect(runsAfterNext.length).toBeGreaterThan(0);
+    // Verify we got different runs
+    expect(runsAfterNext[0].runId).not.toEqual(initialRuns[0].runId);
+
+    await dagsPage.clickPrevPage();
+
+    const runsAfterPrev = await dagsPage.getRunDetails();
+
+    expect(runsAfterPrev[0].runId).toEqual(initialRuns[0].runId);
+  });
+});