Skip to content

Instantly share code, notes, and snippets.

@ambienttraffic

ambienttraffic/qa-handbook.md

Last active September 14, 2020 01:52
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ambienttraffic/8aeca8e092e078a797c3 to your computer and use it in GitHub Desktop.
Save ambienttraffic/8aeca8e092e078a797c3 to your computer and use it in GitHub Desktop.
Download ZIP
Serious Eats QA Handbook
Raw
qa-handbook.md

Serious Eats QA Handbook

Help us find and squash bugs!

Take a look at the QA spreadsheet. Here’s a bit.ly in case you’re using it on a mobile device: http://bit.ly/1Nt6q1W Questions? Throw it into the public #qa Slack channel.

In the “Browsers/OS matrix” tab, find the Browser/OS you’ve been assigned. Either fire up BrowserStack (directions below) or use the actual device. Look at the “URLs” tab in the spreadsheet. URLs are organized by “Type”. You can mix up the URLs in the list, but you must complete at least the following:

  • 2 Landing pages
  • 5 Recipes
  • 5 Stories (non-legacy)
  • 5 Stories (legacy)
  • 3 Slideshows
  • 1 Utility
  • 1 Search
  • 1 Collection
  • 1 Policy
  • 1 Talk
  • 1 Tag/Category

In choosing Stories and Recipes, be sure to check URLs that have NearMe or Amazon widgets or special formatting elements. Those are listed to the right of the URLs.If you have more time, please check other URLs in that list!

What you’re looking for

Visual Elements

Generally you’re making sure the design is consistent and things are loading properly. For instance, take note of:

  • Consistent visual treatment across
  • Elements that seem out of place/the wrong size
  • overlapping text
  • text is unreadable
  • boxes that are the wrong size
  • fonts that aren’t rendering
  • ads that are missing or the wrong size
  • elements that should be clickable/tappable that aren’t
  • elements aren’t loading
  • spacing that seems weird/off

If you are unsure of how something should look or if something is a bug, take a look at the “Individual Templates”, “Aggregate Templates” or “Global Page Elements” tabs. These tabs contain descriptions of what elements should look like and how they should function on mobile, tablet and desktop. If you’re in doubt, screenshot it and file it!

Try to be as descriptive and specific as possible when you’re filing a bug. The more specific you can be, the easier it’ll be to find it. Also try reloading the page and make sure you can reproduce it. Describe the steps you’d take to reproduce it.

Actions

You will also need to test interactions listed under the “Actions” tab. This only needs to be done on two URLs: one Story and one Recipe. If you need a unique test email, you can append a “+” to your serious eats email address. those emails will still go to your serious eats address. For instance:

Are valid, unique addresses.

Desktop Printing

For anyone testing desktop browsers: please trying hitting the “print” button on multiple Stories and Recipes and quickly look at the print preview. if anything looks wonky please submit a bug!

When You're Finished

When you’ve reached a stopping point or you’ve completed your round of testing, please put a message in the #qa Slack channel with:

  • the OS and Device you’ve completed
  • whether you used BrowserStack or a real device
  • how to get to your screenshots if you were using a real device

Device Directions

If you’re using an actual device, you’ll want to have your laptop/desktop machine next to you to submit bugs.

To submit a bug, use this form: https://seriouseats.formstack.com/forms/redesign_qa_bug_report

Take a screenshot of every bug. You can wait until the end of the session, gather up your screenshots and Dropbox them to me, no need to upload the screenshot via the form.

In the form, be as descriptive as possible! If you were performing an action, tell me the steps I’d have to follow in order to reproduce the bug.

BrowserStack Directions

You DO NOT need to use the form listed under “Device Directions” if you are using BrowserStack.

  • Log in to BrowserStack.
  • Click on “Live” in main navigation. You should see a list of operating systems on the left and devices on the right.
  • Find the OS and Device that you’ve been assigned. Click on the name of the device (“iPad Mini”, for instance.)
  • The virtual machine will start up and you’ll see the device screen. Use the QA spreadsheet to see URLs. You can paste a url into the address bar at the top of the device screen.
  • To scroll on mobile and tablet devices, click and drag on the screen vertically to simulate swiping.
  • Notice the tool bar to the right. When you find a bug, click on the camera icon. This opens up the “Screenshot” tool.
  • Annotate the bug as necessary - circle, add text/arrows, etc.
  • Click on “Save”.
  • Repeat this process as you find bugs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment