test(dashboard): migrate edit-mode component E2E tests to Playwright

Port the Cypress dashboard edit-mode 'Components' tests (add chart, remove
chart, add markdown) to Playwright as true E2E. The dashboard grid uses
react-dnd with the HTML5 backend, so drags are driven by synthetic native
drag events with a shared DataTransfer (new helpers/dnd.ts). Tests are
hermetic: charts/dashboards are created from birth_names via the API and
cleaned up by the testAssets fixture.

The 21 skipped 'Color consistency' Cypress tests are intentionally not
ported: they assert per-series colors via an .nv-legend-symbol SVG fill that
no longer exists (ECharts renders to canvas, not DOM-inspectable); that
color-precedence logic is covered by Jest/RTL.

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

superset-frontend/playwright/helpers/dnd.ts

@@ -0,0 +1,66 @@
+/**
+ * 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';
+
+/**
+ * Drives an HTML5 drag-and-drop using synthetic native drag events.
+ *
+ * The dashboard grid uses react-dnd with the HTML5 backend
+ * (`react-dnd-html5-backend`), which listens for native `dragstart` /
+ * `dragenter` / `dragover` / `drop` events rather than the mouse events that
+ * Playwright's built-in `locator.dragTo()` produces. To trigger it we dispatch
+ * the native drag sequence ourselves, threading a single shared `DataTransfer`
+ * object through every event so react-dnd's monitor sees a consistent payload.
+ *
+ * Mirrors the synthetic-event sequence used by the deprecated Cypress `drag`
+ * helper (cypress-base/cypress/utils/index.ts).
+ *
+ * @param page - Playwright page (used to mint the shared DataTransfer)
+ * @param source - The draggable element (or a descendant; drag events bubble)
+ * @param target - The drop target element
+ */
+export async function html5DragAndDrop(
+  page: Page,
+  source: Locator,
+  target: Locator,
+): Promise<void> {
+  // Note: we intentionally do not scrollIntoView the source. The chart card list
+  // is virtualized, so a separate scroll action can detach the element between
+  // resolution and use; dispatchEvent only requires the node to be attached.
+
+  // A single DataTransfer shared across every event in the sequence: react-dnd's
+  // HTML5 backend reads/writes drag state through it, so reusing one handle is
+  // what makes the monitor treat this as one coherent drag.
+  const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
+
+  await source.dispatchEvent('dragstart', { dataTransfer });
+  // react-dnd's HTML5 backend commits monitor state (the active drag source) on a
+  // microtask after dragstart; a short settle avoids a race where dragover/drop
+  // fire before the backend considers a drag to be in progress.
+  await page.waitForTimeout(50);
+  // dragenter must precede dragover for react-dnd to register the hover target.
+  await target.dispatchEvent('dragenter', { dataTransfer });
+  await target.dispatchEvent('dragover', { dataTransfer });
+  await page.waitForTimeout(50);
+  await target.dispatchEvent('drop', { dataTransfer });
+  await source.dispatchEvent('dragend', { dataTransfer });
+
+  await dataTransfer.dispose();
+}

superset-frontend/playwright/pages/DashboardPage.ts

@@ -17,9 +17,10 @@
  * under the License.
  */
 
-import { Page, Download } from '@playwright/test';
-import { Menu } from '../components/core';
+import { Page, Download, Locator } from '@playwright/test';
+import { Button, Input, Menu, Tabs } from '../components/core';
 import { gotoWithRetry } from '../helpers/navigation';
