Website + WebApp QA & Testing Procedures

This is intended to be a brief overview of some of the things you need to do think about when doing QA/testing a website or web application. It is aimed more at the front-end than the back-end, and is not comprehensive (but should still serve as an excellent guide).

Also be sure to see the Website Launch / Relaunch Checklist.

• First things first: have someone (preferably a fresh set of eyes) click around the site or app and look for anything broken or strange. Possible items include:
  • Broken or mis-sized images (foreground & background)
  • Links that don't work (either because they go to the wrong place or because the Javascript they call isn't working).
  • Incorrect copy/information. No type-os, missing information, 'lorem ipsum' greek text, etc.
  • Interactive functionality working. 'Interactive functionality' is a broad term, but your tester should test all forms and data entry areas on the site/app to make sure they don't generate errors with standard information. They should also test any Javascript functionality to make sure it works as desired.
  • Back/forward button testing. If you're building an app, you must test what happens when you use the back/forward buttons on the browser. Using these can often result in duplicate data entries and all sorts of other issues if you're not careful coding.
• Make sure emails still work. A lot of sites have email images & copy in an 'emails' directory, e.g. /emails/acme_annoucement_29_march_2011/. If you're doing a relaunch of your site, make sure this directory makes it over.

• You'll need to test the site/app on a variety of browsers. You should generally perform the same tests you did above, but in each of the popular browsers.
• As of October 2011, I recommend: Firefox [Latest], Safari [Latest], IE 7, IE 8, IE 9 & Google Chrome [Latest]. By [Latest] I mean whatever version is the latest one being pushed out to users via the auto-update functionality. IE 6 and Firefox 3.6 should be tested from an 'its readable' standpoint, but not a 'pixel perfect' standpoint.
• Make sure layout looks good at a variety of monitor resolutions, from 1024×768 up to whatever the max resolution you have available is. The Web Developer Toolbar for Firefox can help with this.

• Turn off Javascript and browse the site. Can you get everywhere? Does anything look really weird? Should it be fixed?
• Turn off CSS and do the same thing (or browse the site in a text based browser). Folks with screen readers will be browsing your site this way: does it at least make sense?
  • Print the site. Does it look good? Do you need a print.css aimed at printing the website?
• Clear & disable cookies. Does your site still work? If you need cookies to use your site, are the 'cookies disabled' error messages at least helpful?

• See Search Engine Optimization Basics for full details on SEO, but at a minimum you should make sure each page has:
  • Correct title tag
  • Correct meta tag(s)
  • Proper SEO page structure (e.g. title information is in <h1></h1> tags, etc.)
  • ALT tags on images
• URL structure is good (e.g. you're using SEO-friendly URLs)
• If you're relaunching, you have redirects from any old URLs to new URLs.
• Make sure you have a sitemap.xml file.
• Make sure you have a robots.txt file.

• Is Google Analytics installed? If you look at the Net tab in Firebug, do you see GA calls being made? In order to test GA, you have to have your site on a real domain (e.g. http://staging.mywebsite.com/ ). GA doesn't make calls if the site is local-only (e.g. http://mywebsite/ )
• Is there any advanced Google Tracking you need to implement? Tracking events or virtual pageviews?
• Will Google Analytics goals or e-commerce tracking change? Obviously you won't want to do this until launch, but you should be prepared to make the changes as soon as you go live.
• Do you need to do any other tracking/tagging? Adwords? DoubleClick tags?

• Test to make sure that data validation on data entry areas is working properly. Truly doing this properly is a big job, but at a minimum you should:
  • Enter non-allowed characters and data for each form entry. As a simple example, enter a letter in a field that should only take numbers. Of course, there's a lot more too it than that; search Google for details.
  • If you're using AJAX, manually make AJAX calls with bad data and see if you can get anything to break.
  • Turn off Javascript and submit your forms. Does the backend properly validate data as well, or did you do it in Javascript only?

• Make sure you do a XSS (cross site scripting) security test. Search Google for info on how to do this if you don't know how.

• Test that characters are properly encoded before being stored in the DB, and properly decoded when coming out of the DB.
• Test for SQL injection vulnerabilities.
• Turn off your database. Does your app error gracefully if the DB is down?

• Using a program such as Integrity or Xenu Link Sleuth, test the site for broken links.

• If you're pushing a new version of a site or app, make sure that any old pages are properly redirected with a 301 redirect (or other technique if appropriate).
• The easiest way I've found to find out what is out there is to search Google for site:mysite.com. Click on each link (replacing the URL of your live server with the URL of your dev server) and make sure it goes where you want it to.

• Test that you (or someone) gets an email for every address on the site. Note that is not just good enough to send a message and make sure it doesn't bounce; you need to send a message that says 'please reply' and then followup to make sure you actually get a reply.
• Call every phone number on the site and make sure it is correct.

• This is optional, but you may want to make sure your pages validate against the W3C Validator.
• Run PHP with errors set on E_ALL. That will make sure you don't have any E_NOTICE level warnings. Optionally, run it on E_STRICT