test(dashboard): tighten assertions and drop dead diagnostics

theme.spec asserted twice on the same thing: the 403 array was populated under
the same /api/v1/theme/ guard as the request array, so it could only be
non-empty when the first assertion had already failed. Record the status
alongside each theme request instead, keeping the 403 signal in the failure
output with one assertion doing the work.

delete-display-control logged four console lines that no assertion read, one
under a name (goneAfterSave) that meant the opposite of the value it held.
The screenshots at each step already tell that story. Name the deliberately
non-fatal chart wait (settleCharts) rather than repeating a bare .catch three
times, and record why the pause before the final assertion is load-bearing:
toHaveCount(0) passes the moment the control is absent, so the wait is what
gives a reappearance the window this regression test exists to catch.

superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts

@@ -1,82 +0,0 @@
-/**
- * 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 { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls';
-import { drag } from 'cypress/utils';
-import { interceptGet } from './utils';
-import { interceptFiltering as interceptCharts } from '../explore/utils';
-
-function editDashboard() {
-  cy.getBySel('edit-dashboard-button').click();
-}
-
-function dragComponent(
-  component = 'Unicode Cloud',
-  target = 'card-title',
-  withFiltering = true,
-) {
-  if (withFiltering) {
-    cy.getBySel('dashboard-charts-filter-search-input').type(component, {
-      force: true,
-    });
-    cy.wait('@filtering');
-  }
-  cy.wait(500);
-  drag(`[data-test="${target}"]`, component).to(
-    '[data-test="grid-content"] [data-test="dragdroppable-object"]',
-  );
-}
-
-function visitEdit(sampleDashboard = SAMPLE_DASHBOARD_1) {
-  interceptCharts();
-  interceptGet();
-
-  if (sampleDashboard === SAMPLE_DASHBOARD_1) {
-    cy.createSampleDashboards([0]);
-  }
-
-  cy.visit(sampleDashboard);
-  cy.wait('@get');
-  editDashboard();
-  cy.get('.grid-container').should('exist');
-  cy.wait('@filtering');
-  cy.wait(500);
-}
-
-describe('Dashboard edit', () => {
-  describe('Components', () => {
-    beforeEach(() => {
-      visitEdit();
-    });
-
-    it('should add charts', () => {
-      cy.get('body').then($body => {
-        if ($body.find('.ant-modal-wrap').length > 0) {
-          cy.get('body').type('{esc}', { force: true });
-          cy.wait(1000);
-          cy.get('.ant-modal-close').click({ force: true });
-          cy.wait(500);
-        }
-      });
-      cy.get('input[type="checkbox"]').scrollIntoView();
-      cy.get('input[type="checkbox"]').click({ force: true });
-      dragComponent();
-      cy.getBySel('dashboard-component-chart-holder').should('have.length', 1);
-    });
-  });
-});

superset-frontend/cypress-base/cypress/utils/index.ts

@@ -79,34 +79,6 @@ export function waitForChartLoad(chart: ChartSpec) {
   });
 }
 
-/**
- * Drag an element and drop it to another element.
- * Usage:
- *    drag(source).to(target);
- */
-export function drag(selector: string, content: string | number | RegExp) {
-  const dataTransfer = { data: {} };
-  return {
-    to(target: string | Cypress.Chainable) {
-      cy.get('.dragdroppable')
-        .contains(selector, content)
-        .trigger('mousedown', { which: 1, force: true });
-      cy.get('.dragdroppable')
-        .contains(selector, content)
-        .trigger('dragstart', { dataTransfer, force: true });
-      cy.get('.dragdroppable')
-        .contains(selector, content)
-        .trigger('drag', { force: true });
-
-      (typeof target === 'string' ? cy.get(target) : target)
-        .trigger('dragover', { dataTransfer, force: true })
-        .trigger('drop', { dataTransfer, force: true })
-        .trigger('dragend', { dataTransfer, force: true })
-        .trigger('mouseup', { which: 1, force: true });
-    },
-  };
-}
-
 export function resize(selector: string) {
   return {
     to(cordX: number, cordY: number) {

superset-frontend/playwright/helpers/dnd.ts

@@ -0,0 +1,74 @@
+/**
+ * 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';
+
+/**
+ * Unconditional pause between drag events, letting react-dnd's HTML5 backend
+ * commit its monitor state before the next event fires. Deliberately not in
+ * `TIMEOUT`: that object holds wait *ceilings* (a wait may finish sooner),
+ * whereas this is a fixed sleep that always costs what it says.
+ */
+const REACT_DND_SETTLE_MS = 50;
+
+/**
+ * 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(REACT_DND_SETTLE_MS);
+  // 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(REACT_DND_SETTLE_MS);
+  await target.dispatchEvent('drop', { dataTransfer });
+  await source.dispatchEvent('dragend', { dataTransfer });
+
+  await dataTransfer.dispose();
+}

superset-frontend/playwright/pages/DashboardPage.ts

@@ -18,11 +18,23 @@
  */
 
 import { Page, Download, Locator } from '@playwright/test';
-import { Menu } from '../components/core';
+import { Button, Input, Menu, Tabs } from '../components/core';
 import { DashboardFilterBar } from '../components/dashboard';
 import { gotoWithRetry } from '../helpers/navigation';
+import { html5DragAndDrop } from '../helpers/dnd';
 import { TIMEOUT } from '../utils/constants';
 
+/** Tabs of the dashboard builder side pane, by their rendered label. */
+type BuilderTab = 'Charts' | 'Layout elements';
+
+/**
+ * Built-in draggable layout elements, by their rendered label (see
+ * `src/dashboard/components/gridComponents/new/`). Extension-provided elements
+ * carry dynamic names and are not covered here.
+ */
+type LayoutElementLabel =
+  'Tabs' | 'Row' | 'Column' | 'Header' | 'Text / Markdown' | 'Divider';
+
 /**
  * Dashboard Page object for interacting with dashboards.
  */
@@ -32,9 +44,28 @@ export class DashboardPage {
 
   private static readonly SELECTORS = {
     DASHBOARD_HEADER: '[data-test="dashboard-header-container"]',
+    CHART_GRID_COMPONENT: '[data-test="chart-grid-component"]',
+    // `:visible` so the locator empties out as loaders hide; see
+    // waitForLoadersToSettle.
+    LOADING_INDICATOR: '[aria-label="Loading"]:visible',
     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"]',
+    EMPTY_DROPTARGET: '[data-test="grid-content"] .empty-droptarget',
+    NEW_COMPONENT: '[data-test="new-component"]',
+    CHART_HOLDER: '[data-test="dashboard-component-chart-holder"]',
+    GRID_CONTENT: '[data-test="grid-content"]',
+    DELETE_COMPONENT: '[data-test="dashboard-delete-component-button"]',
+    MARKDOWN_EDITOR: '[data-test="dashboard-markdown-editor"]',
+    EDITABLE_TITLE: '[data-test="editable-title-input"]',
+    // Ace exposes no data-test hooks; these are its own stable DOM classes.
+    ACE_CONTENT: '.ace_content',
+    ACE_TEXT_INPUT: '.ace_text-input',
+    RESIZE_HANDLE_BOTTOM: '.resizable-container-handle--bottom',
   } as const;
 
   constructor(page: Page) {
@@ -60,12 +91,16 @@ export class DashboardPage {
 
   /**
    * Wait for the dashboard header to be visible.
+   *
+   * The header container renders well before the grid does, so this only
+   * establishes that the dashboard route mounted — pair it with
+   * {@link waitForChartsToLoad} before asserting on chart content.
    */
   async waitForLoad(options?: { timeout?: number }): Promise<void> {
     const timeout = options?.timeout ?? TIMEOUT.PAGE_LOAD;
-    await this.page.waitForSelector(DashboardPage.SELECTORS.DASHBOARD_HEADER, {
-      timeout,
-    });
+    await this.page
+      .locator(DashboardPage.SELECTORS.DASHBOARD_HEADER)
+      .waitFor({ state: 'visible', timeout });
   }
 
   /**
@@ -73,37 +108,80 @@ export class DashboardPage {
    */
   getChart(chartId: number): Locator {
     return this.page.locator(
-      `[data-test="chart-grid-component"][data-test-chart-id="${chartId}"]`,
+      `${DashboardPage.SELECTORS.CHART_GRID_COMPONENT}[data-test-chart-id="${chartId}"]`,
     );
   }
 
   /**
-   * Wait for all charts on the dashboard to finish loading.
-   * Waits until no loading indicators are visible on the page.
+   * Wait for the dashboard's charts to mount and finish loading.
+   *
+   * Waiting only for loading indicators to clear is not enough: the grid mounts
+   * its spinners after the header renders, so a "no visible loader" check
+   * called straight after {@link waitForLoad} passes instantly against a
+   * dashboard that has not started rendering anything. Waiting for at least one
+   * chart grid component first makes the absence of loaders mean "charts
+   * finished" rather than "charts have not begun".
+   *
+   * Only for dashboards that have charts — on an empty one this waits out
+   * `timeout` rather than returning. Use {@link waitForGridToLoad} there.
    */
   async waitForChartsToLoad(options?: { timeout?: number }): Promise<void> {
     const timeout = options?.timeout ?? TIMEOUT.API_RESPONSE;
 
-    // Use browser-context evaluation to check visibility directly.
-    // Loading indicators ([aria-label="Loading"]) may persist in the DOM as hidden
-    // elements after charts finish loading. This checks that none are currently visible,
-    // returning immediately when charts are already loaded (no timeout penalty).
-    await this.page.waitForFunction(
-      () => {
-        const loaders = document.querySelectorAll('[aria-label="Loading"]');
-        if (loaders.length === 0) return true;
-        return Array.from(loaders).every(el => {
-          const style = getComputedStyle(el);
-          return (
-            style.display === 'none' ||
-            style.visibility === 'hidden' ||
-            style.opacity === '0'
-          );
-        });
-      },
-      undefined,
-      { timeout },
-    );
+    await this.page
+      .locator(DashboardPage.SELECTORS.CHART_GRID_COMPONENT)
+      .first()
+      .waitFor({ state: 'attached', timeout });
+
+    await this.waitForLoadersToSettle(timeout);
+  }
+
+  /**
+   * Wait for the dashboard grid to mount and any loading indicators to clear.
+   *
+   * The counterpart to {@link waitForChartsToLoad} for a dashboard with no
+   * charts on it: the grid container renders whatever the grid holds, so it
+   * gives the "the page got past the header" evidence that a chart component
+   * cannot. Prefer {@link waitForChartsToLoad} whenever charts are expected —
+   * this cannot tell a grid that rendered empty from one whose charts have not
+   * begun rendering.
+   */
+  async waitForGridToLoad(options?: { timeout?: number }): Promise<void> {
+    const timeout = options?.timeout ?? TIMEOUT.API_RESPONSE;
+
+    // Attached rather than visible: an empty grid collapses to zero height,
+    // which Playwright counts as not visible.
+    await this.page
+      .locator(DashboardPage.SELECTORS.GRID_CONTENT)
+      .first()
+      .waitFor({ state: 'attached', timeout });
+
+    await this.waitForLoadersToSettle(timeout);
+  }
+
+  /**
+   * Resolve once no loading indicator is visible.
+   *
+   * Loading indicators persist in the DOM as hidden elements after charts
+   * finish, so this waits for none to be *visible* rather than for none to
+   * exist. The `:visible` engine resolves to zero elements when they are all
+   * hidden, which is what `detached` then matches — and it returns immediately
+   * when they are already settled, with no timeout penalty.
+   *
+   * Deliberately not a `getComputedStyle` check in an evaluated function:
+   * `display` does not inherit, so a loader inside a `display: none` ancestor
+   * computes to its own `display: block` and reads as visible, hanging the wait
+   * until the timeout. Playwright's visibility check accounts for ancestors.
+   *
+   * Loader absence is also the state of a dashboard that has not started
+   * rendering, which is why every caller pairs this with a wait for the content
+   * it expects.
+   */
+  private async waitForLoadersToSettle(timeout: number): Promise<void> {
+    await this.page
+      .locator(DashboardPage.SELECTORS.LOADING_INDICATOR)
+      .first()
+      .waitFor({ state: 'detached', timeout });
   }
 
   /**
@@ -136,14 +214,13 @@ export class DashboardPage {
    * Open the dashboard header actions menu (three-dot menu)
    */
   async openHeaderActionsMenu(): Promise<void> {
-    await this.page.click(DashboardPage.SELECTORS.DASHBOARD_MENU_TRIGGER);
+    await this.page
+      .locator(DashboardPage.SELECTORS.DASHBOARD_MENU_TRIGGER)
+      .click();
     // Wait for the dropdown menu to appear
-    await this.page.waitForSelector(
-      DashboardPage.SELECTORS.HEADER_ACTIONS_MENU,
-      {
-        state: 'visible',
-      },
-    );
+    await this.page
+      .locator(DashboardPage.SELECTORS.HEADER_ACTIONS_MENU)
+      .waitFor({ state: 'visible' });
   }
 
   /**
@@ -178,4 +255,192 @@ 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
+      .locator(DashboardPage.SELECTORS.BUILDER_PANE)
+      .waitFor({ state: 'visible' });
+  }
+
+  /**
+   * The builder side pane's tab bar (Charts / Layout elements).
+   */
+
+  /**
+   * Switch the builder side pane to one of its tabs.
+   * @param tab - 'Charts' (existing slices) or 'Layout elements' (new components)
+   */
+  private async openBuilderTab(tab: BuilderTab): Promise<void> {
+    // Scoped to `.ant-tabs` because that is the root the shared Tabs component
+    // expects.
+    const builderTabs = new Tabs(
+      this.page,
+      this.page
+        .locator(`${DashboardPage.SELECTORS.BUILDER_PANE} .ant-tabs`)
+        .first(),
+    );
+    await builderTabs.clickTab(tab);
+  }
+
+  /**
+   * Locator for chart-holder components currently placed on the grid.
+   * Markdown components are chart holders too — use
+   * {@link getMarkdownEditors} when the assertion must exclude them.
+   */
+  getChartHolders(): 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: LayoutElementLabel): 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's empty drop target, which the grid renders while in edit mode.
+   *
+   * Only resolves while the grid is still empty. Dropping a second component
+   * needs a target relative to the already-placed one, not this.
+   */
+  private dropTarget(): Locator {
+    return this.page.locator(DashboardPage.SELECTORS.EMPTY_DROPTARGET).first();
+  }
+
+  /**
+   * Hover the first placed chart-holder and click its delete button (edit mode).
+   */
+  async deleteChartHolder(): Promise<void> {
+    const holder = this.getChartHolders().first();
+    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.
+   */
+  getMarkdownEditors(): Locator {
+    return this.page.locator(DashboardPage.SELECTORS.MARKDOWN_EDITOR);
+  }
+
+  /**
+   * The rendered ace document inside a markdown component. Present only once
+   * the component has entered its editing state.
+   *
+   * Exposed as a locator rather than routed through the `AceEditor` component:
+   * that component reads and writes through `ace.edit(...)` in page context,
+   * which both bypasses the real keystroke path under test and gives up
+   * web-first retries on assertions.
+   *
+   * @param markdownEditor - A locator from {@link getMarkdownEditors}
+   */
+  getMarkdownAceContent(markdownEditor: Locator): Locator {
+    return markdownEditor.locator(DashboardPage.SELECTORS.ACE_CONTENT);
+  }
+
+  /**
+   * Ace's hidden textarea inside a markdown component — the element that
+   * receives keystrokes.
+   *
+   * @param markdownEditor - A locator from {@link getMarkdownEditors}
+   */
+  getMarkdownAceInput(markdownEditor: Locator): Locator {
+    return markdownEditor.locator(DashboardPage.SELECTORS.ACE_TEXT_INPUT);
+  }
+
+  /**
+   * Click the dashboard title, moving focus off whichever grid component holds
+   * it. Committing a markdown edit needs a click on some other element, and the
+   * title is the one that is always present regardless of what is on the grid.
+   *
+   * In edit mode the click focuses the title's input. That is a state change,
+   * not a no-op — but it edits nothing on its own, so it leaves the component
+   * under test untouched.
+   */
+  async blurToDashboardTitle(): Promise<void> {
+    await this.page
+      .locator(DashboardPage.SELECTORS.EDITABLE_TITLE)
+      .first()
+      .click();
+  }
+
+  /**
+   * Drag a grid component's bottom resize handle down by `deltaY` pixels.
+   * Requires edit mode. Uses the mouse because the resize handle is driven by
+   * `react-resizable`, which tracks real pointer movement.
+   *
+   * @param component - The grid component to resize
+   * @param deltaY - Pixels to drag downwards (positive grows the component)
+   * @returns The component's height before and after the drag
+   */
+  async resizeComponent(
+    component: Locator,
+    deltaY: number,
+  ): Promise<{ heightBefore: number; heightAfter: number }> {
+    const boxBefore = await component.boundingBox();
+    if (!boxBefore) {
+      throw new Error('Cannot resize a component that is not visible');
+    }
+
+    const handle = component
+      .locator(DashboardPage.SELECTORS.RESIZE_HANDLE_BOTTOM)
+      .last();
+    const handleBox = await handle.boundingBox();
+    if (!handleBox) {
+      throw new Error('Resize handle is not visible');
+    }
+
+    const startX = handleBox.x + handleBox.width / 2;
+    const startY = handleBox.y + handleBox.height / 2;
+    await this.page.mouse.move(startX, startY);
+    await this.page.mouse.down();
+    // Multiple steps so react-resizable sees a drag rather than a teleport.
+    await this.page.mouse.move(startX, startY + deltaY, { steps: 10 });
+    await this.page.mouse.up();
+
+    const boxAfter = await component.boundingBox();
+    if (!boxAfter) {
+      throw new Error('Component disappeared during resize');
+    }
+
+    return { heightBefore: boxBefore.height, heightAfter: boxAfter.height };
+  }
 }

superset-frontend/playwright/tests/dashboard/clear-all-filters.spec.ts

@@ -25,8 +25,13 @@ import {
   buildSingleRowDashboardLayout,
 } from '../../helpers/api/dashboard';
 import { getDatasetByName } from '../../helpers/api/dataset';
+import { extractIdFromResponse } from '../../helpers/api/assertions';
 import { DashboardPage } from '../../pages/DashboardPage';
 import { TIMEOUT } from '../../utils/constants';
+import {
+  buildFilterJsonMetadata,
+  buildSelectFilter,
+} from './dashboard-test-helpers';
 
 const DATASET_NAME = 'birth_names';
 const FILTER_COLUMN = 'gender';
@@ -59,12 +64,10 @@ testWithAssets(
       params: JSON.stringify(chartParams),
     });
     expect(chartResp.ok()).toBe(true);
-    const chart = await chartResp.json();
-    const chartId: number = chart.id ?? chart.result?.id;
+    const chartId = await extractIdFromResponse(chartResp);
     testAssets.trackChart(chartId);
 
     // Create dashboard with chart in position_json and a native filter in json_metadata
-    const filterId = `NATIVE_FILTER-${Math.random().toString(36).slice(2, 10)}`;
     const positionJson = buildSingleRowDashboardLayout([
       {
         id: chartId,
@@ -74,39 +77,17 @@ testWithAssets(
       },
     ]);
 
-    const jsonMetadata = {
-      native_filter_configuration: [
-        {
-          id: filterId,
-          name: 'Gender',
-          filterType: 'filter_select',
-          type: 'NATIVE_FILTER',
-          targets: [
-            {
-              datasetId,
-              column: { name: FILTER_COLUMN },
-            },
-          ],
-          controlValues: {
-            multiSelect: false,
-            enableEmptyFilter: false,
-            defaultToFirstItem: false,
-            inverseSelection: false,
-            searchAllOptions: false,
-          },
-          defaultDataMask: { filterState: {}, extraFormData: {} },
-          cascadeParentIds: [],
-          scope: { rootPath: ['ROOT_ID'], excluded: [] },
+    const jsonMetadata = buildFilterJsonMetadata({
+      chartsInScope: [chartId],
+      nativeFilters: [
+        buildSelectFilter({
+          datasetId,
+          column: FILTER_COLUMN,
           chartsInScope: [chartId],
-        },
+          name: 'Gender',
+        }),
       ],
-      chart_configuration: {},
-      cross_filters_enabled: false,
-      global_chart_configuration: {
-        scope: { rootPath: ['ROOT_ID'], excluded: [] },
-        chartsInScope: [chartId],
-      },
-    };
+    });
 
     const dashResp = await apiPostDashboard(page, {
       dashboard_title: `clear_all_repro_${Date.now()}`,
@@ -115,8 +96,7 @@ testWithAssets(
       json_metadata: JSON.stringify(jsonMetadata),
     });
     expect(dashResp.ok()).toBe(true);
-    const dashBody = await dashResp.json();
-    const dashboardId: number = dashBody.result?.id ?? dashBody.id;
+    const dashboardId = await extractIdFromResponse(dashResp);
     testAssets.trackDashboard(dashboardId);
 
     // Associate chart with the dashboard so it actually renders

superset-frontend/playwright/tests/dashboard/dashboard-test-helpers.ts

@@ -62,6 +62,8 @@ interface TestDashboardResult {
 interface CreateTestDashboardOptions {
   /** Prefix for generated name (default: 'test_dashboard') */
   prefix?: string;
+  /** Publish the dashboard on creation (default: false, the API default) */
+  published?: boolean;
 }
 
 /**
@@ -86,6 +88,8 @@ export async function createTestDashboard(
 
   const response = await apiPostDashboard(page, {
     dashboard_title: name,
+    // Serialized as JSON, which drops undefined — no need to omit the key.
+    published: options?.published,
   });
 
   if (!response.ok()) {
@@ -106,6 +110,113 @@ export async function createTestDashboard(
   return { id, name };
 }
 
+/** Scope covering the whole dashboard — every filter built here is unscoped. */
+const ROOT_SCOPE = { rootPath: ['ROOT_ID'], excluded: [] };
+
+interface DataMask {
+  filterState: Record<string, unknown>;
+  extraFormData: Record<string, unknown>;
+}
+
+export interface NativeFilterConfig {
+  id: string;
+  name: string;
+  filterType: string;
+  type: string;
+  targets: Array<{ datasetId: number; column: { name: string } }>;
+  controlValues: Record<string, boolean>;
+  defaultDataMask: DataMask;
+  cascadeParentIds: string[];
+  scope: typeof ROOT_SCOPE;
+  chartsInScope: number[];
+}
+
+interface SelectFilterOptions {
+  /** Dataset backing the filtered column. */
+  datasetId: number;
+  /** Column the filter targets. */
+  column: string;
+  /** Charts the filter applies to. */
+  chartsInScope: number[];
+  /** Label shown in the filter bar (default: the column name). */
+  name?: string;
+  /**
+   * Value preselected when the dashboard loads. Omit for a filter that starts
+   * unset — the distinction is load-bearing: a preselected filter is applied to
+   * the initial chart-data request, an unset one is not.
+   */
+  defaultValue?: string;
+}
+
+/**
+ * Builds one `filter_select` native filter for a dashboard's `json_metadata`.
+ * The filter id is generated here because no test needs to know it — filters are
+ * addressed through the filter bar UI, not by id.
+ */
+export function buildSelectFilter(
+  options: SelectFilterOptions,
+): NativeFilterConfig {
+  const { datasetId, column, chartsInScope, name, defaultValue } = options;
+  return {
+    id: `NATIVE_FILTER-${Math.random().toString(36).slice(2, 10)}`,
+    name: name ?? column,
+    filterType: 'filter_select',
+    type: 'NATIVE_FILTER',
+    targets: [{ datasetId, column: { name: column } }],
+    controlValues: {
+      multiSelect: false,
+      enableEmptyFilter: false,
+      defaultToFirstItem: false,
+      inverseSelection: false,
+      searchAllOptions: false,
+    },
+    defaultDataMask:
+      defaultValue === undefined
+        ? { filterState: {}, extraFormData: {} }
+        : {
+            filterState: { value: [defaultValue] },
+            extraFormData: {
+              filters: [{ col: column, op: 'IN', val: [defaultValue] }],
+            },
+          },
+    cascadeParentIds: [],
+    scope: ROOT_SCOPE,
+    chartsInScope,
+  };
+}
+
+interface FilterMetadataOptions {
+  /** Charts the dashboard's global filter scope covers. */
+  chartsInScope: number[];
+  nativeFilters: NativeFilterConfig[];
+  /**
+   * Display Controls, serialized as-is. Kept untyped and pass-through: only one
+   * spec builds them, so a second builder would be speculative.
+   */
+  chartCustomizations?: Record<string, unknown>[];
+}
+
+/**
+ * Builds the `json_metadata` envelope a filtered dashboard needs. Cross-filters
+ * are off so a click on one chart cannot perturb another test's assertions.
+ */
+export function buildFilterJsonMetadata(
+  options: FilterMetadataOptions,
+): Record<string, unknown> {
+  return {
+    native_filter_configuration: options.nativeFilters,
+    ...(options.chartCustomizations && {
+      chart_customization_config: options.chartCustomizations,
+    }),
+    chart_configuration: {},
+    cross_filters_enabled: false,
+    global_chart_configuration: {
+      scope: ROOT_SCOPE,
+      chartsInScope: options.chartsInScope,
+    },
+  };
+}
+
 export interface DashboardChartSpec {
   /** Sent as the chart's top-level `viz_type` and injected into its params. */
   viz_type: string;

superset-frontend/playwright/tests/dashboard/delete-display-control.spec.ts

@@ -30,7 +30,12 @@ import {
   buildSingleRowDashboardLayout,
 } from '../../helpers/api/dashboard';
 import { getDatasetByName } from '../../helpers/api/dataset';
+import { extractIdFromResponse } from '../../helpers/api/assertions';
 import { DashboardPage } from '../../pages/DashboardPage';
+import {
+  buildFilterJsonMetadata,
+  buildSelectFilter,
+} from './dashboard-test-helpers';
 
 // Record video regardless of pass/fail (before/after clips).
 testWithAssets.use({ video: 'on' });
@@ -72,8 +77,7 @@ testWithAssets(
       params: JSON.stringify(chartParams),
     });
     expect(chartResp.ok()).toBe(true);
-    const chart = await chartResp.json();
-    const chartId: number = chart.id ?? chart.result?.id;
+    const chartId = await extractIdFromResponse(chartResp);
     testAssets.trackChart(chartId);
 
     const positionJson = buildSingleRowDashboardLayout([
@@ -86,33 +90,21 @@ testWithAssets(
     ]);
 
     // 2. json_metadata: one dashboard filter + one Display Control.
-    const filterId = `NATIVE_FILTER-${Math.random().toString(36).slice(2, 10)}`;
     const customizationId = `CHART_CUSTOMIZATION-${Math.random()
       .toString(36)
       .slice(2, 10)}`;
 
-    const jsonMetadata = {
-      native_filter_configuration: [
-        {
-          id: filterId,
-          name: 'Gender',
-          filterType: 'filter_select',
-          type: 'NATIVE_FILTER',
-          targets: [{ datasetId, column: { name: FILTER_COLUMN } }],
-          controlValues: {
-            multiSelect: false,
-            enableEmptyFilter: false,
-            defaultToFirstItem: false,
-            inverseSelection: false,
-            searchAllOptions: false,
-          },
-          defaultDataMask: { filterState: {}, extraFormData: {} },
-          cascadeParentIds: [],
-          scope: { rootPath: ['ROOT_ID'], excluded: [] },
+    const jsonMetadata = buildFilterJsonMetadata({
+      chartsInScope: [chartId],
+      nativeFilters: [
+        buildSelectFilter({
+          datasetId,
+          column: FILTER_COLUMN,
           chartsInScope: [chartId],
-        },
+          name: 'Gender',
+        }),
       ],
-      chart_customization_config: [
+      chartCustomizations: [
         {
           id: customizationId,
           type: 'CHART_CUSTOMIZATION',
@@ -127,13 +119,7 @@ testWithAssets(
           removed: false,
         },
       ],
-      chart_configuration: {},
-      cross_filters_enabled: false,
-      global_chart_configuration: {
-        scope: { rootPath: ['ROOT_ID'], excluded: [] },
-        chartsInScope: [chartId],
-      },
-    };
+    });
 
     const dashResp = await apiPostDashboard(page, {
       dashboard_title: `display_control_repro_${Date.now()}`,
@@ -142,8 +128,7 @@ testWithAssets(
       json_metadata: JSON.stringify(jsonMetadata),
     });
     expect(dashResp.ok()).toBe(true);
-    const dashBody = await dashResp.json();
-    const dashboardId: number = dashBody.result?.id ?? dashBody.id;
+    const dashboardId = await extractIdFromResponse(dashResp);
     testAssets.trackDashboard(dashboardId);
 
     const linkResp = await apiPut(page, `api/v1/chart/${chartId}`, {
@@ -155,14 +140,22 @@ testWithAssets(
     const dashboardPage = new DashboardPage(page);
     await dashboardPage.gotoById(dashboardId);
     await dashboardPage.waitForLoad({ timeout: 30000 });
-    await dashboardPage.waitForChartsToLoad({ timeout: 8000 }).catch(() => {});
+
+    /**
+     * Best-effort settle after each mutation. Every assertion below targets the
+     * filter bar rather than chart content, so a chart that is still querying
+     * must not fail the test — but giving charts a chance to finish keeps the
+     * bar from being re-rendered underneath the assertions.
+     */
+    const settleCharts = () =>
+      dashboardPage.waitForChartsToLoad({ timeout: 8000 }).catch(() => {});
+
+    await settleCharts();
     const filterBar = await dashboardPage.waitForFilterBar();
 
     // Both the Gender filter and the Time grain Display Control should render.
     await expect(dashboardPage.getDisplayControlsHeader()).toBeVisible();
     await expect(dashboardPage.getDisplayControl('Time grain')).toBeVisible();
-    // eslint-disable-next-line no-console
-    console.log('STEP 1: Display control "Time grain" is present in the bar.');
     await shot('01-initial-bar');
 
     // 4. Open the filters config modal via the settings gear.
@@ -172,40 +165,26 @@ testWithAssets(
     // 5. Delete the "Time grain" Display Control in the modal sidebar.
     await modal.removeDisplayControl('Time grain');
     await expect(modal.getRemovedMarker()).toBeVisible();
-    // eslint-disable-next-line no-console
-    console.log('STEP 2: Display control marked (Removed) in modal.');
     await shot('03-modal-removed');
 
     // 6. Save the modal.
     await modal.clickSave();
     await modal.waitForHidden({ timeout: 20000 });
-    await dashboardPage.waitForChartsToLoad({ timeout: 8000 }).catch(() => {});
+    await settleCharts();
     await shot('04-after-save');
 
-    const goneAfterSave = await dashboardPage
-      .getDisplayControl('Time grain')
-      .isVisible()
-      .catch(() => false);
-    // eslint-disable-next-line no-console
-    console.log(
-      `STEP 3: After save, "Time grain" visible in bar = ${goneAfterSave}`,
-    );
-
     // 7. Click Apply Filters.
     await filterBar.applyIfEnabled();
-    await dashboardPage.waitForChartsToLoad({ timeout: 8000 }).catch(() => {});
+    await settleCharts();
+    /**
+     * Hold before asserting. The bug this guards against is the control coming
+     * *back*, and `toHaveCount(0)` passes the instant it is absent — so without
+     * a pause the assertion can sample the gap before the re-render and pass on
+     * a dashboard that is about to fail. The wait is the reappearance window.
+     */
     await page.waitForTimeout(1500);
     await shot('05-after-apply');
 
-    const reappeared = await dashboardPage
-      .getDisplayControl('Time grain')
-      .isVisible()
-      .catch(() => false);
-    // eslint-disable-next-line no-console
-    console.log(
-      `STEP 4: After Apply Filters, "Time grain" reappeared = ${reappeared}`,
-    );
-
     // The deleted Display Control must stay gone.
     await expect(
       dashboardPage.getDisplayControl('Time grain'),

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

@@ -0,0 +1,200 @@
+/**
+ * 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 — these replace the deprecated Cypress
+ * spec cypress-base/cypress/e2e/dashboard/editmode.test.ts, deleted in the same
+ * change. They 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).
+ *
+ * Coverage here is a superset of the Cypress spec, which by the time of the
+ * migration held a single "should add charts" test — its "Color consistency"
+ * block had already been dropped upstream as permanently skipped (it read
+ * per-series colors off an `.nv-legend-symbol` SVG `fill` that ECharts, which
+ * renders to <canvas>, no longer produces). That color-precedence logic is
+ * covered by Jest/RTL, not by E2E.
+ */
+
+import {
+  testWithAssets,
+  expect,
+  type TestAssets,
+} from '../../helpers/fixtures';
+import { apiPostChart } from '../../helpers/api/chart';
+import { getDatasetByName } from '../../helpers/api/dataset';
+import { extractIdFromResponse } from '../../helpers/api/assertions';
+import { DashboardPage } from '../../pages/DashboardPage';
+import { createTestDashboard } from './dashboard-test-helpers';
+import type { Page, TestInfo } from '@playwright/test';
+
+const DATASET_NAME = 'birth_names';
+
+/**
+ * How long one click on the markdown component gets to bring up the ace editor
+ * before the retry loop tries again, and how long the whole loop gets. The
+ * per-attempt budget is deliberately short: the failure mode is a swallowed
+ * click, and retrying is cheaper than waiting out the full budget once.
+ */
+const MARKDOWN_EDIT_ATTEMPT_TIMEOUT = 2000;
+const MARKDOWN_EDIT_TOTAL_TIMEOUT = 20000;
+
+/** Downward drag distance for the resize assertion — several grid rows. */
+const RESIZE_DELTA_PX = 150;
+
+/** Create a hermetic chart from birth_names, NOT placed on any dashboard. */
+async function createChart(
+  page: Page,
+  testAssets: TestAssets,
+  testInfo: TestInfo,
+): Promise<string> {
+  const dataset = await getDatasetByName(page, DATASET_NAME);
+  if (!dataset) {
+    throw new Error(`Dataset ${DATASET_NAME} not found`);
+  }
+  const sliceName = `edit_mode_chart_${Date.now()}_${testInfo.parallelIndex}`;
+  const resp = await apiPostChart(page, {
+    slice_name: sliceName,
+    viz_type: 'big_number_total',
+    datasource_id: dataset.id,
+    datasource_type: 'table',
+    params: JSON.stringify({
+      datasource: `${dataset.id}__table`,
+      viz_type: 'big_number_total',
+      metric: 'count',
+    }),
+  });
+  expect(resp.ok()).toBe(true);
+  testAssets.trackChart(await extractIdFromResponse(resp));
+  return sliceName;
+}
+
+/**
+ * Create the empty published dashboard every test in this file starts from,
+ * open it, and enter edit mode. Returns the page object positioned on the
+ * builder, ready for a drag.
+ */
+async function openEmptyDashboardInEditMode(
+  page: Page,
+  testAssets: TestAssets,
+  testInfo: TestInfo,
+): Promise<DashboardPage> {
+  const { id } = await createTestDashboard(page, testAssets, testInfo, {
+    prefix: 'edit_mode',
+    published: true,
+  });
+
+  const dashboard = new DashboardPage(page);
+  await dashboard.gotoById(id);
+  await dashboard.waitForLoad();
+  await dashboard.enterEditMode();
+  return dashboard;
+}
+
+testWithAssets(
+  'edit mode: add a chart to the dashboard via drag-and-drop',
+  async ({ page, testAssets }, testInfo) => {
+    const sliceName = await createChart(page, testAssets, testInfo);
+    const dashboard = await openEmptyDashboardInEditMode(
+      page,
+      testAssets,
+      testInfo,
+    );
+
+    await expect(dashboard.getChartHolders()).toHaveCount(0);
+    await dashboard.addChartByName(sliceName);
+    await expect(dashboard.getChartHolders()).toHaveCount(1);
+  },
+);
+
+testWithAssets(
+  'edit mode: remove an added chart from the dashboard',
+  async ({ page, testAssets }, testInfo) => {
+    const sliceName = await createChart(page, testAssets, testInfo);
+    const dashboard = await openEmptyDashboardInEditMode(
+      page,
+      testAssets,
+      testInfo,
+    );
+
+    await dashboard.addChartByName(sliceName);
+    await expect(dashboard.getChartHolders()).toHaveCount(1);
+
+    await dashboard.deleteChartHolder();
+    await expect(dashboard.getChartHolders()).toHaveCount(0);
+  },
+);
+
+testWithAssets(
+  'edit mode: add a markdown component via drag-and-drop',
+  async ({ page, testAssets }, testInfo) => {
+    // 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 dashboard = await openEmptyDashboardInEditMode(
+      page,
+      testAssets,
+      testInfo,
+    );
+
+    await dashboard.addLayoutElement('Text / Markdown');
+    const editor = dashboard.getMarkdownEditors().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 = dashboard.getMarkdownAceContent(editor);
+    const heading = editor.locator('h1', { hasText: 'Header 1' });
+    await expect(async () => {
+      if (await aceContent.isVisible()) return;
+      await heading.click();
+      await expect(aceContent).toBeVisible({
+        timeout: MARKDOWN_EDIT_ATTEMPT_TIMEOUT,
+      });
+    }).toPass({ timeout: MARKDOWN_EDIT_TOTAL_TIMEOUT });
+    await expect(aceContent).toContainText('Header 1');
+    await expect(aceContent).toContainText('markdown formatting');
+
+    // Replace the content and confirm the edit is reflected.
+    const aceInput = dashboard.getMarkdownAceInput(editor);
+    await aceInput.press('ControlOrMeta+a');
+    await aceInput.press('Delete');
+    await aceInput.pressSequentially('Test resize');
+    await expect(aceContent).toContainText('Test resize');
+
+    // Commit by clicking outside the component. Ace unmounting is what proves
+    // the component left its editing state — the wrapper contains "Test resize"
+    // either way, since ace holds that text before the click too.
+    await dashboard.blurToDashboardTitle();
+    await expect(aceContent).toBeHidden();
+    await expect(editor).toContainText('Test resize');
+
+    // Resize via the bottom handle and confirm the component grew taller.
+    const { heightBefore, heightAfter } = await dashboard.resizeComponent(
+      editor,
+      RESIZE_DELTA_PX,
+    );
+    expect(heightAfter).toBeGreaterThan(heightBefore);
+  },
+);

superset-frontend/playwright/tests/dashboard/mixed-chart-dashboard-filters.spec.ts

@@ -39,26 +39,26 @@ import {
   apiPostDashboard,
   buildSingleRowDashboardLayout,
 } from '../../helpers/api/dashboard';
+import { getDatasetByName } from '../../helpers/api/dataset';
+import { extractIdFromResponse } from '../../helpers/api/assertions';
 import { DashboardPage } from '../../pages/DashboardPage';
+import {
+  buildFilterJsonMetadata,
+  buildSelectFilter,
+} from './dashboard-test-helpers';
 
 const DATASET_NAME = 'birth_names';
 const FILTER_COLUMN = 'gender';
 const FILTER_VALUE = 'boy';
 
-async function findDatasetIdByName(page: any, name: string): Promise<number> {
-  const query = `(filters:!((col:table_name,opr:eq,value:'${name}')))`;
-  const resp = await page.request.get(`api/v1/dataset/?q=${query}`);
-  const body = await resp.json();
-  if (!body.result?.length) {
-    throw new Error(`Dataset ${name} not found`);
-  }
-  return body.result[0].id;
-}
-
 testWithAssets(
   'Mixed chart applies dashboard filter to both queries (#29519)',
   async ({ page, testAssets }) => {
-    const datasetId = await findDatasetIdByName(page, DATASET_NAME);
+    const dataset = await getDatasetByName(page, DATASET_NAME);
+    if (!dataset) {
+      throw new Error(`Dataset ${DATASET_NAME} not found`);
+    }
+    const datasetId = dataset.id;
 
     const chartParams = {
       datasource: `${datasetId}__table`,
@@ -86,10 +86,9 @@ testWithAssets(
       params: JSON.stringify(chartParams),
     });
     expect(chartResp.ok()).toBe(true);
-    const chartId: number = (await chartResp.json()).id;
+    const chartId = await extractIdFromResponse(chartResp);
     testAssets.trackChart(chartId);
 
-    const filterId = `NATIVE_FILTER-${Math.random().toString(36).slice(2, 10)}`;
     const positionJson = buildSingleRowDashboardLayout([
       {
         id: chartId,
@@ -98,39 +97,20 @@ testWithAssets(
         height: 60,
       },
     ]);
-    const jsonMetadata = {
-      native_filter_configuration: [
-        {
-          id: filterId,
-          name: 'Gender',
-          filterType: 'filter_select',
-          type: 'NATIVE_FILTER',
-          targets: [{ datasetId, column: { name: FILTER_COLUMN } }],
-          controlValues: {
-            multiSelect: false,
-            enableEmptyFilter: false,
-            defaultToFirstItem: false,
-            inverseSelection: false,
-            searchAllOptions: false,
-          },
-          defaultDataMask: {
-            filterState: { value: [FILTER_VALUE] },
-            extraFormData: {
-              filters: [{ col: FILTER_COLUMN, op: 'IN', val: [FILTER_VALUE] }],
-            },
-          },
-          cascadeParentIds: [],
-          scope: { rootPath: ['ROOT_ID'], excluded: [] },
+    // Preselect the filter value so it is already applied on the dashboard's
+    // first chart-data request — that request is what the assertions inspect.
+    const jsonMetadata = buildFilterJsonMetadata({
+      chartsInScope: [chartId],
+      nativeFilters: [
+        buildSelectFilter({
+          datasetId,
+          column: FILTER_COLUMN,
           chartsInScope: [chartId],
-        },
+          name: 'Gender',
+          defaultValue: FILTER_VALUE,
+        }),
       ],
-      chart_configuration: {},
-      cross_filters_enabled: false,
-      global_chart_configuration: {
-        scope: { rootPath: ['ROOT_ID'], excluded: [] },
-        chartsInScope: [chartId],
-      },
-    };
+    });
     const dashResp = await apiPostDashboard(page, {
       dashboard_title: `mixed_filter_repro_${Date.now()}`,
       published: true,
@@ -138,8 +118,7 @@ testWithAssets(
       json_metadata: JSON.stringify(jsonMetadata),
     });
     expect(dashResp.ok()).toBe(true);
-    const dashBody = await dashResp.json();
-    const dashboardId: number = dashBody.result?.id ?? dashBody.id;
+    const dashboardId = await extractIdFromResponse(dashResp);
     testAssets.trackDashboard(dashboardId);
 
     await apiPut(page, `api/v1/chart/${chartId}`, {

superset-frontend/playwright/tests/dashboard/theme.spec.ts

@@ -128,16 +128,15 @@ test('non-admin user can view a themed dashboard without 403 or infinite spinner
 
     // --- NON-ADMIN USER PHASE (page has no cached auth via test.use) ---
 
-    // 4. Instrument network: track any /api/v1/theme/ requests and 403 responses
+    // 4. Instrument network: track any /api/v1/theme/ request, with its status.
+    // Recording the status rather than asserting on a separate 403-only array
+    // keeps the diagnostic — a failure prints whether the calls were forbidden
+    // or merely unexpected — without a second, subsumed assertion.
     const themeApiRequests: string[] = [];
-    const forbiddenResponses: string[] = [];
     page.on('response', response => {
       const url = response.url();
       if (url.includes('/api/v1/theme/')) {
-        themeApiRequests.push(url);
-      }
-      if (response.status() === 403 && url.includes('/api/v1/theme/')) {
-        forbiddenResponses.push(url);
+        themeApiRequests.push(`${response.status()} ${url}`);
       }
     });
 
@@ -152,14 +151,19 @@ test('non-admin user can view a themed dashboard without 403 or infinite spinner
     const dashboardPage = new DashboardPage(page);
     await dashboardPage.gotoById(dashboardId!);
 
-    // 7. Assert dashboard fully loads (not stuck on infinite spinner)
+    // 7. Assert dashboard fully loads (not stuck on infinite spinner).
+    // The dashboard is created with no position_json, so its grid renders
+    // empty — there is no chart to wait for, only the grid itself.
     await dashboardPage.waitForLoad({ timeout: TIMEOUT.PAGE_LOAD });
-    await dashboardPage.waitForChartsToLoad();
+    await dashboardPage.waitForGridToLoad();
 
-    // 8. Assert no /api/v1/theme/ requests were made (theme data comes from dashboard response)
-    expect(themeApiRequests).toHaveLength(0);
-    // Assert no 403 responses on /api/v1/theme/ (scoped to avoid login/unrelated 403 noise)
-    expect(forbiddenResponses).toHaveLength(0);
+    // 8. A non-admin must render the themed dashboard without ever calling the
+    // theme API — theme data rides along on the dashboard response, and the
+    // endpoint itself is admin-only, so any call here would 403 and break them.
+    expect(
+      themeApiRequests,
+      'Non-admin dashboard load must not call the theme API',
+    ).toHaveLength(0);
   } finally {
     // Cleanup: delete test resources using admin context
     if (dashboardId) {