Product developmentManual web testingBasic of web testing

Common bugs for UI elements

6 minutes read

So now you know examples of common UI elements. To get one step closer to becoming a tester, you need to learn how to find bugs in these elements. After all, they make up every website or application. Let's get started!

Bugs for text UI elements

As we know, it is necessary to have test cases to find a bug. First, we will show examples of bugs and test cases that can be used to find these bugs. For text elements, the most common bugs are.

Labels provide information or context to users. They should activate the associated element. A common bug is when labels do not work correctly. For example, labels are not associated with form elements. Here is the HTML code with the mistake:

<label for="username">Username:</label>
<input type="text" name="username">

In this example, the label is not correctly associated with the input field using the for attribute. Clicking the label does not focus on the associated input field.

Other example is incorrectly placed labels:

<input type="text" name="username">
<label for="username">Username:</label>

Here, the label is placed after the input field. Clicking the label does not focus on the input field as expected. The bug might look like users clicking on the label, but the input field does not receive focus or respond to the label click, leading to confusion and usability issues.

Test cases:

Clicking the label should focus on the associated input field.
The label should be clickable.

Bugs in text areas can affect user input.

Incorrect text wrapping:

<textarea id="currentaddress" name="currentaddress" rows="1" cols="20"></textarea>

In this example, the text area's rows and columns are set too low, causing text to wrap in an unusual and inconvenient way. It may result in the text not displaying properly within the text area.

Overflow issues:

<textarea id="currentaddress" name="currentaddress" style="width: 100px;">This is a very long text that overflows the text area.</textarea>

The text area's width is insufficient for the long text provided, resulting in overflow issues. As a result, the text may extend beyond the visible area of the text area, making it difficult to read and interact with.

In the first bug, the text may wrap poorly, causing it to display strangely or be cut off. In the second bug, the text may overflow the text area, making some of the content inaccessible and not visible to users. These issues can hinder effective input and communication.

Test cases:

Enter a long text and check if the wrapping is correct.
Input text exceeding the text area boundaries.

Buttons with text trigger actions or navigation. Bugs in these buttons can hinder user interactions.

Buttons are not clickable:

<button onclick="submitForm()">Submit</button>

