Wednesday, June 29, 2016

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.


  1. Radio buttons are from the older days of push buttons in Radio's. When one was pressed any other which was already pressed used to pop out 😊

  2. Radio buttons are from the older days of push buttons in Radio's. When one was pressed any other which was already pressed used to pop out 😊


  3. Royal1688 Full of new online betting games.

    Royal1688 Online casinos have long been available. Online casinos are full of new online gambling games that will make your online gambling games nearly full of boring. Playing online casino games with online casinos is fun and a good start to a good factory.

    Because playing online games with online casino site can make millions of money for you every time you come to use our online casino site, it is not only because of today. Playing online gambling is another good starting point for making money.

    The players will find and experience the atmosphere of the game, where the bets are realistic and play games, online betting is all that we like, we are not limited to who you are, just love and love to play. OF the game our online betting is always welcome and ready to serve you whenever you need it. Royal1688