Reproductions Most Common Mistake
Reproductions are one of the most complex tasks at Test IO. They provide precious information to customers: device coverage, meaning how big the bug is based on the different devices experiencing the same issue and which ones do not, including the compromised browsers. And at the same time, reproductions are easy to execute and report.
Nevertheless, getting a reproduction attachment wrong is the most common mistake; this is why the sooner you learn how to avoid it, the better.
So, first things first! Here is a friendly reminder about reproduction attachments rules:
A screencast is required.
Only in rare cases, if you cannot show the bug-triggering action within 15 seconds (e.g. when the page is loading endlessly), your screencast may be longer but not longer than the screencast from the original tester.
Your screencast must include the current date and the URL bar when testing a website.
When reproducing an app crash, upload a crash log file in addition to your reproduction screencast. Your screencast has to correspond to the attached crash log, i.e. timings must be coherent.
Notice that we've intentionally linked only the second rule since it is the most common mistake when submitting a bug report reproduction.
Remember:
TIP: to get the shortest version of a screencast to submit reproductions, only record the last navigational step, which will trigger the bug and the bug itself and, of course, the date and time.
Responsive vs. Nonresponsive Website Content
As you already know, visual bugs relate to the graphical user interfaces of websites or apps. Everything that humans can see since our manual testing focuses on mimicking end–users’ behaviours and how they would navigate the environment under the scope of a test.
However, there is another specific scenario that cannot be directly seen and might puzzle you about its categorisation between content and visual bug, and this is the issue created by the website's responsive design.
As per Academy:
Layout framework problems such as misaligned texts/elements
Text/elements unintentionally overlap each other
Text/elements are cut off
Anything that can be fixed in the HTML or CSS files
This issue is less noticeable when quickly navigating through the website and, suddenly, we find a page with all the needed information but displayed awkwardly. If this is the case, we might let it pass – and miss submitting a bug!
Take, for example, this case:
Responsive Website vs. Nonresponsive Website
Notice that ❝Popular TV Show and Movie Genres❞ page content can be perfectly seen on the smartphone; however, when the user navigates to the ❝COMEDY❞ category page, the content is hardly visible because the elements are too small.
If you're unsure whether a page is responsive, explore it with Mobile-Friendly Test powered by Google for verification.
Check out the results for this ❝COMEDY❞ category page here. Explore all the ❝Details❞ in the ❝Why it's not usable❞ section to understand better and learn a little bit of HTML, CSS and JavaScript on the fly.