A Complete Beginners Guide to Front End Automation : Step 1 — Elements & Selectors

A topic that I’ve seen CONSTANTLY online throughout the years is ‘I want to start writing automated front end tests, where do I start? What language do I use, there’s so many? What framework do I use? What about this record and playback tool?’

My response to this has always been the same, to quote Shia LaBeouf: “JUST DO IT!”

Use ANY language, use ANY framework, just start something — even if you decide to switch languages/frameworks later on (trust me, you will), the skills and experience you gain are valuable and transferable.

I’ve been there myself — I’ve tried using Selenium Webdriver in Java, C# and Ruby before fully committing to JavaScript.

So enough talk, let’s get started!

I’m going to assume you’re using Chrome as your browser, these skills are transferable to any modern web browser so it doesn’t matter. So, open Chrome and navigate to the below page:

This is a nice fake eCommerce website used for Selenium testing (If anyone knows the creator, please let me know and I’ll glady give credit.)

The homepage consists of many elements.

Home Page

We have a banner image at the top, a small header that contains a contact number along with some ‘Contact Us’ links, a website logo, a search bar, a cart/bag etc.

In your browser, right click inside the search bar and click ‘Inspect Element’

Chrome’s Dev Tools should open and you should see something like this:

Search Bar — Dev Tools

Notice the HTML that is highlighted blue? This is all related to the search bar we just ‘inspected’.

Let’s see what we have:

Input Tag — This means the element expects input from the user. This can be a text entry field, password entry etc.

Class — The element has 3 classes ‘search_query’, ‘form-control’ and ‘ac_input’. Classes can be used by designers/front end developers to apply styling to all elements that have specific classes. We software testers also have a great use for classes, I’ll explain this in the next article.

Type — Before, I said an Input tag can be text, password, email etc. This is telling us that the Input element is a text entry element. What happens if we double click the ‘text’ value and change it to ‘password’? Hmm…

Changed type=’text’ to type=’password’

Start typing in the Search Bar and see how it has been effected…

Search Bar is now masking the input!

See how we’ve modified the HTML to trick the Search Bar into thinking it’s a now a Password entry field.

You can also do this with password fields too and reveal people’s passwords that are saved on your machine!

Fake Facebook Login
Before
After
Now I know your password

ID — This is an identifier on the element. As you can see, the Search bar has the ID ‘ search_query_top’. As Software Testers, elements having IDs is the ultimate goal. Again, I’ll explain why this is important in the next article.

Name — Another form of identification/referencing. Similar to ID.

They’re the only attributes we’re interested in for now.

Let’s look at some other elements throughout the site.

Logo and ‘buttons’

Look, we have a logo and 3 buttons. WRONG!

Right click the ‘WOMEN’ button and Inspect Element.

Women Button — Dev Tools

Notice the ‘a’ tag next to the left of ‘href’, this means this is a link.

A Tag — This means the element is a link. Clicking this will direct the user to the URL specified in the ‘href’ attribute.

HREF — As mentioned above, clicking the element will take the user to that location.

Title — The title attribute can have many uses. Search Engine rankings, accessibility (moving your mouse cursor over the ‘WOMEN’ link will eventually display the ‘title’ etc.

Next, let’s inspect the logo.

Logo — Dev Tools

IMG Tag — This means it’s an image…

SRC Attribute — The ‘source’ of the image. Right clicking the ‘src’ value and opening it in a new tab will simply open a tab displaying the image.

ALT Attribute — If the image cannot be displayed for some reason, the ‘alt’ value will be displayed instead. We can test this by modifying the ‘src’ to something that doesn’t exist:

Logo.blah
Broken Logo — Showing Alt

Width & Height Attributes — Self explanatory really. This is the size of the image in pixels. This can also be tested by drastically reducing the width and height:

Logo width and height changed
Logo Is Tiny

If you progress through the fake checkout, you’ll reach the ‘Your Personal Information’ form.

Title Radio Buttons

Go on, inspect the ‘Mr.’ radio button.

Mr Radio Button — Dev Tools

There’s a lot going on here, but we’re mostly interested in the input tag.

We have a new input tag that we haven’t seen before, a radio button.

In my experience, I’ve seen this used where at least one options has to be picked. Whether it be a customers ‘title’, ‘gender’, ‘religion’ etc. Some sites use dropdown menus for these type of values.

As a software tester, notice there is a ‘Class’ with the value ‘checked’

I wonder what happens if we click the ‘Mrs.’ radio button?

The class has gone!

As you can see, the ‘Checked’ class has now gone. If you inspect the ‘Mrs.’ radio button, you’ll see that now has the ‘Checked’ class.

Noticing changes to the HTML like the above will definitely help you when you start writing your automated tests.

I’ve seen many websites register the ‘selected’ radio button in different ways. The above, using a class, is just one of the ways a developer might do this.

Still with me? Let’s inspect one more element before finishing this article:

Inspect the second dropdown under ‘Date Of Birth’

Month Dropdown Menu — Dev Tools

Select Tag — You guessed it, this tells us it’s a dropdown menu (or a select menu)

Notice there are several child elements below the ‘months’ dropdown? These are obviously our dropdown ‘options’ — denoted by the word ‘option’

Each dropdown has two points of interest for us soon-to-be test automation engineers.

Value — This is like an ‘Id’ for each dropdown value. The dropdown text can be changed, whether it’s intentionally done by the front end developer or by it changing based on the chosen language. This will also make sense in the next article when we start writing our tests…

&nbsp??? — You’re probably wonder what is ‘&nbsp’ This stands for ‘None-breaking space’ If you double click the value ‘January&nbsp’ you’ll notice that it changes to ‘January ’ (notice the 1 character space after the word ‘January’. As a software tester I’m sure you’ll grow to love trailing spaces like this…ha!

Anyway, this article has gone on long enough!

Now that you have a basic understanding of tags, classes, IDs etc. we can start writing some actual automated tests in the upcoming articles!

Stay tuned and I appreciate any feedback. This is the first time I’ve ever written an article/blog post so apologies for mistakes etc.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store