javascriptpythonqwebengineviewangular2-ngcontent

JavaScript Command document.getElementsByClassName not working on special page


I am currently writing a bot to fetch data from a web live ticker. Therefore i created an app, that displays the webbrowser using Python QWebEngineView. Now if i want to get a special Value from the html code of the site i am currenty using:

self.browser.page().runJavaScript(
            "document.getElementsByClassName('team-score')",
            self.__update_points
        )

(browser is the QEngineWebView). The HTML of the site looks as following: (only the interesting snippet)

<div _ngcontent-jnr-c126="" class="set-scores">
        <div _ngcontent-jnr-c126="" class="team-score">2</div>
        :
        <div _ngcontent-jnr-c126="" class="team-score">2</div>
</div>

My goal is to extract the two point values ( class="set-score"), but when i run the JS command it only throws out {} where should be those two objects.


Solution

  • document.getElementsByClassName returns an HTMLCollection Object. It's iterable so it can easily be converted to an array with the spread operator.

    As mentioned in my comment, try [...document.getElementsByClassName('team-score')].map(el => el.innerText).

    The reason why it just returns an empty object is that the JSON.stringify() return value of HTMLCollection is just {} and you can't pass references in several situations while using tools like QWebEngineView. The object in the this will be passed to JSON.stringify() and sent to the extension/worker or whatever, therefor you might end with an useless result.

    Converting it to an Array with [...HTMLCollection] and mapping it afterwards with the innerText of the value will result in [2,2].

    Another solution would be: document.querySelector(".set-scores").textContent (or innerText) which may result in a string like "2:2".