test(sqllab): add Playwright POM and helpers for SQL Lab E2E tests

SqlLabPage page object with AceEditor, AgGrid, DatabaseSelector,
and EditableTabs component wrappers. Shared test helpers for API
assertions (expectStatus, extractIdFromResponse), saved-query API,
and request intercepts (waitForPost/waitForGet). SaveQueryModal
and SaveDatasetModal page objects. Timeout constants and URL registry.

Author: sadpandajoe

superset-frontend/playwright/components/core/AgGrid.ts

@@ -0,0 +1,85 @@
+/**
+ * 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 { Locator, Page } from '@playwright/test';
+
+const AG_GRID_SELECTORS = {
+  ROOT: '[role="grid"]',
+  HEADER_ROW: '.ag-header-row',
+  HEADER_CELL: '.ag-header-cell',
+  BODY_ROW: '.ag-row',
+  CELL: '.ag-cell',
+} as const;
+
+/**
+ * AG Grid component wrapper for Playwright.
+ * Used by FilterableTable/GridTable in SQL Lab results and elsewhere.
+ */
+export class AgGrid {
+  readonly page: Page;
+  private readonly locator: Locator;
+
+  constructor(page: Page, locator: Locator) {
+    this.page = page;
+    this.locator = locator;
+  }
+
+  get element(): Locator {
+    return this.locator;
+  }
+
+  /**
+   * Wait for the grid to render with data rows
+   */
+  async waitForRows(options?: { timeout?: number }): Promise<void> {
+    await this.locator
+      .locator(AG_GRID_SELECTORS.BODY_ROW)
+      .first()
+      .waitFor({ state: 'visible', ...options });
+  }
+
+  /**
+   * Get header cell texts
+   */
+  async getHeaderTexts(): Promise<string[]> {
+    return this.locator
+      .locator(AG_GRID_SELECTORS.HEADER_CELL)
+      .allTextContents();
+  }
+
+  /**
+   * Get the number of visible data rows
+   */
+  async getRowCount(): Promise<number> {
+    return this.locator.locator(AG_GRID_SELECTORS.BODY_ROW).count();
+  }
+
+  /**
+   * Get cell text at a specific row and column index (0-based)
+   */
+  async getCellText(row: number, col: number): Promise<string> {
+    const text = await this.locator
+      .locator(AG_GRID_SELECTORS.BODY_ROW)
+      .nth(row)
+      .locator(AG_GRID_SELECTORS.CELL)
+      .nth(col)
+      .textContent();
+    return text?.trim() ?? '';
+  }
+}

superset-frontend/playwright/components/core/EditableTabs.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { Tabs } from './Tabs';
+
+/**
+ * EditableTabs component for Ant Design editable-card tabs.
+ *
+ * Mirrors the Superset EditableTabs component (type="editable-card")
+ * which adds add/remove tab functionality to the base Tabs component.
+ *
+ * The add button (.ant-tabs-nav-add) is only rendered when
+ * type="editable-card". If the host component switches to type="card"
+ * (e.g., SQL Lab empty state), use the host page object for that case.
+ */
+export class EditableTabs extends Tabs {
+  /**
+   * Clicks the add-tab button rendered by antd in editable-card mode.
+   */
+  async addTab(): Promise<void> {
+    await this.element.getByRole('button', { name: 'Add tab' }).click();
+  }
+
+  /**
+   * Clicks the remove button on the last tab.
+   */
+  async removeLastTab(): Promise<void> {
+    await this.nav.locator('.ant-tabs-tab-remove').last().click();
+  }
+}

superset-frontend/playwright/components/core/Modal.ts

