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
Repetitive problems
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 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 issue and solve it for all occurrences.
Examples:
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 the function itself that is defective.
Suppose the functionality can be reached intuitively and easily via a different path or option. In that case, 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. An additional screencast might be required if an action causes a visual problem. For more information on how bug reports must be documented, visit our article Bug Report Requirements.
Free Online Responsive Test
The Google Chrome Lighthouse (formerly known as Google Mobile Friendly Test) can be a valuable aid in ensuring that webpages are optimized for mobile devices. This tool can assist testers in identifying any visual issues on web pages by evaluating mobile usability factors such as font size, tap targets, and viewport configuration (SEO section). If you encounter a visual bug, this tool could help you determine whether the root cause is the page's responsiveness. Unlike the previous Google Mobile-Friendly Test, which was run on a separate website, Google Chrome Lighthouse has to be added to the Google Chrome browser and run directly on the tested website. The installation process and detailed tutorial are available here.