AUTOMATION 13 - GUI checking 1, exploring with developer tools

Technical level: **

In this next section, we're going to start to explore the use of automated GUI checking.  I'm going to focus this down onto browser based GUIs for ease.  Indeed most applications today are web-based (at least the ones I seem to test), so this isn't a major assumption.

To help us get there, today I'm going to introduce you to the developer tools on your browser.

For every browser the developer tools are slightly different.  For Firefox and Chrome currently all it takes is selecting F12.

These tools allow you to peek at the code that makes up a web page.  One of the most useful is the inspection icon which allows you to select an item from the page, and it will show you the code and the name for it.  The icon looks like this,

When I select the Google search box on my browser, it shows me this,

And here I am selecting my gender as female for Facebook,

The starting part of thinking about driving GUI tests is understanding some of the page elements of your system.  It's something we probably do intuitively as testers, however automation requires we specifically state actions (as we've talked about previously).

Here are some common page elements - if any seem unfamiliar, spend some time looking them up.

• Labels and text - any textual information displayed to the user
• Fields - this is where you as a user can enter test into
• Button - an item on the page which causes an action when selected
• Checkbox - an item which can clearly be toggled between being selected and deselected
• Radio buttons - a cluster of buttons which when selected will deselect any others in the group which have been selected.  [Bonus - tell me in the comments below why they are called radio buttons]
• Drop-down list - the user is presented a list of items to select

Next time we'll take the next step, and use this understanding of web elements to perform some basic steps.

Extension material

• Look up the web elements I've talked about, and think about how they can be manipulated.  Drop me a line below on how radio buttons got their name!
• Find out what the developer tools are like on other browsers.
• Use the developer tools to select different page elements on a range of systems - especially anything you test at work.  Have a go at reading the information about the elements, and don't be afraid to try and demystify what you read by asking around or Googling.