added E2E tests for Plugins Page #60571

airflow-core/src/airflow/ui/tests/e2e/pages/PluginsPage.tsx

@@ -0,0 +1,156 @@
+/*!
+ * 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, type Locator, type Page } from "@playwright/test";
+
+export class PluginsPage {
+  public readonly nextPageButton: Locator;
+  public readonly noDataMessage: Locator;
+  public readonly page: Page;
+  public readonly pageTitle: Locator;
+  public readonly paginationContainer: Locator;
+  public readonly pluginRows: Locator;
+  public readonly pluginsTable: Locator;
+  public readonly prevPageButton: Locator;
+  public readonly tableHeaders: Locator;
+
+  public constructor(page: Page) {
+    this.page = page;
+
+    // Page elements
+    this.pageTitle = page.locator('h1, [data-testid="page-title"]').filter({ hasText: /plugins/i });
+    this.pluginsTable = page.locator("table");
+    this.pluginRows = page.locator("tbody tr");
+    this.tableHeaders = page.locator("thead th");
+
+    // Pagination elements
+    this.paginationContainer = page.locator('nav[aria-label*="pagination"], nav[data-scope="pagination"]');
+    this.nextPageButton = page.locator('button[aria-label*="next page"], [data-testid="next"]');
+    this.prevPageButton = page.locator('button[aria-label*="previous page"], [data-testid="prev"]');
+
+    // Other elements
+    this.noDataMessage = page.locator("text=/No Plugins found|No Plugins Found|noItemsFound/i");
+  }
+
+  // Get current page number
+  public async getCurrentPageNumber(): Promise<number> {
+    const activePageButton = this.page.locator('[aria-current="page"], .active').first();
+    const pageText = await activePageButton.textContent();
+
+    return pageText !== null && pageText !== "" ? Number.parseInt(pageText.trim(), 10) : 1;
+  }
+
+  // Get the count of visible plugins
+  public async getPluginCount(): Promise<number> {
+    await this.waitForPluginsToLoad();
+
+    return await this.pluginRows.count();
+  }
+
+  // Get plugin names from the current page
+  public async getPluginNames(): Promise<Array<string>> {
+    await this.waitForPluginsToLoad();
+    const count = await this.pluginRows.count();
+    const names: Array<string> = [];
+
+    for (const index of Array.from({ length: count }, (_, i) => i)) {
+      const row = this.pluginRows.nth(index);
+      const nameCell = row.locator("td").first();
+      const name = await nameCell.textContent();
+
+      if (name !== null && name !== "") {
+        names.push(name.trim());
+      }
+    }
+
+    return names;
+  }
+
+  // Get table headers
+  public async getTableHeaders(): Promise<Array<string>> {
+    const count = await this.tableHeaders.count();
+    const headers: Array<string> = [];
+
+    for (const index of Array.from({ length: count }, (_, i) => i)) {
+      const headerText = await this.tableHeaders.nth(index).textContent();
+
+      if (headerText !== null && headerText !== "") {
+        headers.push(headerText.trim());
+      }
+    }
+
+    return headers;
+  }
+
+  // Navigate to the plugins page
+  public async goto(): Promise<void> {
+    await this.page.goto("/plugins");
+    await this.page.waitForLoadState("networkidle");
+  }
+
+  // Navigate to the next page
+  public async goToNextPage(): Promise<void> {
+    await this.nextPageButton.click();
+    await this.page.waitForLoadState("networkidle");
+    await this.waitForPluginsToLoad();
+  }
+
+  // Navigate to the previous page
+  public async goToPreviousPage(): Promise<void> {
+    await this.prevPageButton.click();
+    await this.page.waitForLoadState("networkidle");
+    await this.waitForPluginsToLoad();
+  }
+
+  // Check if next page button is enabled
+  public async isNextPageEnabled(): Promise<boolean> {
+    const isDisabled = await this.nextPageButton.isDisabled().catch(() => true);
+
+    return !isDisabled;
+  }
+
+  // Check if pagination is visible
+  public async isPaginationVisible(): Promise<boolean> {
+    try {
+      await this.paginationContainer.scrollIntoViewIfNeeded();
+
+      return await this.paginationContainer.isVisible();
+    } catch {
+      return false;
+    }
+  }
+
+  // Check if previous page button is enabled
+  public async isPreviousPageEnabled(): Promise<boolean> {
+    const isDisabled = await this.prevPageButton.isDisabled().catch(() => true);
+
+    return !isDisabled;
+  }
+
+  // Verify empty state
+  public async verifyEmptyState(): Promise<void> {
+    await expect(this.noDataMessage).toBeVisible();
+  }
+
+  // Wait for the plugins list to load
+  public async waitForPluginsToLoad(): Promise<void> {
+    await this.page.waitForSelector("table tbody tr", {
+      timeout: 8000,
+    });
+  }
+}

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

@@ -0,0 +1,132 @@
+/*!
+ * 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 { PluginsPage } from "../pages/PluginsPage";
+
+test.describe("Plugins Page", () => {
+  let pluginsPage: PluginsPage;
+
+  test.beforeEach(async ({ page }) => {
+    pluginsPage = new PluginsPage(page);
+    await pluginsPage.goto();
+  });
+
+  test.describe("Plugins List Display", () => {
+    test("should display plugins list or empty state", async () => {
+      const pluginCount = await pluginsPage.getPluginCount();
+
+      if (pluginCount === 0) {
+        // Verify empty state is displayed
+        await pluginsPage.verifyEmptyState();
+      } else {
+        await expect(pluginsPage.pluginsTable).toBeVisible();
+        expect(pluginCount).toBeGreaterThan(0);
+      }
+    });
+
+    test("should display plugin information correctly when plugins exist", async () => {
+      const pluginCount = await pluginsPage.getPluginCount();
+
+      if (pluginCount === 0) {
+        await pluginsPage.verifyEmptyState();
+
+        return;
+      }
+
+      const pluginNames = await pluginsPage.getPluginNames();
+
+      expect(pluginNames.length).toBeGreaterThan(0);
+    });
+
+    test("should display table headers", async () => {
+      const pluginCount = await pluginsPage.getPluginCount();
+
+      if (pluginCount === 0) {
+        // Verify empty state instead of checking headers
+        await pluginsPage.verifyEmptyState();
+
+        return;
+      }
+
+      const headers = await pluginsPage.getTableHeaders();
+
+      expect(headers.length).toBeGreaterThan(0);
+    });
+  });
+
+  test.describe("Pagination", () => {
+    test("should display pagination controls when there are multiple pages", async () => {
+      const pluginCount = await pluginsPage.getPluginCount();
+
+      // Skip if no plugins
+      if (pluginCount === 0) {
+        test.skip();
+
+        return;
+      }
+
+      const paginationVisible = await pluginsPage.isPaginationVisible();
+
+      // Pagination is visible when plugins exceed page size
+      if (pluginCount > 50) {
+        expect(paginationVisible).toBeTruthy();
+      }
+    });
+
+    test("should navigate to next page", async () => {
+      const nextPageEnabled = await pluginsPage.isNextPageEnabled();
+
+      if (!nextPageEnabled) {
+        test.skip();
+
+        return;
+      }
+
+      const firstPagePlugins = await pluginsPage.getPluginNames();
+
+      await pluginsPage.goToNextPage();
+      const secondPagePlugins = await pluginsPage.getPluginNames();
+
+      // Verify we're on a different page (different plugins)
+      expect(firstPagePlugins).not.toEqual(secondPagePlugins);
+    });
+
+    test("should navigate to previous page", async () => {
+      const nextPageEnabled = await pluginsPage.isNextPageEnabled();
+
+      if (!nextPageEnabled) {
+        test.skip();
+
+        return;
+      }
+
+      // Go to second page
+      await pluginsPage.goToNextPage();
+      const secondPagePlugins = await pluginsPage.getPluginNames();
+
+      // Go back to first page
+      await pluginsPage.goToPreviousPage();
+      const firstPagePlugins = await pluginsPage.getPluginNames();
+
+      // Verify we're back on first page
+      expect(firstPagePlugins).not.toEqual(secondPagePlugins);
+    });
+  });
+});