fix(sqllab): fix Playwright tests failing in CI empty-state SQL Lab

In CI, the admin user has no saved SQL Lab tabs, so TabbedSqlEditors
renders type="card" (empty state) instead of type="editable-card".
The antd add-tab button (.ant-tabs-nav-add) only exists in
editable-card mode, causing all 10 tests to timeout at 30s.

- Add EditableTabs Playwright component for antd editable-card tabs
- Refactor SqlLabPage to use EditableTabs for tab management
- ensureEditorReady() clicks [data-test="add-tab-icon"] which exists
  in both card modes, replacing the missing getByRole button
- Replace fixed 1000ms wait with proper waitFor({ state: 'visible' })
- Add test.setTimeout(60_000) to all SQL Lab specs for CI headroom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: sadpandajoe

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

@@ -0,0 +1,65 @@
+/**
+ * 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();
+  }
+
+  /**
+   * Returns the number of tabs (excludes the add button).
+   */
+  async getTabCount(): Promise<number> {
+    return this.element.getByRole('tab').count();
+  }
+
+  /**
+   * Returns the text content of all tabs.
+   */
+  async getTabNames(): Promise<string[]> {
+    return this.element.getByRole('tab').allTextContents();
+  }
+
+  /**
+   * Clicks the remove button on the last tab.
+   */
+  async removeLastTab(): Promise<void> {
+    await this.element
+      .locator('.ant-tabs-tab-remove')
+      .last()
+      .click();
+  }
+}

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

@@ -22,6 +22,7 @@ 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';

superset-frontend/playwright/pages/SqlLabPage.ts

@@ -20,6 +20,7 @@
 import { Page, Locator } from '@playwright/test';
 import { AceEditor } from '../components/core/AceEditor';
 import { AgGrid } from '../components/core/AgGrid';
+import { EditableTabs } from '../components/core/EditableTabs';
 import { Select } from '../components/core/Select';
 import { Modal } from '../components/core/Modal';
 import { URL } from '../utils/urls';
