Get the text content from elements using JS Steps

Get the text content from elements

By using JS Steps in Autify, you can get the text content from elements and use that content in any following steps.

There are two ways to do this:

• Using JS Steps for Elements, which gets the target element with Autify AI
• Using the Get text content snippet and setting the CSS selector

How to use JS Steps for Elements

There are several advantages to using JS Steps for Elements instead of normal JS Steps:

• Autify AI gets the element, so you don't have to get its CSS selector/XPath
• Requires less code, since you don't need to write code to get the element
• Automatically waits for the page to finish loading and for the element to appear
• The target element is highlighted in the test result’s screenshot

Step creation guide

1. During recording right-click on the target element, select [Autify Recorder] > [Add JS step], and click [Save].
   

2. After clicking [Save], a JS step with an element argument will be created in the scenario. The element contains the target element located by Autify AI.
   
   Since the target element is already included in the element argument, all you need to do is insert the following line to return the textContent of the target element.

return element.textContent;

3. Run the test to confirm that the text content of the element is returned.
   

To make it easy to understand the target element of the JS Step, the element will be highlighted in the test result’s screenshot.

Troubleshooting

If Autify AI fails to locate the element, you can try one of the following solutions below:

• Use Quick Element Update to update the target element (recommended)
• Use a locator to stabilize the element's location
  • Even though you will need to manually get the CSS selector or XPath of the target element to use a locator, you will still gain the remaining advantages of this step type

How to use the "Get text content" snippet

JS Steps for Elements is our recommended method to get text content from elements. However, if the target page implements its own right-click menu, JS Steps for Elements cannot be used. In such cases, use the "Get text content" snippet instead.

Step creation guide

1. Add a JS Step to the scenario, copy the code from the Get text content snippet, and paste the code into the JS step.

2. Get the CSS selector of the target element by referring to Get CSS selector / XPath and replace <TODO: REPLACE SELECTOR> in the code with the selector.

// Before:
var selector = "<TODO: REPLACE SELECTOR>";

// After (the value is an example):
var selector = "#doc_header > div.landing_top > div > div.landing_top_inner.center > h1";

3. Run the test to confirm that the text content of the element is returned.
   

Additional Information

If the expected text value is not retrieved from the element using textContent, you can try using innerText instead.