Add E2E tests for Plugins page

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

@@ -0,0 +1,200 @@
+/*!
+ * 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 type { Locator, Page } from "@playwright/test";
+
+import { BasePage } from "./BasePage";
+
+/**
+ * Plugins Page Object
+ */
+export class PluginsPage extends BasePage {
+  public readonly emptyState: Locator;
+  public readonly heading: Locator;
+  public readonly paginationNextButton: Locator;
+  public readonly paginationPrevButton: Locator;
+  public readonly rows: Locator;
+  public readonly table: Locator;
+
+  private currentLimit?: number;
+  private currentOffset?: number;
+
+  public constructor(page: Page) {
+    super(page);
+
+    this.heading = page.getByRole("heading", {
+      name: /plugins/i,
+    });
+    this.table = page.getByTestId("table-list");
+    this.rows = this.table.locator("tbody tr").filter({
+      has: page.locator("td"),
+    });
+    this.paginationNextButton = page.locator('[data-testid="next"]');
+    this.paginationPrevButton = page.locator('[data-testid="prev"]');
+    this.emptyState = page.getByText(/no items/i);
+  }
+
+  /**
+   * Click the next page button
+   */
+  public async clickNextPage(): Promise<void> {
+    await this.paginationNextButton.click();
+    await this.waitForLoad();
+    await this.ensureUrlParams();
+  }
+
+  /**
+   * Click the previous page button
+   */
+  public async clickPrevPage(): Promise<void> {
+    await this.paginationPrevButton.click();
+    await this.waitForLoad();
+    await this.ensureUrlParams();
+  }
+
+  /**
+   * Get the count of plugin rows
+   */
+  public async getPluginCount(): Promise<number> {
+    return this.rows.count();
+  }
+
+  /**
+   * Get all plugin names from the current page
+   */
+  public async getPluginNames(): Promise<Array<string>> {
+    const count = await this.rows.count();
+
+    if (count === 0) {
+      return [];
+    }
+
+    return this.rows.locator("td:first-child").allTextContents();
+  }
+
+  /**
+   * Get all plugin sources from the current page
+   */
+  public async getPluginSources(): Promise<Array<string>> {
+    const count = await this.rows.count();
+
+    if (count === 0) {
+      return [];
+    }
+
+    return this.rows.locator("td:nth-child(2)").allTextContents();
+  }
+
+  /**
+   * Check if the next page button is available and enabled
+   */
+  public async hasNextPage(): Promise<boolean> {
+    const count = await this.paginationNextButton.count();
+
+    if (count === 0) {
+      return false;
+    }
+
+    return await this.paginationNextButton.isEnabled();
+  }
+
+  /**
+   * Navigate to Plugins page
+   */
+  public async navigate(): Promise<void> {
+    await this.navigateTo("/plugins");
+  }
+
+  /**
+   * Navigate to Plugins page with specific pagination parameters
+   */
+  public async navigateWithParams(limit: number, offset: number): Promise<void> {
+    this.currentLimit = limit;
+    this.currentOffset = offset;
+
+    await this.page.goto(`/plugins?limit=${limit}&offset=${offset}`, {
+      timeout: 30_000,
+      waitUntil: "domcontentloaded",
+    });
+    await this.waitForLoad();
+    await this.ensureUrlParams();
+  }
+
+  /**
+   * Wait for the plugins page to fully load
+   */
+  public async waitForLoad(): Promise<void> {
+    await this.table.waitFor({ state: "visible", timeout: 30_000 });
+    await this.waitForTableData();
+  }
+
+  /**
+   * Wait for table data to be loaded (not skeleton loaders)
+   */
+  public async waitForTableData(): Promise<void> {
+    // Wait for actual data cells to appear (not skeleton loaders)
+    await this.page.waitForFunction(
+      () => {
+        const table = document.querySelector('[data-testid="table-list"]');
+
+        if (!table) {
+          return false;
+        }
+
+        // Check for actual content in tbody (real data, not skeleton)
+        const cells = table.querySelectorAll("tbody tr td");
+
+        return cells.length > 0;
+      },
+      undefined,
+      { timeout: 30_000 },
+    );
+  }
+
+  /**
+   * Ensure offset and limit params are present in URL to prevent them from being ignored
+   * This is similar to EventsPage.ensureUrlParams()
+   */
+  private async ensureUrlParams(): Promise<void> {
+    if (this.currentLimit === undefined || this.currentOffset === undefined) {
+      return;
+    }
+
+    const currentUrl = this.page.url();
+    const url = new URL(currentUrl);
+    const hasLimit = url.searchParams.has("limit");
+    const hasOffset = url.searchParams.has("offset");
+
+    if (hasLimit && !hasOffset) {
+      url.searchParams.set("offset", String(this.currentOffset));
+      await this.page.goto(url.toString(), {
+        timeout: 30_000,
+        waitUntil: "domcontentloaded",
+      });
+      await this.waitForLoad();
+    } else if (!hasLimit && !hasOffset) {
+      url.searchParams.set("offset", String(this.currentOffset));
+      url.searchParams.set("limit", String(this.currentLimit));
+      await this.page.goto(url.toString(), {
+        timeout: 30_000,
+        waitUntil: "domcontentloaded",
+      });
+      await this.waitForLoad();
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+/*!
+ * 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.navigate();
+    await pluginsPage.waitForLoad();
+  });
+
+  test("verify plugins page heading is visible", async () => {
+    await expect(pluginsPage.heading).toBeVisible();
+  });
+
+  test("verify plugins table is visible", async () => {
+    await expect(pluginsPage.table).toBeVisible();
+  });
+
+  test("verify plugins list displays with data", async () => {
+    const count = await pluginsPage.getPluginCount();
+
+    expect(count).toBeGreaterThan(0);
+  });
+
+  test("verify each plugin has a name", async () => {
+    const pluginNames = await pluginsPage.getPluginNames();
+
+    expect(pluginNames.length).toBeGreaterThan(0);
+
+    for (const name of pluginNames) {
+      expect(name.trim().length).toBeGreaterThan(0);
+    }
+  });
+
+  test("verify each plugin has a source", async () => {
+    const pluginSources = await pluginsPage.getPluginSources();
+
+    expect(pluginSources.length).toBeGreaterThan(0);
+
+    for (const source of pluginSources) {
+      expect(source.trim().length).toBeGreaterThan(0);
+    }
+  });
+
+  test("verify plugin names and sources have matching counts", async () => {
+    const pluginNames = await pluginsPage.getPluginNames();
+    const pluginSources = await pluginsPage.getPluginSources();
+
+    expect(pluginNames.length).toBe(pluginSources.length);
+  });
+});
+
+test.describe.skip("Plugins Pagination", () => {
+  let pluginsPage: PluginsPage;
+
+  test.beforeEach(({ page }) => {
+    pluginsPage = new PluginsPage(page);
+  });
+
+  test("should navigate through pages using next and prev buttons", async () => {
+    await pluginsPage.navigate();
+
+    await expect(pluginsPage.paginationNextButton).toBeVisible();
+    await expect(pluginsPage.paginationPrevButton).toBeVisible();
+
+    const initialPluginNames = await pluginsPage.getPluginNames();
+
+    expect(initialPluginNames.length).toBeGreaterThan(0);
+
+    await pluginsPage.clickNextPage();
+
+    const pluginNamesAfterNext = await pluginsPage.getPluginNames();
+
+    expect(pluginNamesAfterNext.length).toBeGreaterThan(0);
+    expect(pluginNamesAfterNext).not.toEqual(initialPluginNames);
+
+    await pluginsPage.clickPrevPage();
+
+    const pluginNamesAfterPrev = await pluginsPage.getPluginNames();
+
+    expect(pluginNamesAfterPrev).toEqual(initialPluginNames);
+  });
+});