@@ -32,14 +33,11 @@ import { TIMEOUT } from '../utils/constants';
  */
 export class SqlLabPage {
   private readonly page: Page;
+  private readonly editorTabs: EditableTabs;
 
   private static readonly SELECTORS = {
     SQL_EDITOR_TABS: '[data-test="sql-editor-tabs"]',
-    TABLIST: '[data-test="sql-editor-tabs"] > [role="tablist"]',
-    TAB: '[data-test="sql-editor-tabs"] > [role="tablist"] [role="tab"]:not([type="button"])',
     ADD_TAB_ICON: '[data-test="add-tab-icon"]',
-    DROPDOWN_TRIGGER: '[data-test="dropdown-trigger"]',
-    CLOSE_TAB_MENU_OPTION: '[data-test="close-tab-menu-option"]',
     RUN_QUERY_BUTTON: '[data-test="run-query-action"]',
     SOUTH_PANE: '[data-test="south-pane"]',
     EXPLORE_RESULTS_BUTTON: '[data-test="explore-results-button"]',
@@ -49,12 +47,15 @@ export class SqlLabPage {
     LEFT_BAR: '[data-test="sql-editor-left-bar"]',
     DATABASE_SELECTOR: '[data-test="DatabaseSelector"]',
     LIMIT_DROPDOWN: '.limitDropdown',
-    TAB_REMOVE: '[aria-label="remove"]',
     SAVE_DATASET_BUTTON: 'button[aria-label="Save dataset"]',
   } as const;
 
   constructor(page: Page) {
     this.page = page;
+    this.editorTabs = new EditableTabs(
+      page,
+      page.locator(SqlLabPage.SELECTORS.SQL_EDITOR_TABS),
+    );
   }
 
   // ── Navigation ──
@@ -66,23 +67,29 @@ export class SqlLabPage {
   async waitForPageLoad(options?: { timeout?: number }): Promise<void> {
     // SQL Lab with dev server can be slow on first load (webpack HMR + React hydration)
     const timeout = options?.timeout ?? TIMEOUT.QUERY_EXECUTION;
-    await this.page
-      .locator(SqlLabPage.SELECTORS.SQL_EDITOR_TABS)
-      .waitFor({ state: 'visible', timeout });
+    await this.editorTabs.element.waitFor({ state: 'visible', timeout });
   }
 
   /**
    * Ensures at least one query editor tab exists. Creates one if SQL Lab
    * is in the empty state ("Add a new tab to create SQL Query").
    * Waits for the ace editor to be ready before returning.
+   *
+   * SQL Lab renders type="card" in empty state (no .ant-tabs-nav-add button),
+   * so we click the SQL Lab-specific [data-test="add-tab-icon"] instead of
+   * using EditableTabs.addTab() which requires type="editable-card".
    */
   async ensureEditorReady(): Promise<void> {
     const editorLocator = this.page.locator(SqlLabPage.SELECTORS.ACE_EDITOR);
     const editorCount = await editorLocator.count();
     if (editorCount === 0) {
-      await this.addTab();
-      // Wait for new tab panel to render
-      await this.page.waitForTimeout(1000);
+      // Empty state: click the add-tab icon directly (works in both card modes)
+      await this.editorTabs.element
+        .locator(SqlLabPage.SELECTORS.ADD_TAB_ICON)
+        .first()
+        .click();
+      // Wait for ace editor to render after tab creation
+      await editorLocator.first().waitFor({ state: 'visible' });
     }
     await this.getEditor().waitForReady();
   }
@@ -120,25 +127,16 @@ export class SqlLabPage {
 
   // ── Tab Management ──
 
-  private get tabs(): Locator {
-    return this.page.locator(SqlLabPage.SELECTORS.TAB);
-  }
-
   async getTabCount(): Promise<number> {
-    return this.tabs.count();
+    return this.editorTabs.getTabCount();
   }
 
   async getTabNames(): Promise<string[]> {
-    return this.tabs.allTextContents();
+    return this.editorTabs.getTabNames();
   }
 
   async addTab(): Promise<void> {
-    // Target the visible "Add tab" button — there can be duplicates in the DOM
-    await this.page
-      .locator(SqlLabPage.SELECTORS.SQL_EDITOR_TABS)
-      .getByRole('button', { name: 'Add tab' })
-      .first()
-      .click();
+    await this.editorTabs.addTab();
   }
 
   async addTabByShortcut(): Promise<void> {
@@ -148,24 +146,24 @@ export class SqlLabPage {
 
   async closeLastTab(): Promise<void> {
     const countBefore = await this.getTabCount();
-    // Click the × (close) button on the last tab.
-    await this.page
-      .locator(
-        `${SqlLabPage.SELECTORS.TABLIST} ${SqlLabPage.SELECTORS.TAB_REMOVE}`,
-      )
-      .last()
-      .click();
+    await this.editorTabs.removeLastTab();
     // Wait for tab count to decrease
-    const tabSelector = SqlLabPage.SELECTORS.TAB;
     await this.page.waitForFunction(
-      ([sel, expected]) => document.querySelectorAll(sel).length === expected,
-      [tabSelector, countBefore - 1] as const,
+      ([count, expected]) => {
+        const tabs = document.querySelectorAll(
+          '[data-test="sql-editor-tabs"] [role="tab"]',
+        );
+        return tabs.length === expected;
+      },
+      [countBefore, countBefore - 1] as const,
       { timeout: 5000 },
     );
   }
 
   getTab(name: string): Locator {
-    return this.page.locator('[role="tab"]', { hasText: name });
+    // Use hasText (substring) rather than getByRole name (accessible name)
+    // because getTabNames() returns text content which may include close-icon text.
+    return this.editorTabs.element.locator('[role="tab"]', { hasText: name });
   }
 
   // ── Database Selection (Left Sidebar) ──

superset-frontend/playwright/tests/sqllab/create-chart-from-query.spec.ts

@@ -26,6 +26,7 @@ import { TIMEOUT } from '../../utils/constants';
 test('should navigate to Explore from SQL Lab query results', async ({
   page,
 }) => {
+  test.setTimeout(60_000);
   const sqlLabPage = new SqlLabPage(page);
   await sqlLabPage.goto();
   await sqlLabPage.waitForPageLoad();

superset-frontend/playwright/tests/sqllab/query-execution.spec.ts

@@ -25,6 +25,7 @@ import { TIMEOUT } from '../../utils/constants';
 let sqlLabPage: SqlLabPage;
 
 test.beforeEach(async ({ page }) => {
+  test.setTimeout(60_000);
   sqlLabPage = new SqlLabPage(page);
   await sqlLabPage.goto();
   await sqlLabPage.waitForPageLoad();
@@ -56,9 +57,7 @@ test('executes a simple SELECT query and displays results', async ({
 });
 
 test('shows error message for invalid SQL', async ({ page }) => {
-  await sqlLabPage.setQuery(
-    'SELECT * FROM a_table_that_does_not_exist_xyz_pw',
-  );
+  await sqlLabPage.setQuery('SELECT * FROM a_table_that_does_not_exist_xyz_pw');
 
   const executePromise = waitForPost(page, 'api/v1/sqllab/execute/', {
     timeout: TIMEOUT.QUERY_EXECUTION,

superset-frontend/playwright/tests/sqllab/save-and-share.spec.ts

@@ -28,6 +28,7 @@ import { TIMEOUT } from '../../utils/constants';
 let sqlLabPage: SqlLabPage;
 
 test.beforeEach(async ({ page }) => {
+  test.setTimeout(60_000);
   sqlLabPage = new SqlLabPage(page);
   await sqlLabPage.goto();
   await sqlLabPage.waitForPageLoad();

superset-frontend/playwright/tests/sqllab/tabs.spec.ts

@@ -24,6 +24,7 @@ import { waitForPost } from '../../helpers/api/intercepts';
 let sqlLabPage: SqlLabPage;
 
 test.beforeEach(async ({ page }) => {
+  test.setTimeout(60_000);
   sqlLabPage = new SqlLabPage(page);
   await sqlLabPage.goto();
   await sqlLabPage.waitForPageLoad();