@@ -68,7 +68,7 @@ export class Modal {
   }
 
   /**
-   * Gets a footer button by text content (private helper)
+   * Gets a footer button by text content
    * @param buttonText - The text content of the button
    */
   private getFooterButton(buttonText: string): Locator {
@@ -80,7 +80,7 @@ export class Modal {
    * @param buttonText - The text content of the button to click
    * @param options - Optional click options
    */
-  protected async clickFooterButton(
+  async clickFooterButton(
     buttonText: string,
     options?: { timeout?: number; force?: boolean; delay?: number },
   ): Promise<void> {

superset-frontend/playwright/components/core/Popover.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 { Locator, Page } from '@playwright/test';
+import { Button } from './Button';
+
+/**
+ * Ant Design Popover component.
+ */
+export class Popover {
+  readonly page: Page;
+  private readonly locator: Locator;
+
+  constructor(page: Page, locator?: Locator) {
+    this.page = page;
+    this.locator = locator ?? page.locator('.ant-popover-content');
+  }
+
+  get element(): Locator {
+    return this.locator;
+  }
+
+  async waitForVisible(options?: { timeout?: number }): Promise<void> {
+    await this.locator.waitFor({ state: 'visible', ...options });
+  }
+
+  async waitForHidden(options?: { timeout?: number }): Promise<void> {
+    await this.locator.waitFor({ state: 'hidden', ...options });
+  }
+
+  getButton(name: string): Button {
+    return new Button(
+      this.page,
+      this.locator.getByRole('button', { name, exact: true }),
+    );
+  }
+}

superset-frontend/playwright/components/core/Select.ts

@@ -18,6 +18,7 @@
  */
 
 import { Locator, Page } from '@playwright/test';
+import { TIMEOUT } from '../../utils/constants';
 
 /**
  * Ant Design Select component selectors
@@ -87,7 +88,7 @@ export class Select {
     await this.page
       .locator(`${SELECT_SELECTORS.DROPDOWN}:not(.ant-select-dropdown-hidden)`)
       .last()
-      .waitFor({ state: 'hidden', timeout: 5000 })
+      .waitFor({ state: 'hidden', timeout: TIMEOUT.UI_TRANSITION })
       .catch(error => {
         // Only ignore TimeoutError (dropdown may already be closed); re-throw others
         if (!(error instanceof Error) || error.name !== 'TimeoutError') {

superset-frontend/playwright/components/core/Tabs.ts

@@ -21,30 +21,65 @@ import { Locator, Page } from '@playwright/test';
 
 /**
  * Tabs component for Ant Design tab navigation.
+ *
+ * Expects the locator to point to the `.ant-tabs` wrapper element
+ * (not the inner tablist) so that `nav` can scope to the outer tab bar
+ * and exclude nested/inner tabs (e.g. Results / Query history in SQL Lab).
  */
 export class Tabs {
   readonly page: Page;
   private readonly locator: Locator;
 
   constructor(page: Page, locator?: Locator) {
     this.page = page;
-    // Default to the tablist role if no specific locator provided
-    this.locator = locator ?? page.getByRole('tablist');
+    this.locator = locator ?? page.locator('.ant-tabs').first();
   }
 
   /**
-   * Gets the tablist element locator
+   * The root element locator for this tabs component.
    */
   get element(): Locator {
     return this.locator;
   }
 
   /**
-   * Gets a tab by name, scoped to this tablist's container
+   * The tab navigation bar for this component.
+   * Scoped to the first `.ant-tabs-nav` descendant so that queries
+   * only hit this component's tabs, never nested/inner tab bars.
+   */
+  protected get nav(): Locator {
+    return this.locator.locator('.ant-tabs-nav').first();
+  }
+
+  /**
+   * Returns the number of tabs.
+   * Counts `.ant-tabs-tab` wrappers in the nav bar — one per physical tab,
+   * regardless of inner role="tab" elements (btn, remove button, etc.).
+   */
+  async getTabCount(): Promise<number> {
+    return this.nav.locator('.ant-tabs-tab').count();
+  }
+
+  /**
+   * Returns the text content of all tabs.
+   */
+  async getTabNames(): Promise<string[]> {
+    return this.nav.locator('.ant-tabs-tab-btn').allTextContents();
+  }
+
+  /**
+   * Gets a tab button by name, scoped to this component's nav bar.
+   * Anchored at start (^) with negative lookahead (?!\d) to prevent
+   * partial matches: "Query" won't match "Query 1", and "Query 1"
+   * won't match "Query 10". Trailing icon text (e.g. " circle-solid")
+   * is allowed since (?!\d) permits non-digit suffixes.
    * @param tabName - The name/label of the tab
    */
   getTab(tabName: string): Locator {
-    return this.locator.getByRole('tab', { name: tabName });
+    const escaped = tabName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return this.nav
+      .locator('.ant-tabs-tab-btn')
+      .filter({ hasText: new RegExp(`^${escaped}(?!\\d)`) });
   }
 
   /**
@@ -63,6 +98,16 @@ export class Tabs {
     return this.page.getByRole('tabpanel', { name: tabName });
   }
 
+  /**
+   * Returns the name of the currently active tab.
+   */
+  async getActiveTabName(): Promise<string> {
+    const text = await this.nav
+      .locator('.ant-tabs-tab-active .ant-tabs-tab-btn')
+      .textContent();
+    return text?.trim() ?? '';
+  }
+
   /**
    * Checks if a tab is selected
    * @param tabName - The name/label of the tab

superset-frontend/playwright/components/core/index.ts

@@ -19,12 +19,15 @@
 
 // Core Playwright Components for Superset
 export { AceEditor } from './AceEditor';
+export { AgGrid } from './AgGrid';
 export { Button } from './Button';
 export { Checkbox } from './Checkbox';
+export { EditableTabs } from './EditableTabs';
 export { Form } from './Form';
 export { Input } from './Input';
 export { Menu } from './Menu';
 export { Modal } from './Modal';
+export { Popover } from './Popover';
 export { Select } from './Select';
 export { Table } from './Table';
 export { Tabs } from './Tabs';

superset-frontend/playwright/components/modals/EditDatasetModal.ts

@@ -40,8 +40,11 @@ export class EditDatasetModal extends Modal {
     // Use getByRole with specific name to target Edit Dataset dialog
     // The dialog has aria-labelledby that resolves to "edit Edit Dataset"
     this.specificLocator = page.getByRole('dialog', { name: /edit.*dataset/i });
-    // Scope tabs to modal's tablist to avoid matching tablists elsewhere on page
-    this.tabs = new Tabs(page, this.specificLocator.getByRole('tablist'));
+    // Scope tabs to modal dialog so nav getter finds .ant-tabs-nav as descendant
+    this.tabs = new Tabs(
+      page,
+      this.specificLocator.locator('.ant-tabs').first(),
+    );
   }
 
   /**

superset-frontend/playwright/components/modals/SaveDatasetModal.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 { Page } from '@playwright/test';
+import { Input, Modal } from '../core';
+
+/**
+ * Save Dataset modal in SQL Lab.
+ * Appears when clicking "Save dataset" after running a query.
+ */
+export class SaveDatasetModal extends Modal {
+  constructor(page: Page) {
+    super(page, '[data-test="Save or Overwrite Dataset-modal"] .ant-modal');
+  }
+
+  private get nameInput(): Input {
+    return new Input(
+      this.page,
+      this.body.locator('input[placeholder="Dataset name"]'),
+    );
+  }
+
+  async fillName(name: string): Promise<void> {
+    await this.nameInput.clear();
+    await this.nameInput.fill(name);
+  }
+}