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?

Why test?

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
https://eslint.org/docs/rules

							npm install stylelint
https://stylelint.io/user-guide/rules

Accessibility Testing

Web Content Accessibility Guidelines
WCAG

https://www.w3.org/WAI/standards-guidelines/wcag
https://pa11y.org

							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
http://squizlabs.github.io/HTML_CodeSniffer/Standards/WCAG2/

						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

https://github.com/garris/BackstopJS
  • Linting ✅
  • Accessibility Testing ✅
  • Visual Regression Testing ✅

🎉

https://youtu.be/DHPX2ShCxBc
https://24ways.org/2019/twelve-days-of-front-end-testing/
https://www.javascriptjanuary.com/blog/getting-started-with-front-end-testing

kapers.dev/fender-test-sydney-2020

Thank You 👏