Web projects testing is an extremely important procedure designed to ensure the smooth operation of the site; it helps to make your online platform work perfectly and without failures. But only multi-level testing performed by a qualified QA team would guarantee that the result of web developers' work meets all client's expectations.
In general, testing web projects includes a number of such stages as:
- Documentation testing
- Testing the layout
- Functional testing
- Testing usability
- Performance testing
- Security testing
In our article, we'd like to touch on the 2nd stage, namely, the layout testing.
We'll describe the whole process at length, discuss the pros and cons of each particular tool for such testing, and share our own practical experience.
The basic logic of layout testing
First, let's talk about the sense of testing when it comes to the layout part. What is it and why is it needed?
Let’s see!
The layout testing is aimed to search out noticeable inconsistencies in the website and includes the verification of the online resource scaling, resolution, reliability, and availability.
In addition, you should not forget another important issue, which is cross-browser ability.
The cross-browser ability
As you know, we all have our own preferences in everything, including choosing the best browser to view a web resource. Some people prefer Google Chrome, someone uses Mozilla Firefox or (less often) Opera, Yandex Browser... And there are also Internet Explorer (Windows), Safari (MAC), and mobile versions of browsers on Android, IOS, and Windows Phone platforms. Therefore, having so many options, it is very important that your site looks the way it was originally intended, under any circumstances.
Thus, the task of the QA team is to check the availability, functionality, site design, as well as fonts and colors, in each browser and on different devices. And believe us, you may be surprised when comparing the display of colors in Windows and MAC OS!
So be smart enough and don’t miss this stage.
Testing the visual part
We’d like to start by describing a very important step that must be completed first in the process of layout testing. Its priority is not surprising: we perceive the world with our eyes, so the visual flaws would be discovered almost immediately.
The experienced QA team usually checks:
-
the presence of obvious inconsistencies, visible to the eye: broken blocks, colors inconsistencies, incorrect display of text around images;
-
whether the layout fully corresponds to the implemented project;
-
the grid (vertical/horizontal alignment of fields and blocks);
-
stability of the backgrounds: they should not "float";
-
the page scaling: your page mustn't have visual defects and floated blocks for all reasonable scales (range of 75-150%);
-
the text box resizing (it should not break the layout);
-
the selection of fields of focus, highlighting the fields with errors;
-
the website in different resolutions (1024x600, 1024x768, 1152x864, 1280x800, 1280x1024, 1440x900, 1680x1050, 1920x1080).
In addition, QA experts must ensure that:
-
all the site elements are being changed in proportion when reducing the window size to less than the minimum technical specifications;
-
every detail looks as intended, nothing is broken;
-
there is no horizontal page scroll at the screen resolutions noticed in the specification;
-
the backgrounds don’t drop sharply at higher resolutions.
After completing the checkup of the visual part, QA experts can switch their attention to the site availability testing.
Testing the site availability
It’s the second and equally important phase of the layout test plan, as well as one of the factors helping to assess the quality of the whole site. And assessing the resource's quality is one of the functions of testing, right?
In short, availability is the website’s operability. In other words, the QA expert is trying to find out if…
-
one can select the text in the appropriate blocks;
-
clickable elements (links/buttons) work the way they’re intended to;
-
the logo icon is clickable and leads to the main page;
-
the mouse cursor takes the form of a «pointer» or «resize» when hovering over clickable elements and remains «default» when hovering over inaccessible elements;
-
active elements react properly to the mouse cursor (and the unavailable/inactive elements don’t react);
-
clickable elements, whose purpose isn’t obvious, are provided with tooltips.
Testing the layout reliability
When describing the required testing set, we mustn’t forget about this stage of the process. It’s aimed to check the layout reliability, which means the correct site response to adding the real text to the fields. So, the QA team is checking…
-
the correctness of increasing and decreasing the number of displayed material for information blocks (blocks with descriptions, articles, menus, lists, etc.);
-
the print of the page (if the website suggests such a possibility: say, selling tickets online);
-
readability. If images are switched off, the inscriptions (especially the logo and the main site menu) have to remain readable, and all the information symbols must be signed by the alternative text that a browser displays in cases where it's unable to load the picture (for instance, if the picture was deleted from the server or a visitor has disabled the image display in browser);
-
the input and deletion of data. To check it, one should input a big and small amount of text information into the text fields of forms for filling in.
-
the work of styles. In such a case, one has to observe the site's reaction to inputting the text of different formats (with and without paragraphs, with lists, images, tables, etc). Is everything working as expected?
The reliable layout means the user is at ease during working with a website (specifically, with its textual content) under any condition.
Error 404
Another step in layout testing is to check broken links, also known as 404 errors.
Let's briefly explain what the number (404) means.
-
The first digit "4" means that there is an error that occurred on the client side. Such an error can be a misspelled URL or a request for a non-existent page. In turn, if the first digit is 5, it would mean an error on the server side.
-
The number "04" identifies the specific error "Not Found" from the 4хх group. Among other mistakes from this group, one might distinguish 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden, and so on.
Try to look at the problem from the user's point of view. When a user encounters a 404 error, the first question coming to his mind is "What should I do next?". Probably, he’ll leave the website, unless you find a way to keep him. Obviously, it makes sense to change the standard 404 page which ideally must have the same stylistic structure as the rest of your website.
In general, the custom 404 error page must handle such tasks:
-
the user-friendly design able to keep a user on the website;
-
useful content ready to provide a user with the answer to the question «What should I do now?» by giving him simple and clear instructions.
There are many different online services to check 404 errors on your site, one of the most optimal is W3C Link Checker.
When moving to this service, you just enter the URL of your web project into the appropriate box, mark suitable options, and click “Check”. A bit later, the system will give you a full report on your website.
That's all for now. Good luck with testing!
