Property 'innerText' does not exist on type 'Element'

Question

I'm using Typescript for Puppeteer. I'm trying to get innerText from an element.

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

I'm getting the error:

Property 'innerText' does not exist on type 'Element'

I tried casting to HTMLElement like described in this question: error " Property 'innerText' does not exist on type 'EventTarget' "?

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

As well as creating my own Interface like this:

interface TextElement extends Element {
    innerText: string;
}

But in each case I'm getting the error that innerText does not exist on this particular type.

Property 'innerText' does not exist on type 'HTMLElement'

Why is this happening and how to deal with this?

Have you considered using the more standard textContent instead? — CertainPerformance
Why don't you try this - await page.evaluate(() => document.querySelector("your_selector").innerText) Before trying execute in console this document.querySelector("your_selector").innerText to check whether you're getting the required result. — PySaad
@CertainPerformance - You're right that textContent seems to work. However I actually really need the additional features of innerText. But I wonder why it won't work even on my own Interface? — Scruffy
innerText may sometimes be preferable to textContent if there are child elements and whitespace in the mix. perfectionkills.com/the-poor-misunderstood-innerText — simmer

Nenad Nenad · Accepted Answer · 2019-08-19T07:07:31

You can fix it like this:

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

or:

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

UPDATE:

So, after some exchange on Github, it's clear why the syntax from this question does not work. It actually defines anonymous generic function.

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

Clearer example would be following:

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

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

Unfortunate naming of T as HTMLElement creates confusion.

Property 'innerText' does not exist on type 'Element'

1 Answers