In TestFirst Automate, we make use of smart selectors, which are built based on the selector name. However, sometimes smart selectors might not work. In such cases, you will have to create your own custom selectors in TF Automate.
Here you can find a comprehensive guide on how to write good custom selectors. In this article, we will cover the usage of Anton, the TestFirst AI Assistant, to help you with creating selectors.
The instructions below are for Chrome browser. However, in any other browser it will be very similar. |
In order to write a selector:
- Inspect the page element you want to use in your test case: right-click the element and in the context menu click Inspect. The Developer tools sidebar will appear in the browser with the Elements tab active and the inspected element highlighted in the code.
- Right-click the highlighted element in the code and click Copy - XPath or Copy - CSS. Whether you pick CSS or XPath depends on which type of selector you would like to create. Read this article to find out the difference.
- Write a prompt to Anton:
Improve CSS/XPath selector: <Selector>
. Replace <Selector> with the text copied from the inspected element. If Anton cannot improve the selector to a satisfactory extent, repeat your request, but provide more details.
Ex.: the XPath for the TestFirst logo on top of this page is/html/body/header/div[1]/a/img
. If I ask Anton to improve it, there is not much that it can do. However, if I typeImprove XPath: /html/body/header/div[1]/a/img, alt="TestFirst Help Center home page"
, Anton will provide me with a good working selector://img[@alt='TestFirst Help Center home page']
- Copy the selector provided by Anton and test it in the page. In the Elements tab of the Developer tools, press CTRL+F and paste the copied selector in the search box. If the selector is working, the element will be highlighted. If it is not, do more iterations with Anton, or create your own selector as described here.
- In TF Automate, click the New Item icon in the Data Repository header. Enter the selector Name, Description (optional), Location, Environment where you want to use the selector, Type (XPath or CSS), and paste the selector generated by Anton into the Value field. Click SAVE.
- Use the selector in your test cases. Simply enclose the selector name in curly braces. Ex.:
When I click "{Selector from data repository}"
.
Read more about Data Repository and how to manage items in it here. |
Comments
0 comments
Please sign in to leave a comment.