Jeanne: How to Test Your Website Like a Professional Software Developer

checklist-1622517_640

Image by Shahid Abdullah from Pixabay

A few weeks ago, Eight Lady Jilly debuted her new website. Because my previous life was in software development, before it went live I offered to create a test plan and test the site for her. Being British, she’s very polite, so she accepted.

It’s a beautiful site and was delivered in very good working order. Even so, there was some value in creating a test plan that laid out all the things she wanted the site to do and how each of those things gets triggered.

My own site, in contrast, was a little buggy when I got it, so my (very similar) test plan was very useful both in nailing down how I wanted the site to work and in communicating the problems with my developer. The plan allowed me to tell my developer both how I expected the site to work and how it was actually working, and it let me keep track of what had been fixed.  All of this cut down on the time required to get the site cleaned up and ready to go live.

Since some of our readers may have reason to want to build a website, I thought I’d share a bit of the the plan so you can see how to put one together.

P/F Case # Page Function Function Function Action Expected Result Actual Result
P 1 Home Page appears per agreed-upon design
P 1.0.1 Jilly Wood Hover Clickable
P 1.0.2 Click Refresh Home Page Refreshes Home page. Is this what you want this to do?
P 1.1 Menu Buttons Upper right placement
P 1.1.1 Home Click Refreshes Home page
P 1.1.2 Books Click Displays drop down
P 1.1.2.1 All Books Click Links to Books page
P 1.1.2.2 TSOP Click Links to TSOP page
P 1.1.3 Meet Jilly Click Links to Meet Jilly page
P 1.1.4 Secrets & Treats Click Links to Secrets & Treats page
P 1.1.5 News & Events Click Links to News page
P 1.1.6 Blog Links to Blog page Does this auto-populate or will you have to load each entry?
P 1.1.7 Contact Links to Contact page
P 1.2 Read Now Click Links to Books page
P 1.3 Coming Soon Hover Display only
F 1.3.2 Read More Click Links to TSOP page Links to the Books page. 

The first column is used to denote whether the test case passed or failed when executed.

The second column is just a unique number assigned to the test case to make it easier to communicate with the developer.

The third column is the page to be tested (Home, Books, Meet Jilly, Secrets & Treats, News & Events, Blog, Contact).

The fourth column is the major function to be tested (e.g. Menu Buttons, Social Media icons, etc.).  If your software is built with good design principles, reusing the code rather than coding each page separately, it should only be necessary to test these once, but it’s not a bad idea to test at least a few of them from different pages to ensure that’s true.

The fifth column is the sub-function to be tested (e.g. within the Social Media buttons, the Instagram button or the Twitter button.)

The sixth column lets you break the function down even further, if necessary. For example, on the Home page, within the Menu Buttons, there’s a Books button. If you hover over the Books button, two options appear: All Books and The Seeds of Power, which will be Jilly’s first book (and which was a Golden Heart Finalist!). You’ll want to break each function down to it’s smallest component to ensure you’re testing everything.

The seventh column is the Action to be taken, generally Click or Hover.

The eighth column is, to my mind, the single most important one. It lets you document how you expect your website to work. I can’t overemphasize the value of this information, not just for communicating with the developer, but for letting you make it really clear in your own mind what you’re expecting.

Columns 2-8 should be filled out before you ever start testing. In fact, if you have the expertise to clearly visualize all the functions of your website before it’s built, it would be a good way to communicate your expectations to your developer.

The final column records what actually happened when you executed the test case. As you can see, in the final test case listed above, I expected that the “Read More” button in the Coming Soon section at the bottom of the Home page would link directly to The Seeds of Power page. Instead, it linked more generally to the Books page, where The Seeds of Power was listed at the top. If the Books page will be set up to always feature the book that corresponds to the Coming Soon title, this isn’t a problem. If, however, the Books page doesn’t always list the “Coming Soon” book at the top, it’s not always going to take the website user where they expect to go.

Like a good tester, I left that to Jill and her developer to work out.

Once all the bugs have been discovered and fixed, it’s a good idea to run back through the entire test plan from the top, testing each function against the final code. This is because it’s really easy to break something while you’re fixing something else.

Do you have a website? If so, how did you test it?

5 thoughts on “Jeanne: How to Test Your Website Like a Professional Software Developer

  1. Just to say thank you for your help–I really appreciate it. I’m not a software person and wouldn’t have known how to create a test plan. I will next time (though hoping next time won’t be any time soon)!

  2. Having done both software development and end-user testing, I love this plan Jeanne. It’s a great way to make sure your site is actually working the way you want it to.

    • It is. Like I said, Jilly’s was in pretty good shape as delivered, but mine had a number of issues and this kind of plan was great teasing out all the problems, communicating what wasn’t working as expected and verifying, at the end, that nothing new got broken in the process of making the fixes.

Let Us Know What You Think

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s