JS Steps for Elements
  • 09 Apr 2024
  • 2 Minutes to read
  • Contributors
  • Dark

JS Steps for Elements

  • Dark

Article summary

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
    Screen Shot 2022-08-17 at 6.29.18.png
  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:

Screen Shot 2022-08-17 at 6.37.08.png

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!

  • When recording at mobile size (375x812), to add a "JS steps for elements," you need to first click on the target element to focus it, and then add a "JS steps for elements." During this process, an unnecessary click step will be recorded, so please delete this step.
    • Immediately after finishing local replay, if you add a "JS steps for elements" without clicking on the target element, the step will not be added to the scenario.
    • If you add a "JS steps for elements" without clicking on the target element after clicking on another element, a "JS steps for elements" for the other element will be added.
  • 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.

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.