Capture the Text of an Element using innerText()

What is innerText and textContent?

In JavaScript, innerText and textContent are two properties that are used to access and modify the text content of an element on a web page. By default, when you select an element using Whatfix, the element text is captured using textContent().

Here are some key differences between the two:

For example, consider the following code snippet:

<div id="test">
  Hello <span style="display: none;">world</span>!
</div>

let element = document.getElementById("example");
console.log(element.textContent); // Output: Hello world!
console.log(element.innerText); // Output: Hello !

In this snippet, the element with the ID test contains a hidden element with the text world. Here's how the output varies:

• element.textContent outputs “Hello world!” (including the hidden text).
• element.innerText outputs “Hello!” (excluding the hidden text).

Why should I override Text Content with Inner Text?

When Override Text Content with Inner text is enabled, instead of capturing the textContent property of selected elements, Whatfix captures the innerText property. Here’s why:

• Visibility: By using innerText, only the text content visible to the user on the screen is captured.
• Hidden Elements: Certain text elements may be hidden or styled in a way that makes them invisible to the user. Despite this, they are still captured by the textContent property. Using innerText ensures accuracy.

Use the following steps to override textContent with innerText:

5. Click Common Properties.
   

6. Select the Override text content with inner text checkbox.
   

7. Click Add.
   

8. Enable the Override text content with inner text toggle.
   

9. Click Save.