Extract InnerHTML from

Question

Is there a way that I can extract the following data in Chrome Devtools Console.

Currently I do the following in the console of the chrome devtool:

$x("//a") 

I get a list with all the a tags and I need from all the a.username the InnerHTML or the innerText

86: a
87: a.username
88: a
89: a
90: a.username
91: a
92: a
93: a.username
94: a
95: a
96: a.username
97: a
98: a
99: a.username
[100 … 198]
100: a
101: a
102: a.username
103: a
104: a
105: a.username
106: a
107: a
108: a.username
109: a
110: a
111: a.username

It's unclear for me how to proceed further into getting this. Lots of terminology makes it unclear what the InnerHTML is from the a tag and how to extract this for all the same a.username

hrefTranslate: ""
hreflang: ""
id: ""
innerHTML: "**Ineedthis**"
innerText: "**Orthis**"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""

Answer 1

The simplest solution would probably be something along the lines of

function extractInner(selector){
     let elements = document.querySelectorAll(selector);
     let toReturn = [];
     elements.forEach(x=>{
         toReturn.push(x.innerHTML);
     });
     return toReturn;
}
extractInner("a.username");

this returns you a list of string containing the innerHTML of all your links with class username.

Answer 2

What you get in the console (a.username) is the CSS selector, if you are using xpath you will need a[@class='username'].

Try something like this

$x("//a[@class='username']")[0].innerText

The $x("//a[@class='username']") will return a list of zero-indexed elements. So [0] will select the first element of that list and so on.