How To Test A Website: The Importance of Testing in Web Development

It is important for a web developer not only to hand over the finished site, but to check it for possible errors, ease of use and scaling. Otherwise, you can either lose a client, or get stuck for a long time with project improvements. All this can be avoided with a properly organized testing process. Depending on the complexity of the ongoing project, several stages of identifying possible problems will be used. If we are talking about very large sites and applications with a large budget, then a separate tester is often hired here, working in a team with a developer.

Why website testing is important during web development

Any problem that pops up with a client or users of a resource after it has been handed over is a blow to the reputation of a company or an individual developer. It is very likely that a dissatisfied customer may demand free fixes for discovered bugs, which is a waste of time and resources. To avoid such problems, testing is required both during development and before the delivery of a fully finished project.

Unfortunately, it is very difficult to make a correct check of the entire site when it comes to a large project. Often something, but will leave the field of view of developers and testers. To avoid conflict with the client, it is recommended to warn him about possible minor bugs after the project is launched, explaining the situation. Of course, you need to eliminate all more or less major problems and promise free support for the site for a certain period after launch.

Next, consider the aspects that need to be tested without fail. Some of them can be tested for functionality during the development of the site or application itself. Others only before the delivery of the finished project.

Checking the health of simple sites

If the developer is faced with the task of testing a simple site on one or more pages, then everything can be done in several small steps. The main task will be simply reconciliation with the terms of reference from the client. True, this is true for small sites that run on common CMS, such as WordPress. If administration is supposed to be through a self-written CMS or some non-distributed one, then additional testing steps may be required to determine the operability of the selected CMS.

Briefly about the main stages of testing

Here are the steps you will have to go through when testing a simple site if it works on a more or less common CMS:

1. Collection of documentation and verification with it. At this stage, it is important to collect all the detailed documentation: terms of reference from the client, prototypes, ideas from designers and other developers, if they were involved in the project. Based on the received data, a more detailed test plan is created and executed.

2. Test layout. It makes no sense to test the functionality in detail if the site is normally displayed only in one browser and at one resolution. At this stage, it is important to make sure that all elements of the site are displayed correctly:

• At different resolutions. It’s not just about standard resolutions for mobile and desktop. Ideally, the site should look normal even when windows are scaled or when the window is not full screen. Naturally, all important elements should be visible to the user, not move anywhere and not run into neighboring elements. If something moves out somewhere, then it needs to be corrected in the layout;
• In different browsers. Of course, it doesn’t make sense to watch how the site is displayed in some non-name browser used by several hundred people, but in the main web browsers: Google Chrome, Opera, Mozilla Firefox, Edge, Internet Explorer, Yandex Browser, the pages should be displayed correctly. If this is not the case, then check whether you are using the necessary prefixes and whether the features used on the site are supported by the current versions of the indicated browsers.

3. Test the functionality. The site looks normal in all usage scenarios – nothing slides anywhere, all blocks are displayed as intended by the designer. Now you can check the functionality. Here, in general, there is nothing complicated – curse all links, test forms and other interactive elements. If any of this does not work or does not work correctly, then you need to find out why and fix it.

4. Usability testing. At this stage, it is checked how convenient it is to use the site interface from the side of a regular visitor. This step can be divided into two sub-steps:

• Usability test during design development. The designer is responsible for it, and the developer only gives technical advice if you work in a team. Here it is important to identify possible problems, to create the concept of the most understandable and simple interface for the average user according to the TOR provided by the customer;
• Usability test after layout. Not always a design that looks beautiful and understandable in the picture is such after implementation. Sometimes interactive elements, whose influence on other page elements is difficult to draw in Photoshop or Figma, can break the concept of a user-friendly site. In this case, they will have to be recycled. It may be necessary to involve a third-party designer in the task;

5. Performance testing. Not always a mandatory test, especially if it’s just a one-pager. The bottom line is that it is important for the developer to see how quickly the pages of the site will load in different browsers, from different devices, and, preferably, at different network connection speeds.

These stages are also used when testing larger projects, however, sometimes with adjustments for the specifics of a particular project.

A detailed analysis of site testing in the development process

More complex testing is no longer divided into separate stages, but into separate types. Next, we will analyze each variety in more detail.

Functionality check

In fact, it is not much different from testing the functionality of a small site. Nevertheless, we will consider this process in more detail, since multi-page projects may have their own nuances.

First of all, it is recommended to check the links located on the pages of the site. They can be divided into the following categories:

