Tool Responsive Test
Category: Visual Testing · Tier: All
Test a page across viewport sizes and report layout issues per size: overflow, small text, small touch targets, truncation and hidden content. The MCP counterpart of the CLI's cbrowser responsive.
When to Use
Visual testing in CBrowser uses Wasserstein optimal transport theory for robust comparison. Smart baselines compute the barycenter (optimal average) of multiple captures. Transport maps show where visual content moved. Attention analysis models persona-specific saliency.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
| url | string | Yes | URL to test |
| viewports | array | No | Size presets to test (default: mobile, tablet, desktop) |
| wait | integer | No | Milliseconds to wait before each capture (the CLI's --wait) |
| waitFor | string | No | CSS selector to wait for before each capture (the CLI's --wait-for) |
| sensitivity | string | No | Comparison sensitivity: low, medium or high (the CLI's --sensitivity) |
Size presets
| Preset | Size | Emulates a device |
|---|---|---|
mobile-sm |
320x568 | Yes |
mobile |
393x852 | Yes |
mobile-lg |
414x896 | Yes |
mobile-xl |
428x926 | Yes |
tablet-sm |
768x1024 | Yes |
tablet |
834x1194 | Yes |
tablet-lg |
1024x1366 | Yes |
desktop-sm |
1280x800 | No |
desktop-md |
1440x900 | No |
desktop |
1920x1080 | No |
desktop-lg |
1920x1080 | No |
desktop-xl |
2560x1440 | No |
Since 20.0, mobile is 393x852 and tablet is 834x1194, the same sizes as the mobile and tablet devices everywhere else. The old sizes keep names: 768x1024 is tablet-sm and 1440x900 is desktop-md. The old 375x667 mobile is gone.
A mobile or tablet preset emulates its device: user agent, touch and pixel ratio, at the preset's size. Desktop presets set the size only. No preset turns on reduced motion, so the phone and desktop shots differ only in what the page does for each device. Pages that adapt to touch or the user agent render differently than they did before 20.0.
Example
Test this page at mobile, tablet, and desktop viewports
Check the checkout at mobile-sm and
tablet-sm, waiting for the order
summary
→ viewports: [
"mobile-sm", "tablet-sm"
],
waitFor: "#order-summary"
Tips
- Visual testing uses Wasserstein optimal transport for robust comparison
- Smart baselines handle non-deterministic rendering automatically
- Transport maps show WHERE content moved, not just that it changed
Research
- Klein & Frintrop (DAGM 2012) — W₂ saliency on CIE-Lab distributions
- Agueh & Carlier (SIAM 2011) — Barycenters in Wasserstein space
- Taylor & Fiebach (2025) — OT predicts neural activity at <225ms
Related
- Tools Overview — All 131 tools by category
- Visual & Performance Tools — Full visual testing docs