Layout testing. Basic requirements

In this article, we will talk about layout. For some reason, it is paid less attention than, for example, functional, regression, load, and other types of testing.

Let us start with the main thing - the definition.

Layout is the element placement of the application according to the mock-up and requirements. It is worth noting that only manual testers check HTML and CSS. For the specialist, it is important that all application elements are displayed correctly.

Let us consider the following 4 stages of layout testing in detail.

Stage 1.

Visual part

At this stage, it is necessary to check:

• accuracy of consistency with the mock-up (Here we can use the Pixel Perfect instrument);
• grid (horizontal and vertical alignment);
• scale (from 75% to 150%);
• change of the text field size;
• highlighting fields in focus;
• layout in different screen resolutions such as:

Stage 2.

Availability

At this stage, you need to check:

• availability of necessary elements;
• size and color of the elements;
• text highlighting in text blocks;
• clickability of the logo icon;
• clickability of site elements (links/buttons);
• element placement relative to each other;
• form of the cursor while hovering the mouse over the clickable elements;

In the picture below, there are the following types of cursor:

Stage 3.

Correct work

At this stage, it is required to test:

• element size. It is necessary to measure it and compare it according to the requirements. It is possible to do it with the help of Page Ruler;
• font correctness (color, size, name.) For Safari and Chrome it is quite effective in testing to use Fontface Ninja extension for font identification;
• colors of the interface. ColorZilla is a good way to check it;
• content. To check the grammar or spelling mistakes, the SpellChecker program comes in handy; 
• favicon. It is an important part, the absence of which can spoil users' impression about the product;
• HTML/CSS standards – W3C can be used for this check;
• title standard in the whole application:

• the <title> tag of the page – shows the short description of the page content. That is why we shouldn't forget about this tag.
• the «Back» button – should be checked as there may be a chance it won't work after going through pages and clicking on this button.
• scalability. It is relevant in testing not a PC but other devices such as phones or tablets.
• cross-browser compatibility. As all browsers differ from each other, there is a possibility to see a defect on the same page but in different browsers:

• scrolling. It is necessary to see additional information in the window.
• browsers' extensions. The program appearance also depends on extensions such as VPN and Adblock. That is why this check is also considered necessary.

One more thing that is also tested along with layout – is localization. Important to understand that this is not part of the layout.

Localization is a translation of the text of the web application and its adaptation in the particular environment.

This check is performed quite effortlessly, although with defects afterward. It will be great if this task is done by a professional interpreter or a person who knows a specific language well because a tester usually uses an online translator. That is why at this stage, he can have many difficulties, for example:

• The number of symbols in the translated word can be bigger than in the original one. It can lead to incorrect display of the interface:

• the number of symbols in the translated word can be bigger than in the original one. It can lead to incorrect display of the interface:
• abbreviations are either translated, transliterated, or left as they were.
• currency formats. Currency should be displayed according to the chosen language. 
• depending on the input language, font parameters may be different as well.
• the search work is tested in every localization, as the results may differ. 
• meta-information (keywords/title/description) is an important component because website promotion depends greatly on it.
• some languages have a unique feature as reverse writing (Hebrew, Arabic). For example, word wrapping absence, numbers are written from the left to the right, signs and icons are reflected, program names aren't translated, edit buttons Backspace and Delete work the other way around.

Stage 4.

404 errors

Let us consider the definition of 404 error in detail. Its presence means that the user used the wrong URL address, or the page doesn't exist at the moment. But it doesn't mean the page never even existed. It can be moved to another location, deleted, or its name is changed. A check for this error is required to avoid traffic loss and position subsidence. The 404 error is considered to be the most common and recognizable.

In this article, the essential checks of layout testing are described. One way or another, it is the base that can be extended by technical knowledge. To sum up, it is safe to say that layout testing is the highly important stage for website development and promotion. In this article, the essential checks of layout testing are described. One way or another, it is the base that can be extended by technical knowledge. To sum up, it is safe to say that layout testing is the highly important stage for website development and promotion.