test(dashboard): migrate dashboard load smoke test to Playwright

[sadpandajoe]

SUMMARY

Migrates the genuine end-to-end case from the legacy Cypress Dashboard load suite (dashboard/load.test.ts) to the existing Playwright framework, as part of the dashboard Cypress→Playwright migration.

The original suite had five cases. Only "should load dashboard" is a true E2E test — it loads a multi-chart dashboard and proves the charts render via real backend queries. The other four (should load in edit mode, should load in standalone mode, should load in edit/standalone mode, should send log data) only assert DOM/URL state from URL params (?edit=true&standalone=true) or intercept a log request — there is no data round-trip to make them E2E. They belong in component/RTL coverage and are intentionally not migrated here.

Design decisions:

• The dashboard is built from scratch via the API (testWithAssets fixture) rather than relying on a seeded example, so the test is hermetic, self-cleaning, and deterministic.
• It asserts terminal output for every visualization (big-number text, table rows, and time-series pixels in the configured series color).
• It records each chart's real POST /api/v1/chart/data response and accepts 200 or 202; 202 is valid when asynchronous queries are enabled.
• Adds reusable buildSingleRowDashboardLayout() and DashboardPage.getChart() helpers, and replaces duplicated inline layout fixtures in related Playwright specs.

TESTING INSTRUCTIONS

cd superset-frontend
PLAYWRIGHT_BASE_URL=http://localhost:8088 npx playwright test --project=chromium dashboard/dashboard-load.spec.ts

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 65.39%. Comparing base (ab8e23d) to head (c44f4ad).
⚠️ Report is 11 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #41432      +/-   ##
==========================================
+ Coverage   65.15%   65.39%   +0.24%     
==========================================
  Files        2789     2754      -35     
  Lines      157546   154213    -3333     
  Branches    35864    35403     -461     
==========================================
- Hits       102648   100849    -1799     
+ Misses      52929    51455    -1474     
+ Partials     1969     1909      -60     

Flag	Coverage Δ
javascript	71.06% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	0e8200c
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/6a5fe9fb1eab4400081029fc
😎 Deploy Preview	https://deploy-preview-41432--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codeant-ai-for-open-source]

Suggestion: The layout component key is derived only from the chart ID, so passing the same chart more than once creates duplicate children entries pointing to a single object key that gets overwritten; this produces an inconsistent layout and prevents rendering duplicated chart instances. Generate a unique component ID per placement (for example by index or nonce) while keeping meta.chartId as the actual chart reference. [logic error]

Severity Level: Major ⚠️

- ⚠️ Playwright-created dashboards cannot reuse same chart multiple times.
- ⚠️ Duplicate chart placements share layout config, losing per-instance sizing.
- ⚠️ Future tests using repeated charts see unexpected rendering behavior.

Steps of Reproduction ✅

1. In `superset-frontend/playwright/helpers/api/dashboard.ts:85-133`, call
`buildSingleRowDashboardLayout()` with a `charts` array that includes the same
`DashboardLayoutChart.id` value more than once (e.g., two entries both with `id: 42` but
different `width`).

2. At line 100, `const chartKeys = charts.map(chart => `CHART-${chart.id}`);` produces
duplicate keys, e.g. `["CHART-42", "CHART-42"]`, which are then assigned as the `children`
of `DASHBOARD_ROW_ID` at lines 101-114.

3. In the `charts.forEach` loop at lines 116-130, both placements use the same `chartKey`
(`"CHART-42"`), so `positionJson[chartKey]` is assigned twice, and the first placement’s
layout meta (including `width`, `height`, or `sliceName`) is overwritten by the last.

4. Any caller that uses this `positionJson` as a dashboard `position_json` payload (e.g.,
via `apiPostDashboard` starting at line 141 in the same file) cannot represent multiple
distinct placements of the same chart: all repeated children reference a single layout
node, so per-instance configuration is lost and repeated charts cannot be modeled
correctly.

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** superset-frontend/playwright/helpers/api/dashboard.ts
**Line:** 100:120
**Comment:**
	*Logic Error: The layout component key is derived only from the chart ID, so passing the same chart more than once creates duplicate `children` entries pointing to a single object key that gets overwritten; this produces an inconsistent layout and prevents rendering duplicated chart instances. Generate a unique component ID per placement (for example by index or nonce) while keeping `meta.chartId` as the actual chart reference.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[bito-code-review]

