How to test drop down lists on websites?

We all are familiar with the drop-downs on website. It is used to list a series of items under a box/menu. Suppose we have a page which lists apparels. And in apparels we have categories like shirts, t-shirts, trousers etc. We can sort these categories with the help of a drop-down (select tool). The working of drop-down is in such a way that, by default the drop-down will list only one item. When user clicks the down arrow which is displayed near to the menu, the drop-down will be dropped down and will list all the choices below. The drop-down may have pretty large list of items. So in order to select the down most items, there will option for users to scroll down. These are the primary things about a drop-down. Now lets see the test cases for testing the drop-down.

• Ensure the design of the drop-down i.e. its alignment with other items on the page on all common browsers.
• Ensure that the drop-down accommodates the longest text within its boundary.
• Ensure that the drop-down can be scrolled down on clicking the down arrow.
• Ensure that the drop-down has a proper title.
• Ensure that the default item is getting displayed when the user first visits the page.
• Ensure that on clicking the down arrow all items are getting listed in its expected order.
• Ensure the spelling, font and style of the text inside the drop-down.
• Ensure that on clicking the categories, the page displays the corresponding items.
• Ensure that the selected category is getting highlighted on selecting the item.
• Ensure the time taking in loading the items under each category. Too much time should not be taken for loading the items.
• If the list (of items) of this drop-down is controlled by some other selection (say in another drop-down or check-box, radio-button) then ensure the correctness of the items in this drop-down.
• If the selection in this drop-down is controlling some other control (say, enabling/disabling etc) then check the proper action.
• Ensure that on pressing an alphabet on the keyboard, categories starting with that alphabet is getting highlighted.
• Ensure that the user is able to select the categories/items by pressing the down key on the keyboard.

While testing drop-down it is of foremost importance that you ensure the design of the drop-down on all browsers. Browser compatibility testing is an important factor, since the design/alignment of the drop-down may change on various browsers which is a commonly noted issue. Since drop-down is a simple and common feature that we come across on almost all websites, I hope this article will help you. Feel free to contribute your suggestions. If you have additional test cases on this topic, do contribute. Enjoy testing:)