After the front-end design of a website has been created it’s time to test it. There are many things to consider, such as cross browser and device testing, bug tracking, team management, etc.
As the scale of the projects grows larger, a more efficient way of testing is required. This efficiency is best achieved by putting together a thorough plan.

Benefits Of Planning

Establishing the project’s specification and which browsers and devices are used will reduce development time and costs, and help to keep focus. By showing detailed reports of completed test plans, based on the project specification, a better understanding is achieved with clients and friction is reduced. Knowing that you have thoroughly tested the project you can have confidence that the deployed product will perform to specification.

Plan Management

Although it doesn’t matter which tools you use as long as it works for you, some functionality should be considered bare minimum. The ability to add issues and tasks, assigning them priorities and commenting on them are all important. Also a way to upload screenshots and videos related to the issues and tasks will make them a lot clearer.

Important Tools

– Bug tracking system
Although for larger projects they are a must, due to their benefits they shouldn’t be overlooked on smaller projects either.
Typically they are integrated with other project management applications further increasing their usefulness.
Some examples of bug tracking systems used are: Assembla, GitHub, JIRA, Trac.

– Web developer tools
These tools are used for inspecting, debugging and profiling.
All browsers have developer tools available, learning their capabilities can greatly improve the testing process.

– Screenshot and screen recording software
Used for screen recording. Having a screenshot or recording of a bug is a must.

– Virtual machines or emulators
Used to test cross-browsers. Or you could use a service like BrowserStack, which can emulate all desktop and mobile browsers.

– Devices
You always want at least a couple of the most popular real devices.
For the devices you don’t own, you can use BrowserStack’s emulators.

– PageSpeed Tools and Website speed tests
Used for analyzing and optimizing the web performance, and finding bottlenecks in webpages.


Having a detailed specification up front will make sure that you know exactly what you are testing.
Even if you don’t always find bugs, you might find something that isn’t working as expected, or the developers misunderstood the functionality of.
The specification should contain, among other things, test methods, quality assurance requirements, inspections, and acceptance criteria.

Reporting Issues

Write clearly and summarize the problem. You should only describe one issue per ticket.
Write in detail how to reproduce the issue, what you did and what happened as the result.
List the browsers, devices and operating systems on which the issue occurred. Add any information that could be relevant to resolving the issue.
Read what you have written. If it makes sense and you can reproduce the issue by following your steps, then it’s time to report it.

Target Audience

Know your audience. What are the most popular devices they use, operating system and browser combinations, and what connection speeds do they have?
Are they tech-savvy? By knowing the answers to these questions you can prioritize your testing toward the target audience.

Project Constraints

At one point the testing has to end. Factors that usually control projects limits are:
– Results
The specification requirements are met, and the product is ready to be deployed.
– Resources
Resources can include funds, but also people, equipment etc.
Testing is time-consuming, and resource consuming. That’s why it should be accounted for when the projects finances are discussed.
– Time frames
When deciding on the project’s schedule, account for testing time as well. Often it is left off the list and rushed in the end.
– Scope
Know who your target audience is and what devices they are using, the site doesn’t need to work on hundreds of devices. Figure out the main ones and focus on those.


It is important to set the scope of browser and device support with your clients. Agree which browsers and devices will be fully supported, which will be partially supported and which will not be supported at all.
On the fully supported browsers and devices all of the content should be readable and all functions must work correctly. The content should look as designed with as little deviation as possible.
The partially supported browsers and devices should also have all of the content readable. However not all functions are required to work, and design deviation is permissible as long as the content is not obscured.
The unsupported browsers and devices should not be tested at all.


The importance of properly established and managed quality assurance systems and quality control for achieving high-quality products and services cannot be ignored. Creating a quality testing plan is only part of the work. But carrying out the plan effectively is what will save time and money an assure high-quality is achieved.

Posted By Daniel Ljujić

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>