Create a QA Checklist

Overview

In order for a QA person to test a site, they need a checklist to check against. This describes the functionality and qualities of the site, and links to relevant design mockups or documentation.

With the QA checklist, even someone totally unfamiliar with the project should be able to hop in and start testing it.

Each checklist contains three sections:

  • Components. This covers elements which appear on most pages, like the header, footer, etc.
  • Pages. This section includes information about specific routes on the site, like the About page, Team page, etc.
  • Behaviors. This section include information about general or invisible functionality, like how all accordions should work, or how Google Analytics should work.

Within each section, there should be a sub-section for each aspect of the site that needs to be tested. Here is an example table of contents for one of our checklists:

image

Components

Within each component subsection, include a screenshot of the component along with a list of characteristics it should have. For instance: "The header should always appear small, except on the homepage, where it should be twice the normal height".

Pages

For each Page, include a link to the design comp in both mobile and desktop, if you have it. Include the details of what should be on the page and any specific issues to look out for.

Behaviors

For any site functionality that is general and appears within multiple pages, add a subsection here. Describe how the functionality ought to work. For visible functionality, include a screenshot. For invisible functionality like Google Analytics, you may want to include a relevant link.

Who can do this

Anyone with a penchant for detail ๐Ÿ˜€

What you need

  • Knowledge of how the site in question works
  • Access to design mockups and/or documentation for the project
  • For some parts, technical knowledge of how the site works. This is not strictly necessary, but helpful.

Steps

Review example QA checklists

There is a growing repository of them here:

Specific example of an IMF checklist:

Create your draft

We suggest copy-pasting the format into a new notion page. In the future we will have template support for this. You can add it to the QA section of Notion. But if your project already has a notion page related to it, add it there instead.

Run through the components

Consider the siteโ€™s global components like the header and footer. List them out in subsections and create a checklist for each of them.

Run through the Pages

Take stock of all the discrete pages on the site. Typically, if there was a comp for a given page, it is important enough to list in the QA checklist. No need to list the Terms of Service page or whatever. Create a checklist for each and link to any relevant comps you have access to.

Run through Behaviors

Consider all the invisible behaviors that occur throughout the site. How are events tracked? How should keyboard navigation work? Are there any specific unusual things about the site that arenโ€™t isolated to one single element?

Share the checklist

Itโ€™s worth getting a quick pass by a QA person and the original designer before you consider a checklist done. Show it to them and get their feedback. If they are confused or lost reading it, make adjustments. When you ask them to formally QA the site, you will know the checklist is solid. Good work!