fix(sqllab): fix Playwright tab counting with nav-scoped CSS selectors

Move getTabCount/getTabNames/getTab from EditableTabs to base Tabs class
using .ant-tabs-nav-scoped CSS selectors instead of getByRole('tab'),
which over-counted by matching remove buttons and inner tabs
(Results/Query history). Also fix ensureEditorReady race condition after
page reload where ace editor hasn't mounted yet but tabs exist in the
nav bar.

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

Author: sadpandajoe

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

@@ -34,32 +34,13 @@ 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();
+    await this.element.getByRole('button', { name: 'Add tab' }).click();
   }
 
   /**
    * Clicks the remove button on the last tab.
    */
   async removeLastTab(): Promise<void> {
-    await this.element
-      .locator('.ant-tabs-tab-remove')
-      .last()
-      .click();
+    await this.nav.locator('.ant-tabs-tab-remove').last().click();
   }
 }

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

@@ -21,30 +21,58 @@ 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');
   }
 
   /**
-   * 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.
    * @param tabName - The name/label of the tab
    */
   getTab(tabName: string): Locator {
-    return this.locator.getByRole('tab', { name: tabName });
+    return this.nav.locator('.ant-tabs-tab-btn').filter({ hasText: tabName });
   }
 
   /**

superset-frontend/playwright/pages/SqlLabPage.ts

@@ -75,22 +75,26 @@ export class SqlLabPage {
    * is in the empty state ("Add a new tab to create SQL Query").
    * Waits for the ace editor to be ready before returning.
    *
+   * Checks tab count in the nav bar (renders quickly) rather than ace editor
+   * presence (renders later) to avoid a race condition after page reload
+   * where the editor hasn't mounted yet but tabs already exist.
+   *
    * 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) {
+    const tabCount = await this.getTabCount();
+    if (tabCount === 0) {
       // 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' });
     }
+    // Wait for the ace editor to render (either from existing tab or newly created one)
+    const editorLocator = this.page.locator(SqlLabPage.SELECTORS.ACE_EDITOR);
+    await editorLocator.first().waitFor({ state: 'visible' });
     await this.getEditor().waitForReady();
   }
 
@@ -149,21 +153,20 @@ export class SqlLabPage {
     await this.editorTabs.removeLastTab();
     // Wait for tab count to decrease
     await this.page.waitForFunction(
-      ([count, expected]) => {
-        const tabs = document.querySelectorAll(
-          '[data-test="sql-editor-tabs"] [role="tab"]',
-        );
-        return tabs.length === expected;
+      ([selector, expected]) => {
+        const container = document.querySelector(selector);
+        if (!container) return false;
+        const nav = container.querySelector(':scope > .ant-tabs-nav');
+        if (!nav) return false;
+        return nav.querySelectorAll('.ant-tabs-tab').length === expected;
       },
-      [countBefore, countBefore - 1] as const,
+      [SqlLabPage.SELECTORS.SQL_EDITOR_TABS, countBefore - 1] as const,
       { timeout: 5000 },
     );
   }
 
   getTab(name: string): Locator {
-    // 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 });
+    return this.editorTabs.getTab(name);
   }
 
   // ── Database Selection (Left Sidebar) ──