A test case is an essential aspect of software testing. It is a set of instructions executed against a specific feature of a software product to determine whether it functions as expected and meets business requirements.
The primary purpose of a test case is to ensure that different features of the software product function correctly and conform to the specified quality standards and end-user requirements.
Now you know what a test case is. While developing a software product, website, or web app, you need to develop test cases covering all possible test scenarios for each component or feature.
For instance, developing a website definitely involves using diverse elements, such as text fields, buttons, checkboxes, etc. You must write and execute test cases for all elements you use to create your website.
In this blog post, we will write some effective test cases for different web elements, such as the radio button, checkbox, dropdown, textbox, button, header, and footer.
Content
Test Cases for Radio Button
A radio button is a graphical element enabling users to choose only one of the pre-defined sets of options.
The following are the test cases for the radio button-
- Verify whether the radio button is clearly visible and in proportion with the user interface.
- Check whether its size is according to the one mentioned in the requirements.
- Check whether the radio button allows users to select only one option at a time from a specific radio group.
- Verify whether the description or label text of the radio button is proper and next to it.
- Click on the label text and check whether the corresponding option of the radio button gets selected.
- Verify the font size and color of the radio button’s description.
- Consider a user selecting a specific option of the radio button and refreshing the page. Check whether that option remains selected or not.
- Check whether users can access the radio button and select the option using the tab and arrow keys.
- Verify whether the selected option is highlighted differently.
- Check that radio buttons in a group do not collide with each other.
- Test radio buttons on different browsers and platforms to ensure correct behavior and functioning.
- Check whether the appropriate error message is displayed when no option for the radio button is selected.
- Verify that only the value of the selected option is captured and processed further.
Test Cases for Checkbox
A checkbox is a graphical element allowing users to make multiple choices from the given set of mutually exclusive options.
The following are the test cases for the checkbox-
- Verify the position of the check box on the user interface.
- Check if the checkbox’s height and width are according to the ones mentioned in the requirement.
- Check whether the options of the checkbox are selectable or not.
- Verify whether users can select multiple options from the checkbox.
- Verify whether users can uncheck the checked option.
- Check if there is a default selection state when a user loads the page.
- Confirm whether the default select is visible or not.
- Verify that the selection of multiple options remains even if users interact with other elements on the web.
- Ensure the presence of the label text with the check box.
- Verify the color of the tick mark when users select options.
- Check whether the checkbox is accessed and selected using the keyboard keys.
- Confirm that the selected options are highlighted in a different way.
- Verify the behavior of the checkbox in different browsers and platforms.
- Check the responsiveness of the checkbox on different screen sizes.
- Determine the behavior of the checkbox when no option is selected. Check whether the proper error message is displayed.
- Verify that the values of the checkboxes save in the database upon clicking the submit button.
Test Cases for Dropdown
A dropdown list is a visual element analogous to a list box allowing users to select a value from a given list. It is also referred to as a dropdown menu, pull-down list, or picklist.
Check out some basic test cases for the dropdown list:
- Check whether the dropdown list is clickable.
- Verify whether the list shows up and collapses after clicking the dropdown menu.
- Check if all the options in a list are displayed.
- Verify the working of the scroll-down functionality.
- Confirm the design of the dropdown list aligns with the one specified in the requirements. Check whether it goes well with other elements.
- Check whether each option in a list is clickable.
- Confirm the order of the values in the dropdown list matches as specified in the requirements.
- Check for no blank value in the dropdown list.
- The design and behavior of the dropdown list should be consistent in all browsers and platforms.
- Check if users can access the dropdown and navigate the list through the keyboard keys.
- Validate that the dropdown list has clear labels indicating the available options.
- Confirm the spellings for values in the dropdown list.
- Verify that all the values in the list are in the order specified in the requirements.
- Check for equal spaces between the list values.
- Confirm that the selected option is highlighted or indicated differently.
- Test the working and behavior of the dropdown on different browsers and platforms.
- Validate the behavior when no option from the list is selected.
- Test the interaction of the dropdown with other elements.
Test Cases for Text Box
Also called a text field, a text box is a graphical element allowing users to input text information. It has a rectangular shape and is of any size.
Let us explore different test cases for the text box. However, different types of text fields are categorized based on the input. Hence, the test cases vary accordingly.
Test Cases for Single-Line Text Box
- Check whether the text box accepts the alphabet, numeric values, and symbols.
- Validate the text box for its limitation on the input length.
- Verify whether it accepts the empty input and does not throw any error.
- Test if the text box can handle leading and trailing spaces correctly.
- Check the functionality of pasting the copied input into the text box.
- Test if the auto-capitalization for the first letter works correctly.
- Check if users can access the text box using the keyboard’s Tab key.
- Verify whether the text box works as intended on all browsers and platforms.
Test Cases for Multi-line Text Box
- Confirm that the text box supports a combination of the alphabet, numeric values, and symbols as input.
- Test the maximum length for the input. Also, check whether the text box displays the number of words as users type in the input.
- Validate the text box for its functionality of line break or a new line.
- Check whether the text box handles leading and trial spaces correctly.
- Test the behavior of the text box when users copy the input and paste it into the field.
- If there is a need for a large amount of text, ensure that the text box automatically re-sizes or grows as users enter input.
- Check whether the scrolling function works in the above case to make it possible for users to view the entered text.
- Confirm that the text box can be accessed through the keyboard’s Tab key.
- Ensure the text box works perfectly well on different platforms and browsers.
Test Cases for Numeric Text Box
- Check whether the text box supports only numeric values and scientific annotations (if stated in the requirements).
- Test to check it does not accept alphabets and special symbols.
- Check whether the text box displays the appropriate error message when users enter input of the length beyond its maximum limit.
- If the text box accepts negative values, check its behavior after entering negative numbers.
- Check whether it supports a decimal point (.).
- Verify the accessibility of the text box through the keyboard.
- If the text box is used as a counter to increase and decrease the value, check if the buttons for increasing and decreasing work find and can be accessed through the keyboard.
- Validate the text box for the input to fit in the specific range of numbers.
Test Cases for Password Text Box
- Check whether the text box enforces the minimum and maximum password length limitation by entering a random password.
- Test the functionality of the text box for the visibility (show/hide) of the password.
- Check if the text box accepts a combination of special symbols, alphabet, and numeric values.
- Test the text box to verify it distinguishes uppercase and lowercase characters and considers their different characters.
- Check whether the text box supports the paste functionality.
- Confirm the accuracy of the password strength indicator (weak, medium, and strong) by entering random passwords.
Common test cases for the text box are as follows:
- Validate whether the default text is displaying in the field or not.
- Check whether users can type or enter their input when clicking on the text box.
- The height and length of the text box should be the same as mentioned in the requirements.
- Check whether the text box accepts the wrong input and displays the error message to users.
- Test whether users can copy and paste the text in the text field.
- Verify whether the copied text is displayed properly in the text field.
- Check whether users can clear the entered text.
- Verify whether the placeholder text disappears when users enter their text and appears as soon as they clear it.
- Check the behavior if the user enters the wrong or invalid input type.
- Verify whether the text box accepts the suggestions displayed on the screen when users enter their input.
- Confirm that the text box has the appropriate label.
- Check whether the text box works perfectly fine in different browsers.
- Verify its responsiveness on different screen sizes.
- Test whether the text box holds the input entered by a user even after the page reloading or refreshing.
- Validate the text box for its functionality of allowing users to change the entered text.
Test Cases for Button
A button is a graphical user interface element, which is very common. It is a clickable element allowing users to trigger an action or perform a specific function.
Here are the test cases for a button:
- The position and design of the button should align with the guidelines stated in the requirements specification.
- The color of the button should be the same as specified in the requirements.
- Verify the icon on the button if it is specified in the design specifications. For example, the upload or download icons.
- Check the height and width of the button.
- Confirm the button text is related to the functionality the button is expected to perform after users click it.
- Verify whether the button is clickable or not.
- Validate the behavior of the button when it is clicked.
- Upon hovering the button, verify whether the cursor is changed to the hand icon.
- Upon hovering the button, check whether the color of the button changes.
- Confirm that the button state is visually indicated to users.
- Verify the accessibility of the button through the keyboard keys.
- Check that the whole button is clickable and not only the text.
Test Cases for Header
A header is the topmost section appearing on every web page of a website. It consists of different elements, typically a brand logo, navigation menu, and title.
Below are some common test cases for a header:
- Verify that the header is added to a website.
- Check the header’s alignment.
- Confirm the alignment of icons with text added to the header.
- Each icon on a header should be related to its corresponding link text.
- The link test should be visible and readable.
- Verify whether the entire website (all web pages) has the same header.
- Check whether the header is fixed or sticky on all pages as specified in the requirements.
- Verify the clickability of all links included in the header.
- Users should be redirected to the home page when they click on the logo present in the header.
- Check whether the link color in the header changes when users hover over it.
- Verify the availability of the search bar in the header.
- The header should be distinguished from the body section.
- The font size and style should be consistent with the website’s design.
- Verify that all the dropdown options in the headers display the list of options when users hover over or click them.
- The header should be visually appealing and accessible on devices of different screen sizes.
Test Cases for Footer
A footer is the bottom section appearing on every web page of a website. It consists of various elements, such as privacy policies, contact, terms of use, social media links, etc.
The following are the typical test cases for a footer:
- Ensure each web page of a website has a footer at the bottom.
- Validate whether the footer has the color scheme, font size, and font style.
- Verify every essential element is aligned and positioned correctly in the footer section.
- Check whether the links to different elements in the footer are clickable.
- Ensure to have the brand logo in the footer section.
- The click on the logo should redirect users to the homepage.
- Check whether the footer has appropriate social media icons with links redirecting users to the corresponding platforms when they click them.
- Verify there is no broken link in the footer.
- Check whether all elements have equal space between them.
- Test the email field when users try to subscribe to the newsletter (if included).
- Check the functionality of the Subscribe button.
Conclusion
These were some of the most typical test cases for different web elements – the radio button, checkbox, dropdown, button, footer, and header. However, it is important to note that the test cases may vary depending on the website’s requirements and features. The above-listed ones are basic and applicable to any website. So considering them can help you test your website’s basic functionalities.