test(playwright): additional dataset list playwright tests (#36684)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

superset-frontend/playwright/components/ListView/BulkSelect.ts

@@ -0,0 +1,116 @@
+/**
+ * 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, Checkbox, Table } from '../core';
+
+const BULK_SELECT_SELECTORS = {
+  CONTROLS: '[data-test="bulk-select-controls"]',
+  ACTION: '[data-test="bulk-select-action"]',
+} as const;
+
+/**
+ * BulkSelect component for Superset ListView bulk operations.
+ * Provides a reusable interface for bulk selection and actions across list pages.
+ *
+ * @example
+ * const bulkSelect = new BulkSelect(page, table);
+ * await bulkSelect.enable();
+ * await bulkSelect.selectRow('my-dataset');
+ * await bulkSelect.selectRow('another-dataset');
+ * await bulkSelect.clickAction('Delete');
+ */
+export class BulkSelect {
+  private readonly page: Page;
+  private readonly table: Table;
+
+  constructor(page: Page, table: Table) {
+    this.page = page;
+    this.table = table;
+  }
+
+  /**
+   * Gets the "Bulk select" toggle button
+   */
+  getToggleButton(): Button {
+    return new Button(
+      this.page,
+      this.page.getByRole('button', { name: 'Bulk select' }),
+    );
+  }
+
+  /**
+   * Enables bulk selection mode by clicking the toggle button
+   */
+  async enable(): Promise<void> {
+    await this.getToggleButton().click();
+  }
+
+  /**
+   * Gets the checkbox for a row by name
+   * @param rowName - The name/text identifying the row
+   */
+  getRowCheckbox(rowName: string): Checkbox {
+    const row = this.table.getRow(rowName);
+    return new Checkbox(this.page, row.getByRole('checkbox'));
+  }
+
+  /**
+   * Selects a row's checkbox in bulk select mode
+   * @param rowName - The name/text identifying the row to select
+   */
+  async selectRow(rowName: string): Promise<void> {
+    await this.getRowCheckbox(rowName).check();
+  }
+
+  /**
+   * Deselects a row's checkbox in bulk select mode
+   * @param rowName - The name/text identifying the row to deselect
+   */
+  async deselectRow(rowName: string): Promise<void> {
+    await this.getRowCheckbox(rowName).uncheck();
+  }
+
+  /**
+   * Gets the bulk select controls container locator (for assertions)
+   */
+  getControls(): Locator {
+    return this.page.locator(BULK_SELECT_SELECTORS.CONTROLS);
+  }
+
+  /**
+   * Gets a bulk action button by name
+   * @param actionName - The name of the bulk action (e.g., "Export", "Delete")
+   */
+  getActionButton(actionName: string): Button {
+    const controls = this.getControls();
+    return new Button(
+      this.page,
+      controls.locator(BULK_SELECT_SELECTORS.ACTION, { hasText: actionName }),
+    );
+  }
+
+  /**
+   * Clicks a bulk action button by name (e.g., "Export", "Delete")
+   * @param actionName - The name of the bulk action to click
+   */
+  async clickAction(actionName: string): Promise<void> {
+    await this.getActionButton(actionName).click();
+  }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+// ListView-specific Playwright Components for Superset
+export { BulkSelect } from './BulkSelect';

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

@@ -0,0 +1,207 @@
+/**
+ * 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 ACE_EDITOR_SELECTORS = {
+  TEXT_INPUT: '.ace_text-input',
+  TEXT_LAYER: '.ace_text-layer',
+  CONTENT: '.ace_content',
+  SCROLLER: '.ace_scroller',
+} as const;
+
+/**
+ * AceEditor component for interacting with Ace Editor instances in Playwright.
+ * Uses the ace editor API directly for reliable text manipulation.
+ */
+export class AceEditor {
+  readonly page: Page;
+  private readonly locator: Locator;
+
+  constructor(page: Page, selector: string);
+
+  constructor(page: Page, locator: Locator);
+
+  constructor(page: Page, selectorOrLocator: string | Locator) {
+    this.page = page;
+    if (typeof selectorOrLocator === 'string') {
+      this.locator = page.locator(selectorOrLocator);
+    } else {
+      this.locator = selectorOrLocator;
+    }
+  }
+
+  /**
+   * Gets the editor element locator
+   */
+  get element(): Locator {
+    return this.locator;
+  }
+
+  /**
+   * Waits for the ace editor to be fully loaded and ready for interaction.
+   */
+  async waitForReady(): Promise<void> {
+    // Wait for editor to be attached (outer .ace_editor div may be CSS-hidden)
+    await this.locator.waitFor({ state: 'attached' });
+    await this.locator
+      .locator(ACE_EDITOR_SELECTORS.CONTENT)
+      .waitFor({ state: 'attached' });
+    // Wait for window.ace library to be fully loaded (may load async)
+    await this.page.waitForFunction(
+      () =>
+        typeof (window as unknown as { ace?: { edit?: unknown } }).ace?.edit ===
+        'function',
+      { timeout: 10000 },
+    );
+  }
+
+  /**
+   * Sets text in the ace editor using the ace API.
+   * Uses element handle to target the specific editor instance (not global ID lookup).
+   * @param text - The text to set
+   */
+  async setText(text: string): Promise<void> {
+    await this.waitForReady();
+    const elementHandle = await this.locator.elementHandle();
+    if (!elementHandle) {
+      throw new Error('Could not get element handle for ace editor');
+    }
+    await this.page.evaluate(
+      ({ element, value }) => {
+        const windowWithAce = window as unknown as {
+          ace?: {
+            edit(el: Element): {
+              setValue(v: string, c: number): void;
+              session: { getUndoManager(): { reset(): void } };
+            };
+          };
+        };
+        if (!windowWithAce.ace) {
+          throw new Error(
+            'Ace editor library not loaded. Ensure the page has finished loading.',
+          );
+        }
+        // ace.edit() accepts either an element ID string or the DOM element itself
+        const editor = windowWithAce.ace.edit(element);
+        editor.setValue(value, 1);
+        editor.session.getUndoManager().reset();
+      },
+      { element: elementHandle, value: text },
+    );
+  }
+
+  /**
+   * Gets the text content from the ace editor.
+   * Uses element handle to target the specific editor instance.
+   * @returns The text content
+   */
+  async getText(): Promise<string> {
+    await this.waitForReady();
+    const elementHandle = await this.locator.elementHandle();
+    if (!elementHandle) {
+      throw new Error('Could not get element handle for ace editor');
+    }
+    return this.page.evaluate(element => {
+      const windowWithAce = window as unknown as {
+        ace?: { edit(el: Element): { getValue(): string } };
+      };
+      if (!windowWithAce.ace) {
+        throw new Error(
+          'Ace editor library not loaded. Ensure the page has finished loading.',
+        );
+      }
+      return windowWithAce.ace.edit(element).getValue();
+    }, elementHandle);
+  }
+
+  /**
+   * Clears the text in the ace editor.
+   */
+  async clear(): Promise<void> {
+    await this.setText('');
+  }
+
+  /**
+   * Appends text to the existing content in the ace editor.
+   * Uses element handle to target the specific editor instance.
+   * @param text - The text to append
+   */
+  async appendText(text: string): Promise<void> {
+    await this.waitForReady();
+    const elementHandle = await this.locator.elementHandle();
+    if (!elementHandle) {
+      throw new Error('Could not get element handle for ace editor');
+    }
+    await this.page.evaluate(
+      ({ element, value }) => {
+        const windowWithAce = window as unknown as {
+          ace?: {
+            edit(el: Element): {
+              getValue(): string;
+              setValue(v: string, c: number): void;
+            };
+          };
+        };
+        if (!windowWithAce.ace) {
+          throw new Error(
+            'Ace editor library not loaded. Ensure the page has finished loading.',
+          );
+        }
+        const editor = windowWithAce.ace.edit(element);
+        const currentText = editor.getValue();
+        // Only add newline if there's existing text that doesn't already end with one
+        const needsNewline = currentText && !currentText.endsWith('\n');
+        const newText = currentText + (needsNewline ? '\n' : '') + value;
+        editor.setValue(newText, 1);
+      },
+      { element: elementHandle, value: text },
+    );
+  }
+
+  /**
+   * Focuses the ace editor.
+   * Uses element handle to target the specific editor instance.
+   */
+  async focus(): Promise<void> {
+    await this.waitForReady();
+    const elementHandle = await this.locator.elementHandle();
+    if (!elementHandle) {
+      throw new Error('Could not get element handle for ace editor');
+    }
+    await this.page.evaluate(element => {
+      const windowWithAce = window as unknown as {
+        ace?: { edit(el: Element): { focus(): void } };
+      };
+      if (!windowWithAce.ace) {
+        throw new Error(
+          'Ace editor library not loaded. Ensure the page has finished loading.',
+        );
+      }
+      windowWithAce.ace.edit(element).focus();
+    }, elementHandle);
+  }
+
+  /**
+   * Checks if the editor is visible.
+   */
+  async isVisible(): Promise<boolean> {
+    return this.locator.isVisible();
+  }
+}

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

@@ -0,0 +1,95 @@
+/**
+ * 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';
+
+/**
+ * Core Checkbox component used in Playwright tests to interact with checkbox
+ * elements in the Superset UI.
+ *
+ * This class wraps a Playwright {@link Locator} pointing to a checkbox input
+ * and provides convenience methods for common interactions such as checking,
+ * unchecking, toggling, and asserting checkbox state and visibility.
+ *
+ * @example
+ * const checkbox = new Checkbox(page, page.locator('input[type="checkbox"]'));
+ * await checkbox.check();
+ * await expect(await checkbox.isChecked()).toBe(true);
+ *
+ * @param page - The Playwright {@link Page} instance associated with the test.
+ * @param locator - The Playwright {@link Locator} targeting the checkbox element.
+ */
+export class Checkbox {
+  readonly page: Page;
+  private readonly locator: Locator;
+
+  constructor(page: Page, locator: Locator) {
+    this.page = page;
+    this.locator = locator;
+  }
+
+  /**
+   * Gets the checkbox element locator
+   */
+  get element(): Locator {
+    return this.locator;
+  }
+
+  /**
+   * Checks the checkbox (ensures it's checked)
+   */
+  async check(): Promise<void> {
+    await this.locator.check();
+  }
+
+  /**
+   * Unchecks the checkbox (ensures it's unchecked)
+   */
+  async uncheck(): Promise<void> {
+    await this.locator.uncheck();
+  }
+
+  /**
+   * Toggles the checkbox state
+   */
+  async toggle(): Promise<void> {
+    await this.locator.click();
+  }
+
+  /**
+   * Checks if the checkbox is checked
+   */
+  async isChecked(): Promise<boolean> {
+    return this.locator.isChecked();
+  }
+
+  /**
+   * Checks if the checkbox is visible
+   */
+  async isVisible(): Promise<boolean> {
+    return this.locator.isVisible();
+  }
+
+  /**
+   * Checks if the checkbox is enabled
+   */
+  async isEnabled(): Promise<boolean> {
+    return this.locator.isEnabled();
+  }
+}

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

@@ -0,0 +1,187 @@
+/**
+ * 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';
+
+/**
+ * Ant Design Select component selectors
+ */
+const SELECT_SELECTORS = {
+  DROPDOWN: '.ant-select-dropdown',
+  OPTION: '.ant-select-item-option',
+  SEARCH_INPUT: '.ant-select-selection-search-input',
+  CLEAR: '.ant-select-clear',
+} as const;
+
+/**
+ * Select component for Ant Design Select/Combobox interactions.
+ */
+export class Select {
+  readonly page: Page;
+  private readonly locator: Locator;
+
+  constructor(page: Page, selector: string);
+  constructor(page: Page, locator: Locator);
+  constructor(page: Page, selectorOrLocator: string | Locator) {
+    this.page = page;
+    if (typeof selectorOrLocator === 'string') {
+      this.locator = page.locator(selectorOrLocator);
+    } else {
+      this.locator = selectorOrLocator;
+    }
+  }
+
+  /**
+   * Creates a Select from a combobox role with the given accessible name
+   * @param page - The Playwright page
+   * @param name - The accessible name (aria-label or placeholder text)
+   */
+  static fromRole(page: Page, name: string): Select {
+    const locator = page.getByRole('combobox', { name });
+    return new Select(page, locator);
+  }
+
+  /**
+   * Gets the select element locator
+   */
+  get element(): Locator {
+    return this.locator;
+  }
+
+  /**
+   * Opens the dropdown, types to filter, and selects an option.
+   * Handles cases where the option may not be initially visible in the dropdown.
+   * Waits for dropdown to close after selection to avoid stale dropdowns.
+   * @param optionText - The text of the option to select
+   */
+  async selectOption(optionText: string): Promise<void> {
+    await this.open();
+    await this.type(optionText);
+    await this.clickOption(optionText);
+    // Wait for dropdown to close to avoid multiple visible dropdowns
+    await this.waitForDropdownClose();
+  }
+
+  /**
+   * Waits for dropdown to close after selection
+   * This prevents strict mode violations when multiple selects are used sequentially
+   */
+  private async waitForDropdownClose(): Promise<void> {
+    // Wait for dropdown to actually close (become hidden)
+    await this.page
+      .locator(`${SELECT_SELECTORS.DROPDOWN}:not(.ant-select-dropdown-hidden)`)
+      .last()
+      .waitFor({ state: 'hidden', timeout: 5000 })
+      .catch(error => {
+        // Only ignore TimeoutError (dropdown may already be closed); re-throw others
+        if (!(error instanceof Error) || error.name !== 'TimeoutError') {
+          throw error;
+        }
+      });
+  }
+
+  /**
+   * Opens the dropdown
+   */
+  async open(): Promise<void> {
+    await this.locator.click();
+  }
+
+  /**
+   * Clicks an option in an already-open dropdown by its text content.
+   * Uses selector-based approach matching Cypress patterns.
+   * Handles multiple dropdowns by targeting only visible, non-hidden ones.
+   * @param optionText - The text of the option to click (partial match for filtered results)
+   */
+  async clickOption(optionText: string): Promise<void> {
+    // Target visible dropdown (excludes hidden ones via :not(.ant-select-dropdown-hidden))
+    // Use .last() in case multiple dropdowns exist - the most recent one is what we want
+    const dropdown = this.page
+      .locator(`${SELECT_SELECTORS.DROPDOWN}:not(.ant-select-dropdown-hidden)`)
+      .last();
+    await dropdown.waitFor({ state: 'visible' });
+
+    // Find option by text content - use partial match since filtered results may have prefixes
+    // (e.g., searching for 'main' shows 'examples.main', 'system.main')
+    // First try exact match, fall back to partial match
+    const exactOption = dropdown
+      .locator(SELECT_SELECTORS.OPTION)
+      .getByText(optionText, { exact: true });
+
+    if ((await exactOption.count()) > 0) {
+      await exactOption.click();
+    } else {
+      // Fall back to first option containing the text
+      const partialOption = dropdown
+        .locator(SELECT_SELECTORS.OPTION)
+        .filter({ hasText: optionText })
+        .first();
+      await partialOption.click();
+    }
+  }
+
+  /**
+   * Closes the dropdown by pressing Escape
+   */
+  async close(): Promise<void> {
+    await this.page.keyboard.press('Escape');
+  }
+
+  /**
+   * Types into the select to filter options (assumes dropdown is open)
+   * @param text - The text to type
+   */
+  async type(text: string): Promise<void> {
+    // Find the actual search input inside the select component
+    const searchInput = this.locator.locator(SELECT_SELECTORS.SEARCH_INPUT);
+    try {
+      // Wait for search input in case dropdown is still rendering
+      await searchInput.first().waitFor({ state: 'attached', timeout: 1000 });
+      await searchInput.first().fill(text);
+    } catch (error) {
+      // Only handle TimeoutError (search input not found); re-throw other errors
+      if (!(error instanceof Error) || error.name !== 'TimeoutError') {
+        throw error;
+      }
+      // Fallback: locator might be the input itself (e.g., from getByRole('combobox'))
+      await this.locator.fill(text);
+    }
+  }
+
+  /**
+   * Clears the current selection
+   */
+  async clear(): Promise<void> {
+    await this.locator.clear();
+  }
+
+  /**
+   * Checks if the select is visible
+   */
+  async isVisible(): Promise<boolean> {
+    return this.locator.isVisible();
+  }
+
+  /**
+   * Checks if the select is enabled
+   */
+  async isEnabled(): Promise<boolean> {
+    return this.locator.isEnabled();
+  }
+}

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

@@ -0,0 +1,75 @@
+/**
+ * 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';
+
+/**
+ * Tabs component for Ant Design tab navigation.
+ */
+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
+   */
+  get element(): Locator {
+    return this.locator;
+  }
+
+  /**
+   * Gets a tab by name, scoped to this tablist's container
+   * @param tabName - The name/label of the tab
+   */
+  getTab(tabName: string): Locator {
+    return this.locator.getByRole('tab', { name: tabName });
+  }
+
+  /**
+   * Clicks a tab by name
+   * @param tabName - The name/label of the tab to click
+   */
+  async clickTab(tabName: string): Promise<void> {
+    await this.getTab(tabName).click();
+  }
+
+  /**
+   * Gets the tab panel content for a given tab
+   * @param tabName - The name/label of the tab
+   */
+  getTabPanel(tabName: string): Locator {
+    return this.page.getByRole('tabpanel', { name: tabName });
+  }
+
+  /**
+   * Checks if a tab is selected
+   * @param tabName - The name/label of the tab
+   */
+  async isSelected(tabName: string): Promise<boolean> {
+    const tab = this.getTab(tabName);
+    const ariaSelected = await tab.getAttribute('aria-selected');
+    return ariaSelected === 'true';
+  }
+}

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

@@ -0,0 +1,109 @@
+/**
+ * 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';
+
+/**
+ * Playwright helper for interacting with HTML {@link HTMLTextAreaElement | `<textarea>`} elements.
+ *
+ * This component wraps a Playwright {@link Locator} and provides convenience methods for
+ * filling, clearing, and reading the value of a textarea without having to work with
+ * locators directly.
+ *
+ * Typical usage:
+ * ```ts
+ * const textarea = new Textarea(page, 'textarea[name="description"]');
+ * await textarea.fill('Some multi-line text');
+ * const value = await textarea.getValue();
+ * ```
+ *
+ * You can also construct an instance from the `name` attribute:
+ * ```ts
+ * const textarea = Textarea.fromName(page, 'description');
+ * await textarea.clear();
+ * ```
+ */
+export class Textarea {
+  readonly page: Page;
+  private readonly locator: Locator;
+
+  constructor(page: Page, selector: string);
+  constructor(page: Page, locator: Locator);
+  constructor(page: Page, selectorOrLocator: string | Locator) {
+    this.page = page;
+    if (typeof selectorOrLocator === 'string') {
+      this.locator = page.locator(selectorOrLocator);
+    } else {
+      this.locator = selectorOrLocator;
+    }
+  }
+
+  /**
+   * Creates a Textarea from a name attribute
+   * @param page - The Playwright page
+   * @param name - The name attribute value
+   */
+  static fromName(page: Page, name: string): Textarea {
+    const locator = page.locator(`textarea[name="${name}"]`);
+    return new Textarea(page, locator);
+  }
+
+  /**
+   * Gets the textarea element locator
+   */
+  get element(): Locator {
+    return this.locator;
+  }
+
+  /**
+   * Fills the textarea with text (clears existing content)
+   * @param text - The text to fill
+   */
+  async fill(text: string): Promise<void> {
+    await this.locator.fill(text);
+  }
+
+  /**
+   * Clears the textarea content
+   */
+  async clear(): Promise<void> {
+    await this.locator.clear();
+  }
+
+  /**
+   * Gets the current value of the textarea
+   */
+  async getValue(): Promise<string> {
+    return this.locator.inputValue();
+  }
+
+  /**
+   * Checks if the textarea is visible
+   */
+  async isVisible(): Promise<boolean> {
+    return this.locator.isVisible();
+  }
+
+  /**
+   * Checks if the textarea is enabled
+   */
+  async isEnabled(): Promise<boolean> {
+    return this.locator.isEnabled();
+  }
+}

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

@@ -18,10 +18,15 @@
  */
 
 // Core Playwright Components for Superset
+export { AceEditor } from './AceEditor';
 export { Button } from './Button';
+export { Checkbox } from './Checkbox';
 export { Form } from './Form';
 export { Input } from './Input';
 export { Menu } from './Menu';
 export { Modal } from './Modal';
+export { Select } from './Select';
 export { Table } from './Table';
+export { Tabs } from './Tabs';
+export { Textarea } from './Textarea';
 export { Toast } from './Toast';

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

@@ -0,0 +1,75 @@
+/**
+ * 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, Locator } from '@playwright/test';
+import { Modal } from '../core/Modal';
+
+/**
+ * Confirm Dialog component for Ant Design Modal.confirm dialogs.
+ * These are the "OK" / "Cancel" confirmation dialogs used throughout Superset.
+ * Uses getByRole with name to target specific confirm dialogs when multiple are open.
+ */
+export class ConfirmDialog extends Modal {
+  private readonly specificLocator: Locator;
+
+  constructor(page: Page, dialogName = 'Confirm save') {
+    super(page);
+    // Use getByRole with specific name to avoid strict mode violations
+    // when multiple dialogs are open (e.g., Edit Dataset modal + Confirm save dialog)
+    this.specificLocator = page.getByRole('dialog', { name: dialogName });
+  }
+
+  /**
+   * Override element getter to use specific locator
+   */
+  override get element(): Locator {
+    return this.specificLocator;
+  }
+
+  /**
+   * Clicks the OK button to confirm.
+   * @param options.timeout - If provided, silently returns if dialog doesn't appear
+   *                          within timeout. If not provided, waits indefinitely (strict mode).
+   */
+  async clickOk(options?: { timeout?: number }): Promise<void> {
+    try {
+      await this.element.waitFor({
+        state: 'visible',
+        timeout: options?.timeout,
+      });
+      await this.clickFooterButton('OK');
+      await this.waitForHidden();
+    } catch (error) {
+      // Only swallow TimeoutError when timeout was explicitly provided
+      if (options?.timeout !== undefined) {
+        if (error instanceof Error && error.name === 'TimeoutError') {
+          return;
+        }
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Clicks the Cancel button to dismiss
+   */
+  async clickCancel(): Promise<void> {
+    await this.clickFooterButton('Cancel');
+  }
+}

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

@@ -55,7 +55,10 @@ export class DuplicateDatasetModal extends Modal {
     datasetName: string,
     options?: { timeout?: number; force?: boolean },
   ): Promise<void> {
-    await this.nameInput.fill(datasetName, options);
+    const input = this.nameInput.element;
+    // Clear existing text then fill (fill() clears first, but explicit clear is more reliable)
+    await input.clear();
+    await input.fill(datasetName, options);
   }
 
   /**

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

@@ -0,0 +1,189 @@
+/**
+ * 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 { Input, Modal, Tabs, AceEditor } from '../core';
+
+/**
+ * Edit Dataset Modal component (DatasourceModal).
+ * Used for editing dataset properties like description, metrics, columns, etc.
+ * Uses specific dialog name to avoid strict mode violations when multiple dialogs are open.
+ */
+export class EditDatasetModal extends Modal {
+  private static readonly SELECTORS = {
+    NAME_INPUT: '[data-test="inline-name"]',
+    LOCK_ICON: '[data-test="lock"]',
+    UNLOCK_ICON: '[data-test="unlock"]',
+  };
+
+  private readonly tabs: Tabs;
+  private readonly specificLocator: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    // 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'));
+  }
+
+  /**
+   * Override element getter to use specific locator
+   */
+  override get element(): Locator {
+    return this.specificLocator;
+  }
+
+  /**
+   * Click the Save button to save changes
+   */
+  async clickSave(): Promise<void> {
+    await this.clickFooterButton('Save');
+  }
+
+  /**
+   * Click the Cancel button to discard changes
+   */
+  async clickCancel(): Promise<void> {
+    await this.clickFooterButton('Cancel');
+  }
+
+  /**
+   * Click the lock icon to enable edit mode
+   * The modal starts in read-only mode and requires clicking the lock to edit
+   */
+  async enableEditMode(): Promise<void> {
+    const lockButton = this.body.locator(EditDatasetModal.SELECTORS.LOCK_ICON);
+    await lockButton.click();
+  }
+
+  /**
+   * Gets the dataset name input component
+   */
+  private get nameInput(): Input {
+    return new Input(
+      this.page,
+      this.body.locator(EditDatasetModal.SELECTORS.NAME_INPUT),
+    );
+  }
+
+  /**
+   * Fill in the dataset name field
+   * Note: Call enableEditMode() first if the modal is in read-only mode
+   * @param name - The new dataset name
+   */
+  async fillName(name: string): Promise<void> {
+    await this.nameInput.fill(name);
+  }
+
+  /**
+   * Navigate to a specific tab in the modal
+   * @param tabName - The name of the tab (e.g., 'Source', 'Metrics', 'Columns')
+   */
+  async clickTab(tabName: string): Promise<void> {
+    await this.tabs.clickTab(tabName);
+  }
+
+  /**
+   * Navigate to the Settings tab
+   */
+  async clickSettingsTab(): Promise<void> {
+    await this.tabs.clickTab('Settings');
+  }
+
+  /**
+   * Navigate to the Columns tab.
+   * Uses regex to avoid matching "Calculated columns" tab, scoped to modal.
+   */
+  async clickColumnsTab(): Promise<void> {
+    // Use regex starting with "Columns" to avoid matching "Calculated columns"
+    // Scope to modal element to avoid matching tabs elsewhere on page
+    await this.element.getByRole('tab', { name: /^Columns/ }).click();
+  }
+
+  /**
+   * Gets the description Ace Editor component (Settings tab).
+   * The Description button and ace-editor are in the same form item.
+   */
+  private get descriptionEditor(): AceEditor {
+    // Use tabpanel role with name "Settings" for more reliable lookup
+    const settingsPanel = this.element.getByRole('tabpanel', {
+      name: 'Settings',
+    });
+    // Find the form item that contains the Description button
+    const descriptionFormItem = settingsPanel
+      .locator('.ant-form-item')
+      .filter({
+        has: this.page.getByRole('button', {
+          name: 'Description',
+          exact: true,
+        }),
+      })
+      .first();
+    // The ace-editor has class .ace_editor within the form item
+    const editorElement = descriptionFormItem.locator('.ace_editor');
+    return new AceEditor(this.page, editorElement);
+  }
+
+  /**
+   * Fill the dataset description field (Settings tab).
+   * @param description - The description text to set
+   */
+  async fillDescription(description: string): Promise<void> {
+    await this.descriptionEditor.setText(description);
+  }
+
+  /**
+   * Expand a column row by column name.
+   * Uses exact cell match to avoid false positives with short names like "ds".
+   * @param columnName - The name of the column to expand
+   * @returns The row locator for scoped selector access
+   */
+  async expandColumn(columnName: string): Promise<Locator> {
+    // Find cell with exact column name text, then derive row from that cell
+    const cell = this.body.getByRole('cell', { name: columnName, exact: true });
+    const row = cell.locator('xpath=ancestor::tr[1]');
+    await row.getByRole('button', { name: /expand row/i }).click();
+    return row;
+  }
+
+  /**
+   * Fill column datetime format for a given column.
+   * Expands the column row and fills the date format input.
+   * Note: Expanded content appears in a sibling row, so we scope to modal body.
+   * @param columnName - The name of the column to edit
+   * @param format - The python date format string (e.g., '%Y-%m-%d')
+   */
+  async fillColumnDateFormat(
+    columnName: string,
+    format: string,
+  ): Promise<void> {
+    await this.expandColumn(columnName);
+    // Expanded content appears in a sibling row, not nested inside the original row.
+    // Use modal body scope with placeholder selector to find the datetime format input.
+    const dateFormatInput = new Input(
+      this.page,
+      this.body.getByPlaceholder('%Y-%m-%d'),
+    );
+    await dateFormatInput.element.waitFor({ state: 'visible' });
+    await dateFormatInput.clear();
+    await dateFormatInput.fill(format);
+  }
+}

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

@@ -0,0 +1,73 @@
+/**
+ * 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 { Modal, Input } from '../core';
+
+/**
+ * Import dataset modal for uploading dataset export files.
+ * Handles file upload, overwrite confirmation, and import submission.
+ */
+export class ImportDatasetModal extends Modal {
+  private static readonly SELECTORS = {
+    FILE_INPUT: '[data-test="model-file-input"]',
+    OVERWRITE_INPUT: '[data-test="overwrite-modal-input"]',
+  };
+
+  /**
+   * Upload a file to the import modal
+   * @param filePath - Absolute path to the file to upload
+   */
+  async uploadFile(filePath: string): Promise<void> {
+    await this.page
+      .locator(ImportDatasetModal.SELECTORS.FILE_INPUT)
+      .setInputFiles(filePath);
+  }
+
+  /**
+   * Fill the overwrite confirmation input (only needed if dataset exists)
+   */
+  async fillOverwriteConfirmation(): Promise<void> {
+    const input = new Input(
+      this.page,
+      this.body.locator(ImportDatasetModal.SELECTORS.OVERWRITE_INPUT),
+    );
+    await input.fill('OVERWRITE');
+  }
+
+  /**
+   * Get the overwrite confirmation input locator
+   */
+  getOverwriteInput() {
+    return this.body.locator(ImportDatasetModal.SELECTORS.OVERWRITE_INPUT);
+  }
+
+  /**
+   * Check if overwrite confirmation is visible
+   */
+  async isOverwriteVisible(): Promise<boolean> {
+    return this.getOverwriteInput().isVisible();
+  }
+
+  /**
+   * Click the Import button in the footer
+   */
+  async clickImport(): Promise<void> {
+    await this.clickFooterButton('Import');
+  }
+}

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

@@ -20,3 +20,4 @@
 // Specific modal implementations
 export { DeleteConfirmationModal } from './DeleteConfirmationModal';
 export { DuplicateDatasetModal } from './DuplicateDatasetModal';
+export { ImportDatasetModal } from './ImportDatasetModal';