User Guide

Welcome to the POMBuilder wiki!

This wiki contains documentation for POMBuilder. You can add this extension to Chrome here.

View, Copy and Paste Your Locator in the POM Builder Tab

1. Right click on the element you want to locate.
2. Select Inspect
3. Chrome DevTools will open
4. Under the Elements tab, select the POM Builder tab (it's usually the last tab on the right)
5. You can click directly on the DOM tree or use the Identify pointer of Chrome DevTools to select your desired element
6. In the POM Builder tab, Smart Gen recommends the best locators for the selected element.
7. Click the Copy button next to a locator to copy its value
8. Click the Find button next to a locator to test it.
9. If you see that the Locator Test returns 1/1 (the locator uniquely identifies the element), you're safe to use that locator. Copy it to the corresponding page object in your test project (Protractor, Selenium and TestArchitect).
10. If the Locator Test returns 0/0 or 1/X (the locator doesn't retrieve any element or the locator points to multiple elements), you must refine the locator until it returns 1/1

Quick Copy

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 in the clipboard
4. Feel free to paste it anywhere you want

Define New Output Templates

Currently, POM Builder supports 4 types of output:

• Raw Value: A 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

If you are using another test 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 a valid locator output.

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

To save time, you could take advantage of POM Builder Template Configuration feature to define your customized output template.

1. Open POM Builder tab in Chrome DevTools

2. Click the button

3. In Template Configuration, click Add New

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

5. Review the Example Result value to check whether your defined output is valid then click Apply to save the new template

6. Selenium JS will appear in the Output dropdown list.

7. Select it then copy a locator. The locator will be copied to clipboard in your pre-defined template.

8. When you paste it to any editor, you'll see something like the below.

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