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
Accessibility testing
Performance testing
User testing
HTML validation
Visual Regression testing
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": "<img src="\"/img/rottnest-lighthouse-2500.jpg\"">",
"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": "<img src="\"/img/rottnest-lighthouse-2500.jpg\"">",
"selector": "html > body > header > img","context": "<img src="\"/img/rottnest-lighthouse-2500.jpg\"">",
"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 backstopjsbackstop initCan yield false results
- Linting ✅
- Accessibility Testing ✅
- Visual Regression Testing ✅
🎉
kapers.dev/fender-test-sydney-2020
Thank You 👏
Wait...So I have to test the front end too?
Test clicker