In JS Steps, there are often situations where your operation is achieved by the following steps.
- Select an element
- Interact with the selected element
In the past, it was always necessary to select an element in a JS step using
querySelector() or similar methods, but now there is another way to select an element from the screen and pass it as an argument to the JS step.
Using this method, you no longer need to write CSS selectors or XPaths to select elements to be handled in a JS step!
The usage is as follows:
- Start recording with Autify Recorder
- Navigate to the page that includes the target element
- Right click (Or
Ctl + Clickon Mac) on the element
Add JS stepin the context menu
Saveon the Recorder
Now you have a new JS Step with an argument,
element. This is the element selected while recording, and you can implement whatever you want to do on this
The following example triggers double click on the selected element. You may notice that the code for selecting elements is no longer needed:
One of the great things that JS Steps for Elements offer is that the target elements can be found even after the site structure slightly changes, as AI works on finding this element. This is in contrast to the need to update JS Steps when the complete matching element with the specified CSS selector or the XPath is no longer available. This would significantly reduce the cost of maintenance required for JS Steps!
If you want to select elements under specific rules without relying on AI, such as always specifying the Nth element, this feature may not be suitable for use. You may want to continue to specify elements with CSS selectors or XPath in such cases.