Fintech • Healthcare • SaaS
Data-Rich Dashboard and Chart Testing
Validate that charts, tables, metrics, and data visualizations render correctly — even when the underlying data changes constantly.
Challenge
Traditional selector-based tests cannot meaningfully verify visual content like charts, graphs, and data tables. They can check that a canvas element exists, but not that the chart shows the right trend or that a table has the expected rows. Teams either skip testing dashboards entirely or resort to pixel-perfect screenshot comparisons that break on every data refresh. A broken dashboard erodes user trust faster than almost any other bug — because the data your users rely on for decisions is wrong.
Stably approach
Stably's AI assertions let you describe what correct output looks like in plain language — "the revenue chart shows an upward trend for the last 7 days" or "the orders table contains at least 5 rows with status, date, and amount columns." The AI evaluates the rendered page visually, not through DOM selectors, so tests remain stable even when chart libraries change or data refreshes. AI extraction can pull specific values from complex visualizations for downstream assertions.
What changes
Write "the chart trends upward" instead of parsing canvas pixels
Use toMatchScreenshotPrompt("the revenue chart shows a generally upward trend with data points for each month"). The AI looks at the rendered chart — not the underlying data or DOM — and evaluates whether the visual matches your description. No chart library internals to parse.
Extract specific numbers from complex dashboards with page.extract()
Call page.extract("Return the revenue, active users, and churn rate from the metric cards", { schema: MetricsSchema }). You get back typed data: { revenue: "$245K", activeUsers: 18432, churnRate: 2.3 }. Then assert: expect(metrics.churnRate).toBeLessThan(5).
Data refreshes do not break your tests
Yesterday's revenue was $45K and today it is $52K. Pixel-diff tests fail. Stably's assertion — "the revenue card shows a dollar amount and a percentage change indicator" — passes both days. Your test validates structure and correctness, not exact numbers.
Chart library migrations do not require rewriting tests
Switching from Chart.js to D3? The rendered output still shows a bar chart with monthly labels. Your AI assertion — "the bar chart displays 12 monthly bars with the current month highlighted" — works regardless of which library renders the canvas.
When this is the right fit
- Dashboard or analytics features have zero automated test coverage
- Chart bugs are discovered by customers reporting incorrect data
- Screenshot tests break constantly due to dynamic data
- Teams skip testing data visualizations because it is too difficult