#36 Greenhorn 💚 Newsletter

Where to look for high bugs? For example, check the filters! Learn the correct name of elements and avoid errors in bug reports.

Kostya avatar
Written by Kostya
Updated over a week ago

LEVEL UP Your Reporting

One of the most popular ways to find high bugs is to check the results on the page after applying filters. Watch, memorize and apply in practice!

Here, navigate to the video for better quality.

Feature:

Product overview page

Bug Type:

High Functional Bug.

Title:

Products that are in stock still presented on the ❝T-Shirts❞ product overview page after applying the ❝Out of stock❞ availability filter.

URL:

Steps:

  1. Hover the mouse over the ❝Shop❞ tab in the header

  2. Click the ❝T-Shirts❞ item menu

  3. Click the ❝Filter❞ button

  4. Select the ❝Out of stock❞ filter checkbox

  5. Click outside of the filter menu

  6. Scroll down the page

Actual result:

There are a lot of ❝In stock❞ products still shown on the ❝T-Shirts❞ product overview page after applying the ❝Out of stock❞ filter from the ❝Availability❞ filter section.

Expected result:

Only ❝Sold out❞ products are displayed on the ❝T-Shirts❞ product overview page after applying the ❝Out of stock❞ filter from the ❝Availability❞ filter section. In-stock products aren't presented.

Rule of Thumb:

  • A bug report title should be descriptive, not instructional. Focus on describing the bug instead of what the user does on the website.

  • The title should not have information already collected by the bug form, like the feature selected, the testing device or the browser used. Unless the issue is only presented on one specific browser or if the customer requested to specify the OS/Browser combo in the title, like [Win10/Chrome].

  • The actual and expected results start with describing the problem encountered or the anticipated behaviour. Refrain from summarising the title or steps as they were previously mentioned.

Learning the correct names of elements:

1. Breadcrumbs: Breadcrumbs are navigational aids typically located at the top of the page, showing the hierarchical structure of the website and indicating the user's current location. They consist of clickable links that allow users to navigate back to previous pages.

2. Image Slider/Carousel: An image slider or carousel is a dynamic component that displays multiple images of the product in a rotating or sliding manner. Users can typically navigate through the images manually using navigation arrows or automatically with a timed transition.

3. Product Image: The product image is the primary visual representation of the product being viewed. It is usually displayed prominently on the page and provides users with a clear view of the product's appearance. Additional images may be available in a gallery or slider for users to explore different angles or features of the product.

Common mistakes:

Beginners often use the wrong terms to describe actions when interacting with page elements. These basic terms will help you accurately describe actions:

  1. Tap: This term is primarily used for mobile devices when a user touches the screen to perform an action. For example, "Tap on the 'Submit' button to proceed."

  2. Click: This term is primarily used for desktop devices when a user clicks on an interface element using a mouse. For example, "Click on the 'Submit' button to proceed."

  3. Hover over: This term is used when a user moves the mouse cursor over an interface element without activating it. For example, "Hover over the product image to see a magnified view."

Using these terms correctly will help avoid misunderstanding and make your report clearer and more understandable.

Practical task for you:

Pick one of our #BugsExplained shorts and identify the seven sections above.

The more you practice, the better you'll get at bug reporting!

Did this answer your question?