The flagged issue is correct. Because chartKeys and chartKey are derived solely from chart.id, using the same chart ID multiple times results in duplicate keys, causing subsequent placements to overwrite previous ones in the positionJson object.

To resolve this, you should generate a unique key for each placement by incorporating the index. Here is the corrected implementation for the buildSingleRowDashboardLayout function:

  const chartKeys = charts.map((chart, index) => `CHART-${chart.id}-${index}`);
  const positionJson: DashboardPositionJson = {
    ...emptyLayout,
    [DASHBOARD_GRID_ID]: {
      ...emptyLayout[DASHBOARD_GRID_ID],
      children: [DASHBOARD_ROW_ID],
    },
    [DASHBOARD_ROW_ID]: {
      type: ROW_TYPE,
      id: DASHBOARD_ROW_ID,
      children: chartKeys,
      parents: [DASHBOARD_ROOT_ID, DASHBOARD_GRID_ID],
      meta: { background: BACKGROUND_TRANSPARENT },
    },
  };

  charts.forEach((chart, index) => {
    const chartKey = `CHART-${chart.id}-${index}`;
    positionJson[chartKey] = {
      type: CHART_TYPE,
      id: chartKey,
      children: [],
      parents: [DASHBOARD_ROOT_ID, DASHBOARD_GRID_ID, DASHBOARD_ROW_ID],
      meta: {
        chartId: chart.id,
        width: chart.width ?? GRID_DEFAULT_CHART_WIDTH,
        height: chart.height ?? DEFAULT_CHART_HEIGHT,
        sliceName: chart.sliceName,
      },
    };
  });

Would you like me to check the rest of the comments on this PR and implement fixes for them as well?

superset-frontend/playwright/helpers/api/dashboard.ts

const chartKeys = charts.map((chart, index) => `CHART-${chart.id}-${index}`);
  const positionJson: DashboardPositionJson = {
    ...emptyLayout,
    [DASHBOARD_GRID_ID]: {
      ...emptyLayout[DASHBOARD_GRID_ID],
      children: [DASHBOARD_ROW_ID],
    },
    [DASHBOARD_ROW_ID]: {
      type: ROW_TYPE,
      id: DASHBOARD_ROW_ID,
      children: chartKeys,
      parents: [DASHBOARD_ROOT_ID, DASHBOARD_GRID_ID],
      meta: { background: BACKGROUND_TRANSPARENT },
    },
  };

  charts.forEach((chart, index) => {
    const chartKey = `CHART-${chart.id}-${index}`;
    positionJson[chartKey] = {
      type: CHART_TYPE,
      id: chartKey,
      children: [],
      parents: [DASHBOARD_ROOT_ID, DASHBOARD_GRID_ID, DASHBOARD_ROW_ID],
      meta: {
        chartId: chart.id,
        width: chart.width ?? GRID_DEFAULT_CHART_WIDTH,
        height: chart.height ?? DEFAULT_CHART_HEIGHT,
        sliceName: chart.sliceName,
      },
    };
  });

[bito-code-review]

Code Review Agent Run #4cfc77

Actionable Suggestions - 0

Review Details

• Files reviewed - 8 · Commit Range: 0f052f3..07f6cba

  • superset-frontend/playwright/helpers/api/dashboard.ts
  • superset-frontend/playwright/pages/DashboardPage.ts
  • superset-frontend/playwright/tests/dashboard/clear-all-filters.spec.ts
  • superset-frontend/playwright/tests/dashboard/dashboard-load.spec.ts
  • superset-frontend/playwright/tests/dashboard/delete-display-control.spec.ts
  • superset-frontend/playwright/tests/dashboard/gauge-interval-colors.spec.ts
  • superset-frontend/playwright/tests/dashboard/mixed-chart-dashboard-filters.spec.ts
  • superset-frontend/playwright/tests/embedded/pivot-collapse-state.spec.ts
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful
  • Eslint (Linter) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[bito-code-review]

Code Review Agent Run #2d67f4

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: 07f6cba..c44f4ad

  • superset-frontend/playwright/tests/dashboard/dashboard-load.spec.ts
• Files skipped - 0
• Tools

  • Eslint (Linter) - ✔︎ Successful
  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[rusackas]

Thanks @sadpandajoe, LGTM. Nice to see those hand-rolled position_json blobs collapse into one shared helper.

There's a Codeant thread above to assess/address/resolve if you don't mind. Leaving the merge to you whenever you're ready :)