metabuilder/frontends/pastebin/tests/e2e/mobile-responsive.json

{
  "$schema": "../../../schemas/package-schemas/playwright.schema.json",
  "package": "pastebin",
  "version": "1.0.0",
  "description": "Mobile responsiveness tests including touch targets, overflow, and layout",
  "suite": "Mobile Responsive",
  "tests": [
    {
      "name": "touch targets meet minimum size on mobile",
      "steps": [
        { "action": "setViewport", "width": 390, "height": 844 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "evalExpect", "name": "getTouchTargetViolations", "args": { "selector": "button,[role='button']", "minSize": 40 }, "assertion": { "matcher": "toHaveLength", "count": 0 } }
      ]
    },
    {
      "name": "no horizontal overflow on 375px",
      "steps": [
        { "action": "setViewport", "width": 375, "height": 812 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "networkidle" },
        { "action": "evalExpect", "name": "hasHorizontalScroll", "args": { "selector": "body" }, "assertion": { "matcher": "toBeFalsy" } }
      ]
    },
    {
      "name": "no horizontal overflow on 390px",
      "steps": [
        { "action": "setViewport", "width": 390, "height": 844 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "networkidle" },
        { "action": "evalExpect", "name": "hasHorizontalScroll", "args": { "selector": "body" }, "assertion": { "matcher": "toBeFalsy" } }
      ]
    },
    {
      "name": "content renders on 320px narrow viewport",
      "steps": [
        { "action": "setViewport", "width": 320, "height": 568 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "expect", "role": "main", "assertion": { "matcher": "toBeVisible" } }
      ]
    },
    {
      "name": "settings page usable on mobile",
      "steps": [
        { "action": "setViewport", "width": 390, "height": 844 },
        { "action": "navigate", "url": "settings" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "expect", "selector": "main,body", "assertion": { "matcher": "toBeVisible" } }
      ]
    },
    {
      "name": "snippet manager visible on mobile",
      "steps": [
        { "action": "setViewport", "width": 390, "height": 844 },
        { "action": "navigate", "url": "" },
        { "action": "waitForSelector", "selector": "[data-testid='namespace-selector'],[data-testid='snippet-manager-loading']", "timeout": 10000 },
        { "action": "expect", "selector": "[data-testid='namespace-selector'],[data-testid='snippet-manager-loading']", "assertion": { "matcher": "toBeVisible" } }
      ]
    },
    {
      "name": "navigation accessible on mobile",
      "steps": [
        { "action": "setViewport", "width": 390, "height": 844 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "expect", "selector": "nav,header,a", "nth": 0, "assertion": { "matcher": "toBeVisible" } }
      ]
    },
    {
      "name": "form inputs usable on mobile",
      "steps": [
        { "action": "setViewport", "width": 390, "height": 844 },
        { "action": "navigate", "url": "settings" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "expect", "selector": "input", "nth": 0, "assertion": { "matcher": "toBeVisible" } }
      ]
    },
    {
      "name": "tablet layout renders",
      "steps": [
        { "action": "setViewport", "width": 768, "height": 1024 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "expect", "role": "main", "assertion": { "matcher": "toBeVisible" } }
      ]
    },
    {
      "name": "no horizontal overflow on narrow mobile",
      "steps": [
        { "action": "setViewport", "width": 360, "height": 640 },
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "networkidle" },
        { "action": "evalExpect", "name": "hasHorizontalScroll", "args": { "selector": "body" }, "assertion": { "matcher": "toBeFalsy" } }
      ]
    }
  ]
}