In some tests, you will have the option to report visual bugs. Visual bugs relate to the graphical user interfaces of websites or apps, e.g.:
Layout framework problems such as misaligned texts/elements
A Responsive Design problem, e.g. an element is displayed on one mobile device but not on another
Text/elements unintentionally overlap each other
Text/elements are cut off
Anything that can be fixed in the HTML or CSS files
When a visual problem occurs repetitively, it may only be submitted once, even though each occurrence may have a different URL, link, picture, etc. This is also the case if occurrences are on the same page or on different pages. This single bug report should state that other URLs, links, pictures, etc. are also concerned.
Individual bug reports for every occurrence of the problem must not be submitted and will be rejected. The customer only needs a single reference to be made aware of the visual problem. They will investigate the problem and solve it for all occurrences.
Some elements show the same graphical problem, e.g. text or images are larger than their boxes.
Input fields are not large enough to hold their default texts that are in turn not completely visible.
Teasers unintentionally overlap other elements.
Upgrade to functional bug
As soon as a visual bug prevents a functionality, it should be reported as a functional bug, even though it is not actually the function itself that is defective.
If the functionality can be reached intuitively and easily via a different path or option, users are de facto not prevented from using the functionality, so the problem may not be submitted as a functional bug. It remains a visual problem.
Documentation of visual problems
Visual reports must contain screenshots. If the visual problem is caused by an action, an additional screencast might be required. For more information on how bug reports must be documented, visit our article Bug Report Requirements.