In this example, the button lacks the necessary type="button" attribute, making the button unclickable as it defaults to `type="submit." Clicking it may not trigger the expected action.

Incorrect button labels:

<button onclick="submitForm()">Proceed</button>

Here, the button label "Proceed" does not match the expected action of form submission. This inconsistency between the label and action can potentially confuse users.

In the first bug, users might click the button, but it does not trigger the intended action (e.g., form submission). In the second bug, the button label does not align with the expected action, causing confusion regarding the button's purpose and functionality.

Test cases:

Click the button and verify it triggers the expected action.
Confirm that the button label matches its intended function.

Errors with graphic elements

Graphic elements enhance the visual appeal of the interface. Let's look at common bugs and test cases for images, icons, and buttons with icons.

Images are used to illustrate content and provide context. Bugs in image rendering can affect visual content.

Missing or broken images:

<img src="nonexistent-image.png" alt="Nonexistent Image">

In this example, the image source points to a non-existent or broken image file. As a result, the image may not load correctly, leaving a broken image icon or empty space.

Incorrect image placement:

<div>
    <img src="example-image.png" alt="Example Image">
</div>

Here, the image is placed within a div element, but its alignment and size are not specified. As a result, the image may not align or size as expected within the content, potentially affecting the overall layout.

Test cases:

Verify that images load correctly.
Check if images are aligned and sized as expected.

Icons are used to represent actions or concepts. Issues with icons can confuse users.

Unclear or inappropriate icons:

<i class="fas fa-question-circle"></i> <!-- Using Font Awesome for a question icon -->

In this example, the icon represents a question but is used in a context where it's unclear or inappropriate. Users may find it confusing if the icon doesn't match the intended action or concept.

Misaligned icons:

<button><i class="fas fa-save"></i>Save</button> <!-- Icon for "Save" is not properly aligned -->

Here, the icon within the button is not properly aligned. It may not align with the button's text or be misaligned within the button, leading to a visually inconsistent presentation.

Test cases:

Ensure that icons convey their intended meanings.
Confirm that icons are properly aligned within buttons or elements.

Bugs in interactive elements

Interactive UI elements enable user engagement.

Checkboxes and radio buttons. Checkboxes allow multiple selections, while radio buttons enable single selections. Bugs can affect user choices.

Selection issues (unable to select or deselect options):

<input type="checkbox" id="option1" name="option1" value="option1" disabled>
<input type="checkbox" id="option2" name="option2" value="option2" checked>

In this example, the first checkbox is disabled, making it impossible to select or deselect the option. The second checkbox is checked by default and may not allow users to uncheck it.

Incorrect default selections:

<input type="radio" id="choice1" name="choice" value="choice1" checked>
<input type="radio" id="choice2" name="choice" value="choice2">

Here, the default selection for radio buttons may be set incorrectly. In this example, "choice1" is selected by default, which may not match the intended default selection.

Test cases:

Verify that checkboxes and radio buttons function correctly.
Check if default selections are as expected.

There is often a bug where radio buttons are used for multiple selections and checkboxes are used for single choices. This bug can be noticed even visually.

Sliders allow users to adjust values interactively. Issues can impact user control.

Slider not responding to adjustments:

<input type="range" id="volume" name="volume" min="0" max="0">

In this example, the slider is set with both the minimum and maximum values set to 0. As a result, users may not be able to adjust the slider, making it unresponsive.

Incorrect value range:

<input type="range" id="brightness" name="brightness" min="0" max="50" value="75">

Here, the slider has a minimum value of 0 and a maximum value of 50. However, the default value is set to 75, which falls outside the specified range. This can lead to an incorrect value range for the slider.

Test cases:

Test slider responsiveness by adjusting the value.
Verify that the slider range matches the expected values.

Dropdowns enable users to select options. Bugs can affect the dropdown's usability.

Inaccessible or hidden options:

<select>
    <option value="option1">Option 1</option>
    <option value="option2" disabled>Option 2</option>
    <option value="option3">Option 3</option>
</select>

In this example, "Option 2" is disabled within the dropdown, making it inaccessible and hidden from users.

Incorrect default selections:

<select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected>Option 3</option>
</select>

Here, "Option 3" is set as the default selection, which may not match the intended default choice.

Test cases:

Test all dropdown options for accessibility.
Confirm that the default selection is correct.

Date pickers allow users to select dates. Bugs can affect date selection.

Incorrect date formats:

<label for="datePicker">Select a Date:</label>
<input type="date" id="datePicker" name="datePicker" value="2022/15/35">

In this example, the default date format provided is "YYYY/MM/DD," but the value "2022/15/35" does not match a valid date format, leading to an incorrect date format.

Calendar navigation issues:

<label for="datePicker">Select a Date:</label>
<input type="date" id="datePicker" name="datePicker">

In this case, the date picker is missing a calendar for users to navigate and select dates. This can lead to calendar navigation issues and difficulties in choosing dates.

Test cases:

Test date picker with various date formats.
Verify the ease of navigation in the calendar.

The date picker should not allow you to select a date outside of a given range. For example, if we select a date of birth, dates beyond today should not be available.

How to find errors in navigation elements?

Navigation elements help users navigate through the application. Let's look at common errors and test cases for navigation bars, tabs, and pagination.

Navigation bars contain links to the main sections. What kind of errors can occur here?

Broken or incorrect links:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#contact">InvalidPage</a></li>
    </ul>
</nav>

In this example, there's an incorrect link labeled "InvalidPage" that doesn't lead to a valid section. This can lead to broken or incorrect links within the navigation bar.

Inconsistent layout:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

In this case, the navigation bar elements have inconsistent layout or alignment. This can lead to an inconsistent appearance, making it challenging for users to navigate the site.

Test cases:

Make sure links lead to the correct sections.
Check for consistency in layout and alignment.

Tabs allow users to switch between content sections on one page or dialog box. Bugs in tabs can disrupt navigation.

Non-functional tab switches:

<div class="tabs">
    <button class="tablink" onclick="openTab(what)">What</button>
    <button class="tablink" onclick="openTab(origin)">Origin</button>
    <button class="tablink" onclick="openTab(use)">Use</button>
</div>

<div class="tab-content">
    <div id="what-content">Content for the "What" tab</div>
    <div id="origin-content">Content for the "Origin" tab</div>
    <!-- Missing content for the "Use" tab -->
</div>

In this example, clicking the "Use" tab does nothing, causing non-functional tab switches.

Overlapping or hidden tab content:

<div class="tabs">
    <button class="tablink" onclick="openTab(what)">What</button>
    <button class="tablink" onclick="openTab(origin)">Origin</button>
    <button class="tablink" onclick="openTab(use)">Use</button>
</div>

<div class="tab-content">
    <div id="what-content">Content for the "What" tab</div>
    <div id="origin-content" style="position: absolute; left: -9999px;">Content for the "Origin" tab</div>
    <div id="use-content">Content for the "Use" tab</div>
</div>

In this case, the content for the "Origin" tab is hidden with CSS, causing overlapping or hidden tab content. This can disrupt the user experience as the content is not displayed correctly.

Test cases:

Test tab switching by clicking different tabs.
Confirm that tab content is displayed correctly.

Pagination divides and navigates lengthy content. Bugs in pagination can affect content exploration.

Non-functional page links:

<div class="pagination">
    <a href="#page1">1</a>
    <!-- Missing links for page 2 and page 3 -->
</div>

In this example, the page links for "Page 2" and "Page 3" are missing. Clicking these links does nothing, causing non-functional page links.

Incorrect page numbering:

<div class="pagination">
    <a href="#page1">2</a>
    <a href="#page2">3</a>
    <a href="#page3">4</a>
</div>

In this case, the page numbers in the links are incorrect. Clicking on "2" takes users to the third page, "3" goes to the fourth page, and so on.

Test cases:

Verify that page links take users to the right content sections.
Confirm that page numbering matches the content.

Conclusion

And there you have it! We've covered some of the most common errors that can occur in various UI elements. Remember, a bug-free UI is not just about making your site look good. It's about making sure your users can interact with your site effectively and efficiently.

2 learners liked this piece of theory. 1 didn't like it. What about you?

Report a typo

Common bugs for UI elements

Bugs for text UI elements

Errors with graphic elements

Bugs in interactive elements

How to find errors in navigation elements?

Conclusion

Related topics