How To Create Your Own Front-End Website Testing Plan

How To Create Your Own Front-End Website Testing Plan

• By Lawrence Howlett


• November 24th, 2014


• DevicesTestingWeb Development


• 2 Comments

So, your designers and developers have combined a illusory front-end design, that a customer is gay with, and your pursuit now is to exam it. Your heart starts to sink: Think of all a browsers, all a inclination and all of these web pages you’ve got to test, not to discuss a iterations and bug fixes. You need a front-end contrast plan.

This essay shows we what to cruise when formulating a front-end contrast devise and how to exam well accross browsers, inclination and web pages.

Benefits Of A Front-End Testing Plan

• Clarity on project’s scope
  
  Knowing that browsers and inclination are within a project’s selection will assistance we to concentration and will revoke growth time and costs.


• Reduced customer friction
  
  This is finished by arrangement minute reports of finished exam plans.


• Confidence in deploying a project
  
  This comes from meaningful you’ve wholly tested a project.

In my experience, front-end website mockups are not extensively tested before they are handed over to a back-end growth team, a reason being time and check constraints. They’re customarily tested in a front-end developer’s browser of choice and maybe on their smartphone. So, when we came adult opposite a beast of a project, Dad Info¹, that has a ton of manageable page types, we indispensable a devise to methodically and well exam functionality and opening opposite platforms and opposite devices.

Dad Info is a not-for-profit website, built on Joomla, that aims to assistance fathers in need, whatever their situation. Last year, it helped over 500,000 dads and delivered 220,000 pages of information any month. we will be regulating Dad Info as a box investigate via to denote how to emanate and finish your possess front-end contrast plan.

Let’s Tool Up

Before removing started, you’re going to need to apparatus up. In this article, I’ll use a following toolkit to finish a contrast process:

• Asana²
  
  Used for bug-tracking and group management


• Chrome Developer Tools³
  
  Used for inspecting, debugging and profiling


• Windows’ Snipping Tool (or Shift + Command + 4 on a Mac)


• BrowserStack⁴
  
  Used to exam cross-browser functionality on mixed practical machines and emulators


• Devices
  
  Ideally, you’ll wish genuine devices. We have iPhone 4, 5 and 6; HTC One M8; Samsung Galaxy S5; Nokia Lumia 1520; Google Nexus 5; BlackBerry Curve; iPad 2; and Asus VivoTab Smart. If we don’t have these, we can use BrowserStack’s emulators.


• Google’s PageSpeed Insights⁵


• Pingdom Website Speed Test⁶


• Screenr⁷
  
  Web-based shade recording, with pity capabilities

What Are We Testing?

Because we’re front-end testers, a pursuit is to know accurately what we are testing. We competence not always find bugs per se; rather, we competence find that something isn’t operative as approaching or that a developer has misunderstood a functionality requirements. Having a minute selection adult front that all stakeholders have concluded too will assistance to equivocate some of these problems entirely. Later on in a Dad Info box study, we will go by a front-end selection to exam a home page.

Who Are We Testing For?

First of all, we will need to know your assembly and how they will be immoderate a website. Here are a few discerning questions we should always ask:

• What are a many popular devices your assembly uses?


• What operating system and browser combinations are many renouned among your audience?


• What connection speeds do they have (3G, 4G, broadband/fibre)?


• How tech-savvy are they? We can make a visualisation call here formed on a subject of a website, their inclination and their demographics.

For a Dad Info box study, a answers would be as follows:

• iPhone 5, iPad 2+, desktop (1024 pixels and up)


• Windows 7 Chrome, Windows 8 Chrome, Windows 8 Internet Explorer 10, OS X Safari, iOS 6 Safari


• Broadband and 4G (a lot of city workers)


• Our assembly is especially group between 18 and 35 years of age, sincerely tech-savvy, with a smartphone in their slot and an bargain of amicable media applications such as Facebook and Twitter.

So, how does this assistance us lift out a front-end exam plan?

Armed with this information, we can now mangle down a outrageous to-do list into segments that are applicable to a assembly and that prioritize a contrast methodology. For functionality, we know that inclination and browser to exam in; for performance, we know what connectors to exam on; and for usability, we know that a assembly uses amicable media applications, so we can embody interface elements that they would be informed with.

Know Your Limits

Know a boundary of your project. At some point, you’re going to have a “That’s good enough” review with yourself. Projects boundary are customarily tranquil by a few factors:

