Feat e2e test for Dags pagination

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

@@ -33,6 +33,10 @@
   // Core page elements
   public readonly confirmButton: Locator;
   public readonly dagsTable: Locator;
+  // Pagination elements
+  public readonly paginationNextButton: Locator;
+  public readonly paginationPrevButton: Locator;
+
   public readonly stateElement: Locator;
   public readonly triggerButton: Locator;
 
@@ -42,6 +46,8 @@
     this.triggerButton = page.locator('button[aria-label="Trigger Dag"]:has-text("Trigger")');
     this.confirmButton = page.locator('button:has-text("Trigger")').nth(1);
     this.stateElement = page.locator('*:has-text("State") + *').first();
+    this.paginationNextButton = page.locator('[data-testid="next"]');
+    this.paginationPrevButton = page.locator('[data-testid="prev"]');
   }
 
   // URL builders for dynamic paths
@@ -53,6 +59,34 @@
     return `/dags/${dagName}/runs/${dagRunId}/details`;
   }
 
+  /**
+   * Click next page button
+   */
+  public async clickNextPage(): Promise<void> {
+    await this.paginationNextButton.click();
+    await this.waitForPageLoad();
+  }
+
+  /**
+   * Click previous page button
+   */
+  public async clickPrevPage(): Promise<void> {
+    await this.paginationPrevButton.click();
+    await this.waitForPageLoad();
+  }
+
+  /**
+   * Get all Dag names from the current page
+   */
+  public async getDagNames(): Promise<Array<string>> {
+    const dagLinks = this.page.locator('[data-testid="dag-id"]');
+
+    await dagLinks.first().waitFor({ state: "visible", timeout: 10_000 });
+    const texts = await dagLinks.allTextContents();
+
+    return texts.map((text) => text.trim()).filter((text) => text !== "");
+  }
+
   /**
    * Navigate to Dags list page
    */

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

@@ -0,0 +1,66 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { expect, test } from "@playwright/test";
+import { testConfig } from "playwright.config";
+import { DagsPage } from "tests/e2e/pages/DagsPage";
+import { LoginPage } from "tests/e2e/pages/LoginPage";
+
+/**
+ * Dags Pagination E2E Tests
+ */
+
+test.describe("Dags Pagination", () => {
+  let loginPage: LoginPage;
+  let dagsPage: DagsPage;
+
+  const testCredentials = testConfig.credentials;
+
+  test.beforeEach(({ page }) => {
+    loginPage = new LoginPage(page);
+    dagsPage = new DagsPage(page);
+  });
+
+  test("should verify pagination works on the Dags list page", async () => {
+    await loginPage.navigateAndLogin(testCredentials.username, testCredentials.password);
+
+    await loginPage.expectLoginSuccess();
+
+    await dagsPage.navigate();
+
+    await expect(dagsPage.paginationNextButton).toBeVisible();
+    await expect(dagsPage.paginationPrevButton).toBeVisible();
+
+    const initialDagNames = await dagsPage.getDagNames();
+
+    expect(initialDagNames.length).toBeGreaterThan(0);
+
+    await dagsPage.clickNextPage();
+
+    const dagNamesAfterNext = await dagsPage.getDagNames();
+
+    expect(dagNamesAfterNext.length).toBeGreaterThan(0);
+    expect(dagNamesAfterNext).not.toEqual(initialDagNames);
+
+    await dagsPage.clickPrevPage();
+
+    const dagNamesAfterPrev = await dagsPage.getDagNames();
+
+    expect(dagNamesAfterPrev).toEqual(initialDagNames);
+  });
+});