Testing Buttons

Buttons tend to be something that it's easy to forget about.  The "Save" button is so ubiquitous that it seems like it would just work.  But overlooking testing buttons on a page can also mean overlooking bugs.  Recently someone told me about new functionality she was testing on an existing web page.  The new feature worked great, but her team forgot to test the "Delete" button.  It turned out that the developers had forgotten to account for the delete action in their new feature, and now "Delete" did nothing! 

Here are a few things to think about when testing buttons:

1. Test the "happy path" of the button.  Usually buttons have some sort of message on them that tell you what they are supposed to do.  So try it out, and make sure that the button delivers on its promise!  Did the "Save" button really save your data?  Did the "Delete" button delete it?  Did the "Clear" button clear it?  Did the "Search" button execute a search?  (Note: a "Back" button is also common, but back buttons are tricky enough that I will be saving them for a separate post.)

2. Misuse the button.  For example, quickly press the "Save" button twice when adding data.  Were two records saved instead of one?  Does a button get confused when you press it twice?  What about when you quickly press one button and then another?  One of the most amusing bugs I have found in my career was a "Refresh" button that redrew the screen, making the button larger whenever I pressed it.

3. Is the button there when it's supposed to be?  When we have spent a lot of time testing an application, it's easy to get used to the page and not notice when things are missing.  Think about your user stories when looking at the page.  What would your user need when doing certain activities on that page?  Follow the path that the user would take, and check for the buttons as you go.

4. Think about when the button is enabled and when it is disabled.  Does it make sense?  For example, is the "Save" button only enabled when all the required fields on your form have been filled out?  Is the "Clear" button only enabled when a field has been dirtied?  How do you know the button is enabled?  Can you tell by looking at it?  Does the button look enabled when it isn't?  Does the button look disabled when it's really active?  What happens when you press the button and it's not enabled?  Do the enabled and disabled rules for the button make sense?

5. Finally, see if you can hack your buttons!  For example, if you have a "Save" button that is disabled on your form because some of the required fields are missing, can you edit the html on the page so that it is enabled, and can you then use the button?  If you view the html and you see that there is a hidden button on the page, can you make it visible and active?  At best, that bug is an annoyance that will get inaccurate data into the database.  At worst, the bug represents a way that a hacker can infiltrate your system!  Imagine that you have a button that should only be visible and enabled if a user is an administrator.  If a malicious user can make that button appear on the screen and be active, they will have access to pages or features that only an admin should have. Your developer should include checks whenever a button is clicked on to make sure that the user has the rights to do what the button does. 

If you have never edited the html on a web page while testing, here are a few simple instructions for the Chrome browser:
a. Click on the three-button menu on the top right of your screen, and choose "More Tools -> Developer Tools".  A new panel will appear on the bottom or the right side of your screen.
b. Right-click on the button you want to test, and click "Inspect".  In the developer tools panel, you will now see the html for that button highlighted.
c. Right-click on that highlighted text and choose "Edit as HTML".  An editable text window will open up. 
d. If you see text such as "'disabled'=disabled" delete the text.  Click away from the editable field, and see if your button is now enabled. If it is, click on it and see what happens!
e. To find hidden buttons, look at the html in the developer tools, and use the search bar to search for "button".
f. If you find a button with the markup "ng-hide", try changing it to "ng-show".  See if you can get the button to appear on the page!

Buttons are one of the most important things to test.  Just imagine a user's frustration if the button they are trying to use is disabled, or doesn't do what they expect it to.  By being diligent in our testing, we can ensure that our users will want to work with our application.