In this tutorial, let’s cover test cases for Accordion. This component is often used in support pages where FAQ’s are arranged These widgets work similar to tabs however, by default Accordion has hidden property till the mouse button is clicked on them.
Please take a look at the screenshot shown here. This is the accordion widget that we are going to test. If you don’t wish to test this accordion then I suggest finding a bit more complex accordion widget for your tests, so that you can get even more test cases from it.
Test cases for accordion
Verify if the accordion opens the content of the section clicked.
Verify if the accordion hides the content which is not clicked.
Check if the accordion accepts the mouseclick action or mousehover.
Check if the accordion has any auto-height property that adjusts the height of the section based on the text content inside.
Check if the section is collapsed with mouse hover properly.
Check if the sections are sort-able.
Verify the width and height of the sections in the accordion.
Verify if the expanding of the section does not break any other elements on the page.
Verify if the expanding of the section is relevant to the mouse click or mouse hover.
Verify if the expanding is focused and does not auto hide.
Verify the default state of all the collapsed sections of the accordion widget.
Check if this state of the accordion is as per the specification for the webpage.
Check if the sections of the accordion are logically arranged as expected.
Check if the sections toggle properly.
Check if the behavior of the toggle is limited to the section and doesn’t interfere with the entire placing of the accordion.
Check if the all the sections can be expanded and close back again.
Check if the the accordion color is as per the specification.