Getting Started with Front End Testing — JavaScript January

  • Home
  • Blog
  • Link
  • Getting Started with Front End Testing — JavaScript January
nc efi placeholder

You can also check multiple pages and screen sizes and run multiple tests by adding to the promise array in your test function. You can define the viewport for each test (to test various screen sizes) different pages of your application.

const results = await Promise.all([
        pa11y(`http://localhost:65519`, {
            browser: browser,
            standard: 'WCAG2AAA',
            screenCapture: `$/results/pa11y_home_desktop.png`,
            viewport: {
                width: 1280,
                height: 1024,
            },
        }),
        pa11y(`http://localhost:65519`, {
            browser: browser,
            standard: 'WCAG2AAA',
            screenCapture: `$/results/pa11y_home_mobile.png`,
            viewport: {
                width: 320,
                height: 480,
                isMobile: true,
            },
        }),
        pa11y(`http://localhost:65519/blog-post`, {
            browser: browser,
            standard: 'WCAG2AAA',
            screenCapture: `$
        ),
    ])

Visual Regression Testing

Even if you’re the only developer working on a project, it’s still easy to make code changes that bleed into other areas of your application (I’ve been know to do that at times 😬). Visual regression testing can help stop that, and highlight any areas of your application that are visually different from before.

BackstopJS is a good tool for running this, because it gives you starter config so you can hit the ground running. If you install backstop globally (npm install -g backstopjs), you can run their initialization command (backstop init) in your project folder and it’ll create all the files for you, including the backstop.json config file.

{
  "id": "backstop_default",
  "viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
      "label": "BackstopJS Homepage",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "http://localhost:65519",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold": 0.1,
      "requireSameDimensions": true
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": [
    "browser"
  ],
  "engine": "puppeteer",
  "engineOptions": {
    "args": [
      "--no-sandbox"
    ]
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

Again, if you’re using WSL, add the executable path the to config options in backstop.json

"engine": "puppeteer",
  "engineOptions": {
    "args": [
      "--no-sandbox"
    ],
    "executablePath": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  },

Run the test using the backstop test command and it will save the results in the backstop_data/bitmaps_test folder under a separate folder for each test and launch a HTML report with the results. The first time you run the test it will fail as it doesn’t have anything to compare it to, set the default screenshots by running backstop approve and run the test again.

Source link

Leave A Reply