+import { html5DragAndDrop } from '../helpers/dnd';
 import { TIMEOUT } from '../utils/constants';
 
 /**
@@ -33,6 +34,16 @@ export class DashboardPage {
     DASHBOARD_MENU_TRIGGER: '[data-test="actions-trigger"]',
     // The header-actions-menu is the data-test for the dropdown menu content
     HEADER_ACTIONS_MENU: '[data-test="header-actions-menu"]',
+    EDIT_BUTTON: '[data-test="edit-dashboard-button"]',
+    BUILDER_PANE: '[data-test="dashboard-builder-sidepane"]',
+    CHARTS_SEARCH: '[data-test="dashboard-charts-filter-search-input"]',
+    CHART_CARD: '[data-test="chart-card"]',
+    GRID_CONTENT: '[data-test="grid-content"]',
+    EMPTY_DROPTARGET: '[data-test="grid-content"] .empty-droptarget',
+    NEW_COMPONENT: '[data-test="new-component"]',
+    CHART_HOLDER: '[data-test="dashboard-component-chart-holder"]',
+    DELETE_COMPONENT: '[data-test="dashboard-delete-component-button"]',
+    MARKDOWN_EDITOR: '[data-test="dashboard-markdown-editor"]',
   } as const;
 
   constructor(page: Page) {
@@ -126,4 +137,106 @@ export class DashboardPage {
     await menu.selectSubmenuItem('Download', optionText);
     return downloadPromise;
   }
+
+  /**
+   * Enter dashboard edit mode and wait for the builder side pane to appear.
+   */
+  async enterEditMode(): Promise<void> {
+    const editButton = new Button(
+      this.page,
+      DashboardPage.SELECTORS.EDIT_BUTTON,
+    );
+    await editButton.click();
+    await this.page.waitForSelector(DashboardPage.SELECTORS.BUILDER_PANE, {
+      state: 'visible',
+    });
+  }
+
+  /**
+   * The builder side pane's tab bar (Charts / Layout elements).
+   */
+  private builderTabs(): Tabs {
+    return new Tabs(
+      this.page,
+      this.page
+        .locator(`${DashboardPage.SELECTORS.BUILDER_PANE} .ant-tabs`)
+        .first(),
+    );
+  }
+
+  /**
+   * Switch the builder side pane to one of its tabs.
+   * @param tab - 'Charts' (existing slices) or 'Layout elements' (new components)
+   */
+  async openBuilderTab(tab: 'Charts' | 'Layout elements'): Promise<void> {
+    await this.builderTabs().clickTab(tab);
+  }
+
+  /**
+   * Locator for chart-holder components currently placed on the grid.
+   */
+  chartHolders(): Locator {
+    return this.page.locator(DashboardPage.SELECTORS.CHART_HOLDER);
+  }
+
+  /**
+   * Drag an existing chart from the Charts pane onto the dashboard grid.
+   * Requires edit mode to be active.
+   * @param sliceName - The slice name to search for and drag
+   */
+  async addChartByName(sliceName: string): Promise<void> {
+    await this.openBuilderTab('Charts');
+    const search = new Input(this.page, DashboardPage.SELECTORS.CHARTS_SEARCH);
+    await search.fill(sliceName);
+    const card = this.page
+      .locator(DashboardPage.SELECTORS.CHART_CARD)
+      .filter({ hasText: sliceName })
+      .first();
+    await card.waitFor({ state: 'visible' });
+    await html5DragAndDrop(this.page, card, this.dropTarget());
+  }
+
+  /**
+   * Drag a new Layout element (by its label) onto the dashboard grid.
+   * Requires edit mode to be active.
+   * @param label - The new-component label, e.g. 'Text / Markdown'
+   */
+  async addLayoutElement(label: string): Promise<void> {
+    await this.openBuilderTab('Layout elements');
+    const source = this.page
+      .locator(DashboardPage.SELECTORS.NEW_COMPONENT)
+      .filter({ hasText: label })
+      .first();
+    await source.waitFor({ state: 'visible' });
+    await html5DragAndDrop(this.page, source, this.dropTarget());
+  }
+
+  /**
+   * The grid drop target. Prefers the empty droptarget (empty grid) and falls
+   * back to the grid content container.
+   */
+  private dropTarget(): Locator {
+    return this.page.locator(DashboardPage.SELECTORS.EMPTY_DROPTARGET).first();
+  }
+
+  /**
+   * Hover a placed chart-holder and click its delete button (edit mode).
+   * @param index - Which chart holder to delete (default 0)
+   */
+  async deleteChartHolder(index = 0): Promise<void> {
+    const holder = this.chartHolders().nth(index);
+    await holder.hover();
+    const deleteButton = new Button(
+      this.page,
+      holder.locator(DashboardPage.SELECTORS.DELETE_COMPONENT),
+    );
+    await deleteButton.click();
+  }
+
+  /**
+   * Locator for markdown editor components on the grid.
+   */
+  markdownEditors(): Locator {
+    return this.page.locator(DashboardPage.SELECTORS.MARKDOWN_EDITOR);
+  }
 }

