LEVEL UP Your Reporting
Example of Visual bug with screen resolution.
Here, navigate to the video for better quality.
Feature: | Product overview page |
Bug Type: | Visual |
Title: | The white vertical line from right side is presented on the "All bags" product overview page |
URL: | |
Steps: |
|
Actual result: | Horizontal scroll bar is presented on the "All bags" product overview page, because white vertical line is appeared from the right side on the page. Piece of content is went out on page layout on the "All bags" product overview page.
Note: the same issue is presented on other site pages (e.g.: on the home page too)
Screen Resolution: 1536x864 |
Expected result: | Unnecessary horizontal scroll bar and white vertical line aren't occurred on the "All bags" product overview page |
Useful tooltips:
Importance of including Screen Resolution in bug reports
When reporting visual bugs, it is crucial to include the screen resolution because many visual issues can be specific to certain screen sizes and resolutions. Variations in display settings can affect how content is rendered, potentially causing layout problems, overlapping elements, or readability issues that might not be apparent at other resolutions. Providing the screen resolution helps developers replicate the issue accurately and ensures a more efficient debugging process.
Screen resolution is typically included in the "Actual Result" section of the bug report to provide context about the environment in which the bug was observed. This detail is essential for recreating the scenario and addressing the visual discrepancy effectively.
See above for example of visual bug with screen resolution.
Learning the correct names of elements:
Search-related UI elements
1. Search Bar: A text input field where users can enter their search queries.
2. Search Button: A button, usually with a magnifying glass icon, that initiates the search when clicked.
3. Search Suggestions: Drop-down list that appears as users type in the search bar, offering suggested search terms based on the input.
4. Close Button: A button, often represented by an "X" icon, that clears the search bar or closes the search suggestions drop-down
5. Search Results Page: The page where search results are displayed, typically showing a list of items that match the search query.
6. Search Term: A word or a combination of words used by individuals to query a search engine or a database in order to find specific information. These terms are entered into the search bar and the search engine processes the query to return relevant results.
You can also read our academy article Understanding the Differences and Integration of Search, Search Suggestions List, and Search Results Page
Common mistakes:
When writing test steps, always specify the type of UI element being interacted with. This ensures clarity and precision in the testing process.
Example:
Bad:
Select the "Sandals"
Click the "More"
Click the "Prize"
Correct:
Click the "Sandals" menu item
Click the "More" link
Click the "Prize" filter
This practice helps avoid ambiguity and improves the accuracy of test execution.
The more you practice, the better you'll get at bug reporting!
If you want to know more about these topics,drop us a message on Discord, Facebook, YouTube, Reddit, or the Support Channel.