• Budget
  
  Remember that we should assign for testing. A lot of designers don’t, that is crazy. Testing is time-consuming — and, being designers and developers, a product is time.


• Timeline
  
  Include contrast in a project’s timeline. It’s mostly left off a list and, therefore, rushed.


• Scope
  
  Not any website needs to work on hundreds of devices. Figure out a categorical use case, and concentration on fulfilling that audience’s requirements.

Browser and Device Support Levels

To set a range of browser and device support simply with clients and to equivocate those “bad conversations,” we’ve found that being adult front about a “levels of support” unequivocally helps. Below are some elementary definitions that we can request to any page form we test.

Support turn 1: entirely upheld browsers and devices

• All calm contingency be readable.


• All functionality contingency work.


• Deviation from authorized striking pattern contingency be minimized.

Support turn 2: partially upheld browsers and devices

• All calm contingency be readable.


• Navigation contingency work.


• Business login functionality contingency revoke gracefully.


• Any plunge to arrangement contingency not problematic content.

Support turn 3: unsupported browsers and devices

• No support or contrast is required.

Performance Support Levels

You competence also wish to determine with your customer on a opening target. The discerning and unwashed routine here is to determine on a measure to strech in Google’s PageSpeed Insights and Pingdom’s Website Speed Test. Normally, we aim for during slightest 85 out of 100.

Tools For Managing Your Test Plan

It doesn’t matter what collection we use. we use Asana⁸ and BugHerd⁹; we could use a elementary spreadsheet. It comes down to what works best for you. At a minimum, your apparatus should be means to do a following:

• add bugs, issues and tasks in an systematic and segmented list, with a ability to tab (“priority, complement critical, etc.);


• assign bugs, issues and tasks to members of your group (or to yourself), with due dates;


• comment on bugs, issues and tasks, with a date-ordered story thread;


• upload screenshots, videos and papers associated to bugs, issues and tasks;


• mark a bug, emanate or charge as resolved or completed;


• report on finished contra remaining bugs, issues and tasks.

How To Describe Bugs And Issues

Ever got a bug news from your customer that stated, “I clicked on a blog and it doesn’t work”? Useless, right! So, what does a well-written bug news demeanour like?

• Be specific
  
  Without being wordy, clearly promulgate a problem. Do not mix mixed bugs into one report; rather, contention a apart news for any issue.


• Show how to replicate
  
  Detail step by step accurately what we did and what emanate occurred as a result.


• Limit pronouns
  
  Descriptions like “I clicked it and a window didn’t appear” are really unclear. Instead, “I clicked a ‘Submit’ symbol and a window noted ‘Registration’ did not load” tells a developer accurately what we did and what happened.


• Read what you’ve written
  
  Does it make sense? Do we cruise it’s clear? Can we replicate a bug by following your possess steps?

Setting Up Your Front-End Test Plan

So far, we have collected a garland of useful information and data, though you’re going to need a correct contrast devise to attain as a front-end tester. Without one, you’re sharpened in a dark. So, what accurately does a front-end contrast devise demeanour like? In a simplest form, it’s a to-do list, with a garland of tasks for contrast any of your web page forms opposite a set of concluded criteria. The best approach to explain this is by a box study.

Case Study: Front-End Test Plan For Dad Info’s Home Page

Test Plan Documentation

Here, we lay out an overview to give a tester some context about a project. And we let them know what we wish tested, on that inclination and browsers and how prolonged they have to do it.

Budget:

• total of 10 days for testing


• use one and a half days for front-end contrast of home page

Timeline:

• complete initial contrast within one day, with feedback to front-end developers finished a same day


• three days for regulating bugs


• a serve half day for retesting bugs

Scope:

• Support turn 1 (browsers):
  
  • Windows 8: IE 10+, Chrome (latest), Firefox (latest), Safari (latest)
  
  
  • Mac OS X Mavericks: Chrome (latest), Firefox (latest), Safari (latest)
  
  


• Support turn 1 (devices):
  
  • iPhone 4 / 5, iPad 2, Asus VivoTab Smart
  
  


• Support turn 2:
  
  • Windows 7: IE 9+, Chrome (latest), Firefox (latest), Safari (latest)
  
  
  • Windows XP: IE 8, Chrome (latest), Firefox (latest), Safari (latest)
  
  


