User Guide

POM Builder User Guide

POM Builder is a powerful browser extension that instantly generates robust web element locators (XPath, CSS selector, ID, Name, etc.) for all test automation frameworks.

Find a locator using the POM Builder Tab

You can select the element you wish to locate in various ways:

1. By right clicking the element and selecting Inspect

2. By clicking on the element in the Element Inspector

3. Or by using the Identify pointer from Google Chrome's or Microsoft Edge's Devtools.

You can test the locator with the button and refine it until only 1 element is found using that locator.

Finally, you can select your desired output format and copy the expression using the button.

Quick Copy

Quick Copy lets you easily copy a suggested locator from the right-click context menu.

1. Right-click on the element of interest
2. Select POM Builder – Quick Copy > There are 3 options available:

• Suggested Locator: the most reliable locator as recommended by POM Builder. You should use it for better performance and stability. It could be a single attribute, a CSS Selector or an XPath locator.
• CSS Selector: A CSS Selector that uniquely identifies the selected element
• XPath: An XPath locator that uniquely identifies the selected element

3. After making your selection, the selected locator will be saved to the clipboard
4. Feel free to paste it anywhere you need

Note: Quick-Copy uses that last Output Template you selected in the POM Builder Dev Tools tab.

Output Templates

Currently, POM Builder has 5 default output temples:

• Raw Value: The raw value of the element locator
• Protractor: A locator template written in Typescript for Protractor projects
• Selenium Java: A locator in the standard Java syntax used to locate elements in Selenium
• TestArchitect: An interface element used in TestArchitect
• WebdriverIO: A locator template written in Typescript for WebdriverIO projects.

As of March 12th 2021, the only output template that supports Shadow DOM elements is the WebdriverIO template.

Defining a new Output Template

If you are using another testing framework which has a different syntax, you can add a new output template, e.g. driver.findElement(webdriver.By.%type(%value)) in which %type and %value are the macros for the locator type ('Id') and its value ('someID') respectively. Remember to put them in your template for in order output valid locators.

EXAMPLE

Let's say you're using selenium-webdriver to write your Selenium tests in Javascript, and you frequently define you element locators like below:

To save time, you can take advantage of the POM Builder Template Configuration feature to define your custom output template.

1. Open the POM Builder tab in Chrome or Edge DevTools

2. Click the button

3. In Template Configuration, click Add New

4. Create a new output template named Selenium JS.
   Note that %type is the macro for the locator type and %value is the macro for the output value.

5. Selenium JS will appear in the Output dropdown list. You can select it and copy a locator in the format you've defined.

6. When you paste it to any editor, you should see something like the following.

driver.findElement(webdriver.By.id(identifierId))