JS Steps for Elements

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:

1. Start recording with Autify Recorder
2. Navigate to the page that includes the target element
3. Right click (Or Ctl + Click on Mac) on the element
4. Click Add JS step in the context menu
   
5. Click Save on 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 element with a plain JavaScript.

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!