Wait...
So I have to test the front end too?
Wait...
So I have to test the front end too?
Wait...
So I have to test the front end too?
What about the front end?
The front end matters too
So I'm a testing expert?
No.
So why me?
Linting
Automated checking for programmatic and stylistic errors
npm install eslint
npm install stylelint
Accessibility Testing
Web Content Accessibility Guidelines
WCAG
npm install pa11y
"code": "wcag2aa.principle1.guideline1_1.1_1_1.h37",
"type": "error",
"typecode": 1,
"message": "img element missing an alt attribute. use the alt attribute to specify a short text alternative.",
"context": "",
"selector": "html > body > header > img",
"runner": "htmlcs",
"runnerextras": {}
"code": "wcag2aa.principle1.guideline1_1.1_1_1.h37",
"type": "error",
"typecode": 1,
"message": "img element missing an alt attribute. use the alt attribute to specify a short text alternative.",
"context": "",
"selector": "html > body > header > img",
"context": "",
"selector": "html > body > header > img",
"code": "wcag2aa.principle1.guideline1_1.1_1_1.h37",
"message": "img element missing an alt attribute. use the alt attribute to specify a short text alternative.",
1_1.1_1_1.h37
pa11y('http://my-testing-blog.local', {
actions: [
'click element #tab-1',
'wait for element #tab-1-content to be visible',
],
viewport: {
width: 320,
height: 480,
ismobile: true
},
standard: 'wcag2aaa',
headers: {
'content-type': 'application/json'
},
method: 'post',
postdata: '{"foo": "bar", "bar": "baz"}'
});
await Promise.all([
pa11y(`http://my-testing-blog.local`, options),
])
await Promise.all([
pa11y(`http://my-testing-blog.local`, options),
pa11y(`http://my-testing-blog.local/blog-post`, options)
])
Visual Regression Testing
npm install -g backstopjs
backstop init
Can yield false results
🎉
kapers.dev/fender-test-sydney-2020
Thank You 👏