metabuilder/frontends/pastebin/tests/e2e/css-styling.json

{
  "$schema": "../../../schemas/package-schemas/playwright.schema.json",
  "package": "pastebin",
  "version": "1.0.0",
  "description": "CSS and styling validation tests for computed styles and layout properties",
  "suite": "CSS & Styling",
  "tests": [
    {
      "name": "buttons have consistent border radius",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForSelector", "selector": "[data-testid='navigation-toggle-btn']", "timeout": 10000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "[data-testid='navigation-toggle-btn']", "property": "border-radius" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "primary text color is set",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForSelector", "selector": "body", "timeout": 3000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "body", "property": "color" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "font family is applied to body",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "body", "property": "font-family" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "background color is set on body",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "domcontentloaded" },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "body", "property": "background-color" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "buttons have cursor pointer",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForSelector", "selector": "[data-testid='navigation-toggle-btn']", "timeout": 10000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "[data-testid='navigation-toggle-btn']", "property": "cursor" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "heading font weight is bold",
      "steps": [
        { "action": "navigate", "url": "settings" },
        { "action": "waitForSelector", "selector": "h1,h2,h3", "timeout": 5000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "h1,h2,h3", "property": "font-weight" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "input elements have border styling",
      "steps": [
        { "action": "navigate", "url": "settings" },
        { "action": "waitForSelector", "selector": "input", "timeout": 5000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "input", "property": "border" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "navigation has background color",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForSelector", "selector": "nav,[role='navigation'],header", "timeout": 5000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "nav,[role='navigation'],header", "property": "background-color" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    },
    {
      "name": "no horizontal overflow on body",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForLoadState", "state": "networkidle" },
        { "action": "evalExpect", "name": "hasHorizontalScroll", "args": { "selector": "body" }, "assertion": { "matcher": "toBeFalsy" } }
      ]
    },
    {
      "name": "main layout has display property set",
      "steps": [
        { "action": "navigate", "url": "" },
        { "action": "waitForSelector", "selector": "[data-testid='main-content']", "timeout": 10000 },
        { "action": "evalExpect", "name": "getComputedStyle", "args": { "selector": "[data-testid='main-content']", "property": "display" }, "assertion": { "matcher": "toBeTruthy" } }
      ]
    }
  ]
}