Getting Started with Front End Testing

igor-miske-JVSgcV8_vb4-unsplash+%282%29.jpg
Getting Started with Front End Testing 1

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.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
sendinblue