The 'innerText' property is not found in the 'Element' type

Question

The 'innerText' property is not found in the 'Element' type

Currently, I am working with Typescript and Puppeteer. My goal is to extract the innerText from an element.

const data = await page.$eval(selector, node => node.innerText);

However, I encountered an error:

The property 'innerText' is not present in type 'Element'

I attempted to cast it as HTMLElement following advice from this question: error " Property 'innerText' does not exist on type 'EventTarget' "?

const data = await page.$eval(selector, <HTMLElement>(node: HTMLElement) => node.innerText);

In addition, I tried creating my own Interface like this:

interface TextElement extends Element {
    innerText: string;
}

Nevertheless, each attempt resulted in the same error stating that innerText is not found in the specific type of element.

The property 'innerText' is not present in type 'HTMLElement'

What could be causing this issue and how can I resolve it?

javascript typescript puppeteer

Answer 1

Answer №1

If you encounter this issue, you can resolve it using the following code snippets:

const data = await page.$eval(selector, node => (node as HTMLElement).innerText);

Alternatively:

const data = await page.$eval(selector, node => (<HTMLElement>node).innerText);

UPDATE:

Following discussions on Github, it has been clarified why the syntax in question may not work. It essentially defines an anonymous generic function.

<HTMLElement>(node: HTMLElement) => node.innerText

A clearer example is as follows:

function myFunction<T>(node: T) {
    node.innerText; // Property 'innerText' does not exist on 'T'
}

const data = await page.$eval(selector, myFunction);

The choice of naming T as HTMLElement may lead to confusion in this scenario.

Answer 2

If you encounter this issue, you can resolve it using the following code snippets:

const data = await page.$eval(selector, node => (node as HTMLElement).innerText);

Alternatively:

const data = await page.$eval(selector, node => (<HTMLElement>node).innerText);

UPDATE:

Following discussions on Github, it has been clarified why the syntax in question may not work. It essentially defines an anonymous generic function.

<HTMLElement>(node: HTMLElement) => node.innerText

A clearer example is as follows:

function myFunction<T>(node: T) {
    node.innerText; // Property 'innerText' does not exist on 'T'
}

const data = await page.$eval(selector, myFunction);

The choice of naming T as HTMLElement may lead to confusion in this scenario.

Answer 3

Answer №2

If you are looking to resolve the issue with an element that is retrieved using the querySelector method, you can follow the code snippet below:

const element = document.querySelector<HTMLElement>('#container');

if (element) {
  element.innerText = newTextContent;
}

Answer 4

If you are looking to resolve the issue with an element that is retrieved using the querySelector method, you can follow the code snippet below:

const element = document.querySelector<HTMLElement>('#container');

if (element) {
  element.innerText = newTextContent;
}

Answer 5

Answer №3

To tackle this problem, I successfully employed the following syntax:

const heading = (document.querySelector(".specificselector") as HTMLHeadingElement)?.innerText;

I needed to identify the precise element causing the problem. It might be advisable to opt for a different type instead of HTMLElement when formulating the question.

Answer 6

To tackle this problem, I successfully employed the following syntax:

const heading = (document.querySelector(".specificselector") as HTMLHeadingElement)?.innerText;

I needed to identify the precise element causing the problem. It might be advisable to opt for a different type instead of HTMLElement when formulating the question.

The 'innerText' property is not found in the 'Element' type

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to prioritize items on a list in JavaScript?

Is it possible to create a button function in HTML that can alter the CSS image tag?

Dynamically populate select options using Spring Boot Ajax technology

Customize Your AJAX POST URL with Radio Buttons - A Step-by-Step Guide

Navigating through the properties of an object within an array using Angular

Insert the user's choice as a MenuItem within the Select component

In order to resolve the issue in nextjs 13 where the argument is of type 'any[] | null' and cannot be assigned to the parameter of type 'SetStateAction<never[]>', a potential solution may involve explicitly checking for null values

Obtaining data from the following entry in JSON format using the Twitter API

What sets 'babel-plugin-module-resolver' apart from 'tsconfig-paths'?

Decoding a formatted string

Utilizing jQuery to efficiently chunk JSON data through AJAX calls

Tips for mocking the router.navigate function in Jest

Calling Array.prototype.slice results in an array with no elements

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

Update image attributes (such as src, alt, etc.) after a successful AJAX request (and also help me troubleshoot my AJAX

Unable to employ Javascript while utilizing AJAX within jQuery Mobile

What could be causing my Jquery fade effect to not function properly?

Use the Google Maps API to dynamically add a marker via AJAX once the map has been initialized

Maintaining a security token across multiple requests

Tips for automatically loading a new page or URL when a user scrolls to the bottom