Web Element Locator Strategies

A Student’s Experience

What Are Web Element Locators?

Back when I started out in technology, I worked for a company that made test equipment for computer chips. For chips, the interfaces are pins, and while you try to exercise the chip for functional test, you did so through the pins. To measure behavior, you did so through the pins. The pins were the locators for the device under test.

Why Do Web Element Locators Change?

Unlike device pins, locators as identifiers might change from build to build — depending on coder practice. Identifiers might be identified in HTML code by ID or Name and can be recognized directly. Others might be identifiable by Class name. At times, the only identifiers are CSS, XPATH or text on the page. You may have to be creative.

Valuing Consistency In Identifiers

Andrew made it clear that locators are code-generated. Sometimes, coders define an application with consistent IDs or names for objects that don’t vary from release to release. These identifiers are excellent for building test automation. Everything else that depends on CSS or XPath — or even named fields — can vary when a coder updates an app.

Added Benefit — Learning Developer Tools

The course uses Developer Tools in Chrome to help show how different identifiers are used to identify specific elements in the DOM. There is a comparable package on Firefox. I had never used Developer Tools before, and I found them to be quite useful and interesting. You can launch Developer Tools from the Chrome menu (View > Developer > Developer Tools). You can use a keyboard shortcut. On my Mac, I launch Developer Tools by pressing CMD-Option-I at the same time. And, lastly, you can use the three dots at the top far right of the Chrome Screen to display the internal menu and pull down to (More Tools > Developer Tools).

Practical Examples Of Identifiers

The course finds web element locators by inspecting the https://www.duckduckgo.com/ search engine.

id="search_form_input",
name="q".

Using Identifiers — Codeless and Coded

The final chapter of the course goes into the meat of the topic — actually using identifiers as web element locators. After you select an identifier, you may test with it. You use identifiers:

  • for input fields to create input data.
  • for buttons to drive actions and behaviors on the page.
  • to validate output fields.

Choosing Codeless

If you’re choosing between codeless and coded engines, think about your current technical skill set and background. Whether using Java, JavaScript, Python or another language, coded engines require coding skills. If you come from a manual test background and don’t know how to code, you likely have a steep learning curve to become proficient with coded tools. Codeless engines have the advantage that they are simpler to learn and run. However, you may still need coding skills to inspect your tests when they fail and figure out what is going wrong.

Choosing Coded

If you’re already a programmer, you will feel right at home with coded test engines. You might be able to use your choice of programming language, or a language you know already, to write tests.

Using Applitools

One thing the course didn’t cover is how Applitools can help. Yes, you can use test code to both apply a test instruction, wait for a response, and measure the result. That’s a great way to think about applying tests to web pages.

What I Take Away

Through this post, I want to share with you a taste of what I got from the course. Being some 20 years out of programming, I make all the rookie mistakes of someone new to this field. And, honestly, that sucks. I like being the smartest person in the room (and, yes, I know it’s a common failing among engineers — we all want to be that person). But, I’m learning as I go forward.

--

--

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
Applitools

Deliver visually perfect web and mobile apps with AI-powered end-to-end visual testing & monitoring. Get started, free: http://bit.ly/ApplitoolsFree