1. Links to the home page of the site. They should be on all pages in one form or another. Usually, they are implemented in the form of a site logo, which is located in the top menu and footer. Often there is just the inscription “Home” in the menu. All links to the main page must be working.
2. Internal links. They lead to other pages of the site, except for the main one. Here it is important to ensure that all links lead to the right place and work correctly. For some important sections of the site, the same rule applies as for links to the main – they must be accessible from any page of the site.
3. Links to categories within a specific page. It is important to check not only the correct operation of the link itself, but also the display of the element to which it leads. If, when clicking on a link, the desired element is out of the user’s field of vision, then you need to work on anchors.
4. Check if there are links to isolated pages.
5. Check for broken links to third-party resources.

It is also important to check the forms. Otherwise, user interaction with the site will be disrupted. When reviewing forms, pay attention to the following points:

1. The correctness of the validation of each field in the form. Otherwise, the user, by mistake or on purpose, may enter and send completely the wrong information that you need. It is best to attach automatic validation checks to forms. The user will be able to understand where the mistake was made and correct it before submitting the form. It is not recommended to check after submitting the form, as the error message may scare away some visitors and they will not take the desired action. Forms are much easier to interact with when validation happens in real time.

2. Check error messages. The user may make a mistake in filling out the form. Even if the validation works correctly, the visitor is not always able to understand exactly where the error is and what is wrong. Create hints that will appear when the form is filled out incorrectly and check their performance by intentionally making mistakes in the required fields.

3. Check the value of the fields that are used by default, if any.

4. The work of more complex options. Some projects require filling out forms from a large number of fields. Some of them may have a non-standard filling algorithm: selection from a drop-down list, radio buttons, radio buttons, and so on. The correct operation of all these elements needs to be checked under different usage scenarios.

5. Correct execution of all stages. Relevant for complex forms, whose filling is often divided into several stages. It is necessary to trace not only the very fact of switching between them, but also the correctness of data transfer, as well as checks in accordance with already completed forms.

Forms are recommended to be tested manually. There are automatic testing algorithms, but it is recommended to trust them only with simple elements where you need to fill in a couple of fields and click a button.

Checking the Validity of HTML/CSS Code

Here, in addition to the correct display of the layout on different resolutions, browsers and devices, you need to check the code itself for errors. Yes, some of them may not have a visible impact on the performance of the site and the correct display of layout, but they can affect promotion in search engines. Search engines Google and Yandex can lower the ranking of a site where even minor errors are found in HTML and CSS.

Luckily, you don’t have to re-read all the code yourself. There are special programs to automatically check HTML/CSS validation. They will show all the problems and points of contention found, which you will need to fix or leave as is, if you think that this is not a mistake.

Database check

The interaction of the site with databases is an important element of work both on the part of the user and the administrator. Before starting the project, you need to carefully check the integrity of the database. It is also important for the client to organize an administration check: adding, deleting, editing new pages of the site, working with user data, and so on.

Make sure that all database queries are executed correctly, information is retrieved and processed as required.

Usability Testing

The principles here are exactly the same as in the case of testing a small simple site:

• Interaction with elements on pages should be intuitive;
• The most simple and accessible navigation through the main sections of the site;
• Clear instructions for the user, if necessary (for example, a complex interface);
• Check how easy it is to use the instructions provided;
• Items in the main menu should be arranged in a logical sequence;
• The main menu should be available on every page of the site;
• Check for grammatical and punctuation errors in the text on the pages.

Additional testing factors

Most of them you need to know before you start development, as this can seriously affect your workflow:

• Expected load on the server;
• The main types of loads and the performance required for them from the server side;
• A list of tools for testing the performance and validity of the code;
• General portrait of the target audience: region of residence, “favorite” browsers;
• Accessibility of the site – for a wide audience or for a certain category of users;
• Whether servers are allowed to be idle for maintenance and, if so, in what quantities and for how long;
• A list of tools to ensure the security of the site from potential hacking and hacker attacks;
• How it is planned to work with the content on the part of the customer: do you need your own CMS, any open access will do, or CMS is not needed at all;
• What specification of HTML and CSS code is required to be observed when developing a project, are deviations acceptable;
• The recommended maximum page size is 3-5 screens, in other cases it is required to develop an interactive menu for this page and break it into logical blocks;
• All elements of the page, and the site too, must be logically interconnected;
• It is recommended to leave “breadcrumbs” – links to previous pages of the site from the same category for better communication.

Conclusion

Website testing is an important development process that should not be neglected. According to the presented sequence, you can conduct it both in the process of work and before the immediate delivery of the project. If the project is complex, then it is better to hire a separate specialist who will perform testing, according to all the above points and draw up a detailed report with recommendations.