My ever-evolving checklist for QAing website redesigns, new features, and bug fixes.
1. Frontend Functionality:
- Test all buttons and clickable elements
- Pay attention to hover states and CSS cursors
- Test forms
- Do they submit successfully?
- Do they accept special characters (* ^ - ~)?
- Is the intended data making it to its destination?
2. Backend Functionality:
- Test CMS authorability
- Does rich text output correctly?
- Do special characters (* ^ - ~) display correctly?
- Do different module options work?
- Verify analytics and event tracking implementation
- Are the necessary tracking scripts present?
- Are the necessary events/goals being tagged and tracked properly?
3. Design and Compatibility:
- Check alignment and spacing of webpage elements
- Check that all intended fonts and styles are loaded
- Check that font headings follow the intended design/hierarchy
- Check less obvious pages and elements including popups and modals
- Ensure the design is consistent with mockups
- on Desktop
- on Mobile
- on Tablet
- Also review...
- In different screen resolutions
- On different browsers (Chrome, Firefox, Edge, etc.)
- On different operating systems (Android, Apple)
4. Accessibility:
- Check that the website is compatible with screen readers
- Ensure color contrast is sufficient for users with visual impairments
- Ensure the website is navigable by keyboard alone
I use the WAVE browser extension to automate this.
5. SEO:
- Check for presence and proper use of header tags (H1, H2, H3, etc.)
- Ensure all images have alt tags
I use the Ahrefs SEO Toolbar to quickly check these.
6. Performance:
- Check the website's load time
- Check Core Web Vitals
I use Lighthouse in Chrome DevTools to automate this.
