8000 feat(playwright): add documentation screenshot tests by rusackas · Pull Request #37494 · apache/superset · GitHub
[go: up one dir, main page]
Skip to content

feat(playwright): add documentation screenshot tests #37494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
rusackas wants to merge 9 commits into
base: master
Choose a base branch
from
Draft

feat(playwright): add documentation screenshot tests #37494

rusackas wants to merge 9 commits into from
+231 −2

Conversation

@rusackas
Copy link
Member
@rusackas rusackas commented Jan 27, 2026 •
edited
Loading

SUMMARY

Adds Playwright tests that capture UI screenshots for the Superset documentation site and README. This is a production-ready rewrite of the approach from #36297 by @ExuApplePie, with fixes for all CI failures.

Key improvements over the original PR:

  • APP_PREFIX support: Uses relative URLs (no leading /) via shared URL constants, so tests pass with both empty and /app/prefix base paths
  • No networkidle: Replaces waitForLoadState('networkidle') with element visibility checks, preventing WebSocket-induced timeouts in SQL Lab
  • Reliable example data: Navigates to the World Bank dashboard via its slug (world_health) instead of searching for "Slack Dashboard" which isn't part of standard load_examples
  • Shared URL constants: Adds CHART_ADD, CHART_LIST, and SQLLAB to the existing playwright/utils/urls.ts for reuse
  • Generic chart editor test: Opens the first chart from the list view instead of searching for a specific chart name

Screenshots captured (saved to docs/static/img/screenshots/):

  1. gallery.jpg — Chart type gallery (viz gallery component)
  2. dashboard.jpg — World Bank dashboard (full wrapper)
  3. explore.jpg — Chart editor / explore view (full page)
  4. sql_lab.jpg — SQL Lab with query results (full page)

Tests are gated behind INCLUDE_EXPERIMENTAL=true and run in CI's experimental shadow mode (continue-on-error: true).

Also updates README to reference dashboard.jpg instead of slack_dash.jpg to match the new screenshot.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

N/A — these tests generate screenshots, they don't change UI.

TESTING INSTRUCTIONS

  1. With a running Superset instance and example data loaded: 
    cd superset-frontend
INCLUDE_EXPERIMENTAL=true npx playwright test experimental/docs/
  2. Verify screenshots are written to docs/static/img/screenshots/
  3. In CI, tests run automatically via the superset-playwright.yml workflow with both empty and /app/prefix base paths

ADDITIONAL INFORMATION

@rusackas @claude
feat(playwright): add documentation screenshot tests
f8148cc 
Add Playwright tests that capture UI screenshots for the docs site and
README. Uses reliable example data (World Bank dashboard), relative URLs
for APP_PREFIX support, and element visibility waits instead of
networkidle to avoid WebSocket timeouts in SQL Lab.

Captures: chart gallery, dashboard, chart editor (explore), and SQL Lab.
Updates README to reference the new dashboard.jpg filename.

Based on #36297 by @jfrag1.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@dosubot dosubot bot added the doc Namespace | Anything related to documentation label Jan 27, 2026
@github-actions github-actions bot removed the doc Namespace | Anything related to documentation label Jan 27, 2026
@netlify
Copy link
netlify bot commented Jan 27, 2026 •
edited
Loading

✅ Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit f5b6e01
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/69799abbc6ac850008a990ea
😎 Deploy Preview https://deploy-preview-37494--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

bito-code-review[bot]
bito-code-review bot reviewed Jan 27, 2026
View reviewed changes
Copy link
Contributor
@bito-code-review bito-code-review bot left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review Agent Run #01afcd

Actionable Suggestions - 1
  • superset-frontend/playwright/tests/experimental/docs/docs-screenshots.spec.ts - 1
Review Details
  • Files reviewed - 2 · Commit Range: f8148cc..f8148cc
    • superset-frontend/playwright/tests/experimental/docs/docs-screenshots.spec.ts
    • superset-frontend/playwright/utils/urls.ts
  • Files skipped - 1
    • README.md - Reason: Filter setting
  • 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

