How to read HTML source from Google Chrome (xPath and QuerySelector do not read the correct information)

[cdthomer]

Howdy folks, I'm trying to figure out how to read part of a website's HTML from Google Chrome.

Thanks to some great topics on the forum I've tried the usual methods of getting it via it's xPath or QuerySelector. However, the part I need to extract is a dropdown menu which has several options, and both xPath and QS reads all of those items, not the currently selected item.

Ideally I could read the entire HTML source to the clipboard using the Get URL action, and then use RegEx to extract the data, but the website when read via that method just returns HTML indicating I'm using an outdated browser that it's not compatible with. Sooo...... I'm kind of stuck.

Here is the relevant HTML... and I can provide the entire source code in a PM if needed (prefer not posting it on a public forum for security purposes).

EDIT: Thanks @dealtek for the tip to make the HTML more legible.

<select class="form-control ng-valid ng-not-empty ng-touched ng-dirty" ng-model="vm.person.Status" ng-change="vm.statusChanged()" ng-disabled="vm.statusDisabled()" style="height: 35px;" disabled="disabled">
<!-- ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Unavailable" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope" style="">Unavailable</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Available" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Available</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Ringing" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Ringing</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Alerting" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Alerting</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="InCall" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">InCall</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Offline" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Offline</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="AvailablePhone" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">AvailablePhone</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Away" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Away</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="NotAvailable" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">NotAvailable</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Reconnect" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Reconnect</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="AfterCallWork" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">AfterCallWork</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
<!-- ngIf: !vm.statusOptionHidden(status.name) -->
<option ng-repeat="status in vm.statuses | orderBy:&#39;id&#39;" value="Quarantine" ng-if="!vm.statusOptionHidden(status.name)" class="ng-binding ng-scope">Quarantine</option>
<!-- end ngIf: !vm.statusOptionHidden(status.name) -->
<!-- end ngRepeat: status in vm.statuses | orderBy:'id' -->
</select>

And here is a screenshot of what the webpage looks like (I modified some parts of the HTML to hide sensitive information).

Webpage screenshot: click to expand/collapse

The part I'm trying to extract is the current selection in the dropdown menu... in this case it's "Unavailable".

Again, I can send the full HTML (HTML and CSS files etc.) in a private message if that’s necessary. Any help is greatly appreciated, and thanks in advance!

-Chris

[dealtek]

Hi,

Using BBEdit I replaced >< with >\n<. This added returns to the text making it more readable.

[dealtek]

the html seems to be using a basic html select tag with options as described here...

HTML select tag

I am not sure how to extract this using KM using RegEx or QuerySelector, however you would basically be searching for this segment:

Greater than CHAR select ... options .... Less than CHAR /select

• portion and start working with that.

specifically start looking for this select tag:

Also that fact that there are not returns is somewhat common practice called "minify" that reduces code like:

Minify Resources (HTML, CSS, and JavaScript)  |  PageSpeed Insights...

I hope this helps.

BTW: I was having issues trying to paste in html into the forum - as it was getting rewritten so I used images instead.

I tried preformatted block text but that didn't work well. If anyone knows a better way to do this - please let me know...

Dave

[vincent_ardern]

Early indications are that the following code might work:

var index = document.querySelector("select.form-control").selectedIndex;
index++
document.querySelector("select.form-control option:nth-child(" + index + ")").innerText;

.selectedIndex seems to be the property that allows JavaScript (and by extension KM) to determine which child of the dropdown has been selected.
The second line of my code just increments the index variable by one (1) because .selectedIndex starts at zero (0) while the css pseudo-class :nth-child(n) starts at one (1).
The third line uses that index variable to return the text of the selected option.

[cdthomer]

This appears to be working great. It has successfully given me my status for InCall, Away and Available. Thanks so much!