• Support turn 3:
  
  • anything else
  
  

For this project, we need 3 reports to assure a customer that a page has undergone and upheld a contrast process:

• browser and device report: support turn 1 and 2


• responsive report: support turn 1


• performance report: smallest 85 out of 100

Original Approved Design

Having a visible illustration of what we are operative towards is vicious to ensuring that seemly plunge is within excusable boundary and that a arrangement doesn’t change most between browsers. We’ve combined this design to a exam devise documentation:

¹⁰

Home page picture of Dad Info (Image: New Edge Media) (View vast version¹¹)

Details of Page Functionality

In a home page design, I’ve highlighted all of a functionality that needs to be tested, highlighting them with retard overlays. This helps everybody concerned to know accurately what to demeanour for and puts us all on a same page. I’ve also combined this to a exam devise documentation.

¹²

Home page mock-up, with overlays for contrast areas (Image: New Edge Media) (View vast version¹³)

Based on these overlays, we can furnish a full list of functionality.

Search form

• Click or hold in a hunt box and afterwards press a hunt idol to contention a form.

Navigation:

• Hover over navigation object to arrangement white highlight.


• Hover over navigation object “Family” to uncover drop-down mega menu.

Image carousel 1:

• Press a adult and down arrows to crop a slides.


• Press a pagination elements to skip to a sold slide.


• Swipe by a slides on hold devices.

News feed:

• Hover over a headings to change their color.

Image carousel 2:

• Press a adult and down arrows to crop a slides.


• Press a pagination elements to skip to a sold slide.


• Swipe by a slides on hold devices.

Call-to-action retard 1:

• Hover over pretension to change it

Image carousel 3:

• Press a adult and down arrows to crop a slides.

Twitter:

• No special front-end functionality

Forum:

• No special front-end functionality

Topics:

• Hover over a support subject to exhibit a design to a right, with a description. Click “More” to go to a new page.

Footer links:

• Hover over an idol to change a opacity.

Newsletter:

• Clicking in or touching a “Enter email address” box should work.


• Press “Subscribe” to contention a form.

Footer bottom:

• No special front-end functionality

Browser and Device Report

Whether we confirm to use a apparatus like Asana, BugHerd or Trello, your pursuit as a tester is radically to collect a following information to send behind to your front-end developers (or to use yourself if you’re solo). To fast go by all of a browsers, we use BrowserStack, environment adult practical machines that run a OS and browser combinations that we require.

It’s a routine pursuit of operative by all of a browser and device combinations until we have finished a same tests for any one.

Real Bug From Dad Info

• item: navigation’s “Join” button


• browser/device: Windows 8, IE 10, 1024-pixel shade width


• pass/fail: fail


• bug description: The “Join” symbol overlaps a Twitter button, highlighted in blue. See trustworthy screenshot.

¹⁵

Screenshot of “Join” symbol bug (Image: New Edge Media) (View vast version¹⁶)

Responsive Report

In a news on responsiveness, we are privately contrast elements and functionality that change as a screen’s board reduces in size. This includes navigation, page blueprint and images.

We have a few probable contrast methods:

• Resize a browser’s window
  
  This is a discerning and unwashed method, grabbing your browser’s window by a dilemma and boring opposite a mangle points to see what happens. This is a good approach to fast indicate a altogether responsiveness of a website to see that elements change.


• Use emulators
  
  BrowserStack emulates a infancy of renouned devices, and in my knowledge it is good adequate for testing.


• Use genuine devices
  
  The costly option! This entails wholly contrast on tangible inclination in your hand. Getting a screenshot customarily requires capturing a photo, emailing it to yourself and afterwards annotating in Photoshop. There are some options for shade recording, including UX Recorder¹⁷ for a iPhone.

For a Dad Info project, we used a reduction of all three. The front-end developers resized their browser to get a crux of manageable elements, while a peculiarity declaration group used emulators and genuine inclination to finish a contrast routine to a client’s satisfaction.

Real Bug From Dad Info

• Item: design carousel 1


• Browser/device: iPhone 5, iOS 7


• Pass/fail: fail


• Bug description: The margins set during a bottom of a carousel pull a “News support your child…” pretension for a featured essay too distant down. Featured essay pretension 1 should be 20 pixels next design carousel 1. See trustworthy screenshot.

¹⁸