superset-frontend/playwright/tests/dashboard/edit-mode-components.spec.ts

@@ -0,0 +1,192 @@
+/**
+ * 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.
+ */
+
+/**
+ * Dashboard edit-mode component tests — migrated from the deprecated Cypress
+ * suite (cypress-base/cypress/e2e/dashboard/editmode.test.ts, "Components"
+ * block). These cover the chart/markdown drag-and-drop workflows that the
+ * upstream Cypress notes flagged as the one part of edit mode that genuinely
+ * requires E2E coverage ("Chart drag/drop functionality requires true E2E
+ * testing"). The grid uses react-dnd with the HTML5 backend, so drags are
+ * driven by synthetic native drag events (see helpers/dnd.ts).
+ *
+ * The 21 skipped "Color consistency" tests from the same Cypress file are NOT
+ * migrated here: they assert per-series colors by reading an `.nv-legend-symbol`
+ * SVG `fill` attribute that no longer exists (ECharts renders to <canvas>, which
+ * is not DOM-inspectable — the upstream FIXME skipped them for exactly this
+ * reason). The underlying color-precedence logic is covered by Jest/RTL.
+ */
+
+import {
+  testWithAssets,
+  expect,
+  type TestAssets,
+} from '../../helpers/fixtures';
+import { apiPost } from '../../helpers/api/requests';
+import { apiPostDashboard } from '../../helpers/api/dashboard';
+import { DashboardPage } from '../../pages/DashboardPage';
+import type { Page } from '@playwright/test';
+
+const DATASET_NAME = 'birth_names';
+
+async function findDatasetIdByName(page: Page, name: string): Promise<number> {
+  const rison = `(filters:!((col:table_name,opr:eq,value:'${name}')))`;
+  const resp = await page.request.get(`api/v1/dataset/?q=${rison}`);
+  const body = await resp.json();
+  if (!body.result?.length) {
+    throw new Error(`Dataset ${name} not found`);
+  }
+  return body.result[0].id;
+}
+
+/** Create a hermetic chart from birth_names, NOT placed on any dashboard. */
+async function createChart(
+  page: Page,
+  testAssets: TestAssets,
+): Promise<string> {
+  const datasetId = await findDatasetIdByName(page, DATASET_NAME);
+  const sliceName = `edit_mode_chart_${Date.now()}_${Math.floor(
+    performance.now(),
+  )}`;
+  const resp = await apiPost(page, 'api/v1/chart/', {
+    slice_name: sliceName,
+    viz_type: 'big_number_total',
+    datasource_id: datasetId,
+    datasource_type: 'table',
+    params: JSON.stringify({
+      datasource: `${datasetId}__table`,
+      viz_type: 'big_number_total',
+      metric: 'count',
+    }),
+  });
+  expect(resp.ok()).toBe(true);
+  testAssets.trackChart((await resp.json()).id);
+  return sliceName;
+}
+
+/** Create an empty published dashboard and return its id. */
+async function createDashboard(
+  page: Page,
+  testAssets: TestAssets,
+): Promise<number> {
+  const resp = await apiPostDashboard(page, {
+    dashboard_title: `edit_mode_${Date.now()}_${Math.floor(performance.now())}`,
+    published: true,
+  });
+  expect(resp.ok()).toBe(true);
+  const body = await resp.json();
+  const id: number = body.result?.id ?? body.id;
+  testAssets.trackDashboard(id);
+  return id;
+}
+
+testWithAssets(
+  'edit mode: add a chart to the dashboard via drag-and-drop',
+  async ({ page, testAssets }) => {
+    const sliceName = await createChart(page, testAssets);
+    const dashboardId = await createDashboard(page, testAssets);
+
+    const dashboard = new DashboardPage(page);
+    await dashboard.gotoById(dashboardId);
+    await dashboard.waitForLoad();
+    await dashboard.enterEditMode();
+
+    await expect(dashboard.chartHolders()).toHaveCount(0);
+    await dashboard.addChartByName(sliceName);
+    await expect(dashboard.chartHolders()).toHaveCount(1);
+  },
+);
+
+testWithAssets(
+  'edit mode: remove an added chart from the dashboard',
+  async ({ page, testAssets }) => {
+    const sliceName = await createChart(page, testAssets);
+    const dashboardId = await createDashboard(page, testAssets);
+
+    const dashboard = new DashboardPage(page);
+    await dashboard.gotoById(dashboardId);
+    await dashboard.waitForLoad();
+    await dashboard.enterEditMode();
+
+    await dashboard.addChartByName(sliceName);
+    await expect(dashboard.chartHolders()).toHaveCount(1);
+
+    await dashboard.deleteChartHolder();
+    await expect(dashboard.chartHolders()).toHaveCount(0);
+  },
+);
+
+testWithAssets(
+  'edit mode: add a markdown component via drag-and-drop',
+  async ({ page, testAssets }) => {
+    // Heaviest edit-mode flow (drag + ace edit + commit + mouse resize); give it
+    // extra headroom so it stays reliable when the suite runs in parallel.
+    testWithAssets.slow();
+    const dashboardId = await createDashboard(page, testAssets);
+
+    const dashboard = new DashboardPage(page);
+    await dashboard.gotoById(dashboardId);
+    await dashboard.waitForLoad();
+    await dashboard.enterEditMode();
+
+    await dashboard.addLayoutElement('Text / Markdown');
+    const editor = dashboard.markdownEditors().first();
+    await expect(editor).toBeVisible();
+
+    // Enter edit mode by focusing the component. The markdown enters edit on a
+    // document-level focus handler attached after mount, so a single early click
+    // can be missed under load; retry until the ace editor appears. Click the
+    // rendered "Header 1" heading element specifically (never the trailing
+    // hyperlink in the default content), so a stray click can't navigate away.
+    const aceContent = editor.locator('.ace_content');
+    const heading = editor.locator('h1', { hasText: 'Header 1' });
+    await expect(async () => {
+      if (await aceContent.isVisible()) return;
+      await heading.click();
+      await expect(aceContent).toBeVisible({ timeout: 2000 });
+    }).toPass({ timeout: 20000 });
+    await expect(aceContent).toContainText('Header 1');
+    await expect(aceContent).toContainText('markdown formatting');
+
+    // Replace the content and confirm the edit is reflected.
+    const aceInput = editor.locator('.ace_text-input');
+    await aceInput.press('ControlOrMeta+a');
+    await aceInput.press('Delete');
+    await aceInput.type('Test resize');
+    await expect(aceContent).toContainText('Test resize');
+
+    // Commit by clicking outside the component; the preview keeps the text.
+    const boxBefore = await editor.boundingBox();
+    await page.locator('[data-test="editable-title-input"]').first().click();
+    await expect(editor).toContainText('Test resize');
+
+    // Resize via the bottom handle and confirm the component grew taller.
+    const handle = editor.locator('.resizable-container-handle--bottom').last();
+    const hb = await handle.boundingBox();
+    expect(hb).not.toBeNull();
+    if (hb && boxBefore) {
+      await page.mouse.move(hb.x + hb.width / 2, hb.y + hb.height / 2);
+      await page.mouse.down();
+      await page.mouse.move(hb.x + hb.width / 2, hb.y + 150, { steps: 10 });
+      await page.mouse.up();
+      const boxAfter = await editor.boundingBox();
+      expect(boxAfter!.height).toBeGreaterThan(boxBefore.height);
+    }
+  },
+);