DEV Community

Cover image for Standard Naming Convention for UI Elements to Use with Selenium Locators
Shoeib Shargo
Shoeib Shargo

Posted on

1 1

Standard Naming Convention for UI Elements to Use with Selenium Locators

How many of you have put your Thinking Cap on before writing a variable name? Well, I certainly do more often than not. If you are working on a big project, sometimes it becomes a tedious job to correct variable naming conventions among the team members.

In the case of UI test automation using Selenium or any other tools for that matter, it becomes way more complex to decide variable names for different web elements. Enough with the talks, let’s show you the chart that will help you distinguish between varieties of web elements and keep your sanity in check.

+----------+----------------------------+--------+-----------------+
| Category | UI/Control type | Prefix | Example |
+----------+----------------------------+--------+-----------------+
| Basic | Button | btn | btnExit |
| Basic | Check box | chk | chkReadOnly |
| Basic | Combo box | cbo | cboEnglish |
| Basic | Common dialog | dlg | dlgFileOpen |
| Basic | Date picker | dtp | dtpPublished |
| Basic | Dropdown List / Select tag | ddl | ddlCountry |
| Basic | Form | frm | frmEntry |
| Basic | Frame | fra | fraLanguage |
| Basic | Image | img | imgIcon |
| Basic | Label | lbl | lblHelpMessage |
| Basic | Links/Anchor Tags | lnk | lnkForgotPwd |
| Basic | List box | lst | lstPolicyCodes |
| Basic | Menu | mnu | mnuFileOpen |
| Basic | Radio button / group | rdo | rdoGender |
| Basic | RichTextBox | rtf | rtfReport |
| Basic | Table | tbl | tblCustomer |
| Basic | TabStrip | tab | tabOptions |
| Basic | Text Area | txa | txaDescription |
| Basic | Text box | txt | txtLastName |
| Complex | Chevron | chv | chvProtocol |
| Complex | Data grid | dgd | dgdTitles |
| Complex | Data list | dbl | dblPublisher |
| Complex | Directory list box | dir | dirSource |
| Complex | Drive list box | drv | drvTarget |
| Complex | File list box | fil | filSource |
| Complex | Panel/Fieldset | pnl | pnlGroup |
| Complex | ProgressBar | prg | prgLoadFile |
| Complex | Slider | sld | sldScale |
| Complex | Spinner | spn | spnPages |
| Complex | StatusBar | sta | staDateTime |
| Complex | Timer | tmr | tmrAlarm |
| Complex | Toolbar | tlb | tlbActions |
| Complex | TreeView | tre | treOrganization |
+----------+----------------------------+--------+-----------------+

In addition to the above naming convention, you can use loc_ as a prefix for locators. For example:

@FindBy(xpath = ".//*[@id='lastName']")
public WebElement loc_txtLastName;

Thank you for reading so far. Hope it was helpful in some way. Nonetheless, I will keep writing such articles based on my experience and knowledge that may help you with the day-to-day tasks as a Test Automation Engineer. Stay connected!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay