---
title: "Get the text content from elements using JS Steps"
slug: "get-the-text-content-from-elements-using-js"
updated: 2024-09-10T01:54:55Z
published: 2024-09-10T01:54:55Z
canonical: "help.autify.com/get-the-text-content-from-elements-using-js"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.autify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Get the text content from elements using JS Steps

## Get the text content from elements

By using [JS Steps](/docs/en/javascript-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](/docs/en/js-steps-for-elements), which gets the target element with Autify AI
- Using the [Get text content](https://javascript-snippets.autify.com/snippets/values/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](/docs/en/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]. ![en-add-js-step](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/en-add-js-step.png?sv=2026-02-06&spr=https&st=2026-10-30T12%3A16%3A32Z&se=2026-10-30T13%3A16%3A32Z&sr=c&sp=r&sig=jOIHXAAnABKxrQaF1EJGnjNG4O28nqq%2BtRvxCyuHWIY%3D)
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. ![en-element-argument](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/en-element-argument.png?sv=2026-02-06&spr=https&st=2026-10-30T12%3A16%3A32Z&se=2026-10-30T13%3A16%3A32Z&sr=c&sp=r&sig=jOIHXAAnABKxrQaF1EJGnjNG4O28nqq%2BtRvxCyuHWIY%3D) 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;
```

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

![en-return-value-js-step-for-element](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/en-return-value-js-step-for-element.png?sv=2026-02-06&spr=https&st=2026-10-30T12%3A16%3A32Z&se=2026-10-30T13%3A16%3A32Z&sr=c&sp=r&sig=jOIHXAAnABKxrQaF1EJGnjNG4O28nqq%2BtRvxCyuHWIY%3D)

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

![en-screenshot-js-step-for-element](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/en-screenshot-js-step-for-element.png?sv=2026-02-06&spr=https&st=2026-10-30T12%3A16%3A32Z&se=2026-10-30T13%3A16%3A32Z&sr=c&sp=r&sig=jOIHXAAnABKxrQaF1EJGnjNG4O28nqq%2BtRvxCyuHWIY%3D)

#### Troubleshooting

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

- Use [Quick Element Update](/docs/en/quick-element-update) to update the target element (recommended)
- Use a [locator](/docs/en/add-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](https://javascript-snippets.autify.com/snippets/values/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](/docs/en/how-to-get-css-selectors) 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";
```

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

![en-return-value-normal-js-step](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/en-return-value-normal-js-step.png?sv=2026-02-06&spr=https&st=2026-10-30T12%3A16%3A32Z&se=2026-10-30T13%3A16%3A32Z&sr=c&sp=r&sig=jOIHXAAnABKxrQaF1EJGnjNG4O28nqq%2BtRvxCyuHWIY%3D)

## Additional Information

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