Screenshot of iPhone bug (Image: New Edge Media) (View vast version¹⁹)

Performance Report

In a opening report, we are looking to measure a smallest of 85 out of 100 in Google’s PageSpeed Insights. To get a customer to pointer off on a report, we’ve enclosed a screenshot of a page speed analysis. Of course, if it doesn’t pass a concluded on standard, afterwards we yield feedback to a front-end growth group regulating a bug-tracking news template.

Tip: We use boilerplates (stored in GitHub repositories, that we fork) for a calm government complement and Magento builds, whose opening is already optimized. This saves us a garland of time.

²⁰

The desktop chronicle upheld Google’s PageSpeed test. (Image: New Edge Media) (View vast version²¹)

²²

The mobile chronicle upheld Google’s PageSpeed test. (Image: Google²⁶²³)(View vast version²⁴)

²⁵

The website upheld Pingdom’s speed test. (Image: Google²⁶²³) (View vast version²⁷)

The stating is complete. We have only a few issues to send behind to a front-end developers to hang adult a front-end build. Once it gets to a peculiarity declaration team, we will retest a elements that kept a devise from removing a purify check of health.

Automated contrast collection for visible regression

One thing to cruise is a need for visible retrogression contrast post go live, permitting we to review editions of pages to see if your new feature, css refurbish or category rename has caused any problems.

Visual retrogression tests radically do a DIFF on a dual versions and outline (in varying ways) a differences between them, highlighting intensity issues.

Here are some good resources to get we started:

• Wraith²⁸


• PhantomCSS²⁹


• Huxley³⁰


• CSS Regression Testing with Resemble.js³¹


• CSSte.st³²

Summing Up

Testing is a vicious routine that developers should confederate into their workflow to minimize a series of bugs that get held in a peculiarity declaration phase. Front-end contrast also needs to be budgeted for — with time, resources and money. The routine will interest to routine forms since they don’t need to be creatively learned to lift it out. Tools are out there to make your life a small easier, though they won’t do a work for you. Whichever apparatus we pick, hang with it, conclude a routine and put a bid in. The outcome will be a improved website, with significantly fewer bugs, that your customer will adore and that will revoke a series of “Why isn’t this working?” phone calls and emails on Sunday night.

Your Action Plan

Reading what we should do is one thing; indeed doing it utterly another. So, we advise carrying out a following actions right now:

1. List a inclination we have on hand, or check out Open Device Lab³³ to find inclination nearby you.


2. Create support levels for your selected browsers and devices.


3. Make time for contrast in your timelines and quotations.


4. Select a government apparatus (Asana, BugHerd, etc.), or set adult a spreadsheet to lane bugs, issues and tasks.


5. Select a initial devise to request your exam devise to.


6. Go do it!

Front-end contrast will give we and your customer certainty in a finished project. You’ll know a website has been wholly tested for bugs and is prepared for a universe to see.

(da, ml, al)

Footnotes

1. 1 http://www.dad.info/


2. 2 http://asana.com


3. 3 https://developer.chrome.com/devtools


4. 4 http://www.browserstack.com


5. 5 https://developers.google.com/speed/pagespeed/insights/


6. 6 http://tools.pingdom.com


7. 7 http://www.screenr.com


8. 8 https://asana.com


9. 9 http:/bugherd.com


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-dad-homepage-opt.jpg


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-dad-homepage-opt.jpg


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-homepage-overlay-opt.jpg


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-homepage-overlay-opt.jpg


14. 14 http://screenr.com


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-issuetracking-opt.png


16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-issuetracking-opt.png


17. 17 http://www.uxrecorder.com/


18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-iphone-opt.jpg


19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-iphone-opt.jpg


20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-google-desktop-opt.png


21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-google-desktop-opt.png


22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-google-mobile-opt.png


23. 23 http://www.google.co.uk


24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-google-mobile-opt.png


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-pingtest-opt.png


26. 26 http://www.google.co.uk


27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-pingtest-opt.png


28. 28 https://github.com/BBC-News/wraith


29. 29 https://github.com/Huddle/PhantomCSS


30. 30 https://github.com/facebook/huxley


31. 31 https://www.lullabot.com/blog/article/css-regression-testing-resemblejs


32. 32 http://csste.st/tools/


33. 33 http://opendevicelab.com

↑ Back to topShare on Twitter

How To Create Your Own Front-End Website Testing Plan