AI Code Review powered by Bito Logo

@rusackas @claude
fix(playwright): handle SQL Lab tab creation and update screenshots
79d9bc8 
Fix SQL Lab test to create a new query tab when SQL Lab opens without
one, skip database selection when already pre-selected, and use the
"N rows" badge as the results indicator instead of ReactVirtualized.

Update documentation screenshots with fresh captures from local run.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas rusackas marked this pull request as draft January 27, 2026 18:30
@rusackas rusackas added review:draft review:checkpoint Last PR reviewed during the daily review standup labels Jan 27, 2026
@github-actions github-actions bot added the doc Namespace | Anything related to documentation label Jan 27, 2026
rusackas and others added 5 commits January 27, 2026 11:17
@rusackas @claude
feat(playwright): polish documentation screenshots
bb509b2 
Dashboard: Switch to Sales Dashboard with loading indicator wait.
Explore: Wait for chart loading spinners to clear before screenshot.
SQL Lab: Select birth_names table to show schema in left panel, write
multi-line SELECT with explicit columns, dismiss tooltips for clean shot.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas @claude
fix(docs): capture full page for dashboard screenshot and wait for ch…
3da670c 
…art render

- Switch from dashboardWrapper.screenshot() to page.screenshot({ fullPage: true })
  so the global navigation bar is included in the dashboard screenshot
- Add explicit wait for chart content (canvas or SVG) to appear inside
  chart holders, not just for loading spinners to disappear

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas @claude
docs: regenerate screenshots with dashboard fix
89e2332 
Updated screenshots from local Playwright run:
- Dashboard now shows global nav bar and fully rendered charts
- All 4 screenshots (gallery, dashboard, explore, sql_lab) regenerated

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas @claude
fix(playwright): wait for table option before selecting in SQL Lab test
0301cb3 
Wait for the birth_names dropdown option to be visible before pressing
Enter, fixing a race where the keyboard input fired before the dropdown
finished filtering. Also bump col-name timeout to 15s for slower servers.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas @claude
fix(playwright): replace waitForTimeout with proper async waits in do…
fb05601 
…cs tests

Replace all waitForTimeout calls with proper Playwright assertions:
- Dashboard: await filter bar visibility via data-test attributes instead of 2s sleep
- Explore: await canvas/svg rendering inside slice container instead of 2s sleep
- SQL Lab: await tooltip dismissal via role assertion instead of 500ms sleep
- SQL Lab: use keyboard Enter with DOM-attached check for AntD virtual list
- Gallery: remove zoom that caused element stability timeout
- SQL Lab: increase test timeout to 90s for multi-step interaction

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
rusackas and others added 2 commits January 27, 2026 21:12
@rusackas @claude
fix(docs): remove CSS zoom from dashboard screenshot to eliminate whi…
f5b6e01 
…tespace

The body zoom: 0.8 shrunk content to 80% but the document retained full
viewport dimensions, creating empty space on the right and bottom of the
fullPage screenshot.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas @claude
style: apply prettier formatting to docs screenshot test
38008ce 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rusackas rusackas marked this pull request as ready for review January 28, 2026 18:07
@rusackas rusackas requested a review from sadpandajoe January 28, 2026 18:07
@dosubot dosubot bot added the change:frontend Requires changing the frontend label Jan 28, 2026
@rusackas rusackas marked this pull request as draft January 28, 2026 18:10
@rusackas rusackas removed the review:checkpoint Last PR reviewed during the daily review standup label Jan 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sadpandajoe sadpandajoe Awaiting requested review from sadpandajoe

1 more reviewer

@bito-code-review bito-code-review[bot] bito-code-review[bot] left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

change:frontend Requires changing the frontend doc Namespace | Anything related to documentation preset-io review:draft size/L

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@rusackas
0