I’ve always used a developer QA checklist, when I’ve worked on web projects. This article covers some basics like fixing markup errors and console errors. You also need to consider some other things before passing it onto a QA team.
Markup Validation
- I run web pages through the W3C validator (obviously). Fixing markup errors can also fix bugs.
- Checking code is easier with automated tools. A couple of my favourites are stylelint and jshint. Before the miracle of task automation, I regularly made use of http://csslint.net/
Optimisation
- GTMetrix was my go-to speed testing tool, but nowadays lighthouse (built right into chrome dev tools) is the best place to go.
- My automation workflow uses Kraken.io, which takes care of image optimisation. But for intense usage, there’s a price plan. There’s also the free web optimiser: https://kraken.io/web-interface.
Accessibility Testing
- I keep on top of accessibility with the wave extension in chrome: http://wave.webaim.org/. I’ve also recently switched to siteimprove.
- I try to make the distinction between buttons that are used for buttons, and links are for actual links. This relates to how they can be interacted with on the page.
- I check that no element has non-textual content. I use aria-attributes where applicable.
- All meaningful images should have an alt attribute, formatted correctly. This can be checked at https://axesslab.com/alt-texts/.
- If AAA accessibility is required, colours should have enough contrast.
Cross Browser Testing
- I test the last major version of all browsers. Unless specifically required, I don’t cater to older browsers (bye bye IE11!). Usually the code degrades gracefully, and includes some basic polyfills that trigger for older browsers. This includes transpiling ES6 javascript for older browsers.
- I test future proofing with Chrome Canary & Firefox Nightly.
- Websites are against screen widths 320, 480, 768, 960, 1024 and 1220+ pixels.
- Is everything touchable on mobile devices? Do gestures work as expected? Is the page reactive or slow?
- Do things break when changing orientation of a phone/tablet?
- Browserstack is a web tool that I’ve used occasionally, but I’ve found that having a physical device to test on is generally better. One benefit of using browserstack however, is the ability to use dev tools within a device (though it’s clunky to use at times).
Check assets
- For larger images I use some form of lazyload, implemented via a front end frameworks javascript.
- I use the picture element and a combination of src/srcset for retina/responsive images
- Obviously, checks are made for 404s caused by missing files.
Form Testing
- Input fields need to be the correct type, have labels (or titles), and should be accessible.
- Test form validation should work correctly, and required fields should be set.
Search Engine Optimisation
- There should be at least one H1 on the page, and it should have unique content.
- Links without proper link text must have a descriptive title attribute, for SEO as well as accessibility.
- Meta titles and descriptions should be unique and valid.
There’s a lot more that could be added to a developer QA checklist, but it’s a good starter for a developer to lighten the load for any QA team. Giving them less to do, makes for less stressed developers!