How to Scrape a Web Page Data Value Into a Variable

I am looking to pull this value from a webpage and add it to a variable (the value will obviously change based on the day that I view the information). I've looked through several of the existing posts on how to use the 'execute javascript in google chrome' action. But After a few hours trying to figure out I am still missing it... Your help would be greatly appreciated.

Please provide the URL, or the HTML code in a Forum Code Block.

It is a password protected page or I would just provide the url, sorry...

---<div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 451px; height: 226px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: &quot;HCo Gotham Narrow&quot;, &quot;HCo Gotham Narrow SSm&quot;, Arial, sans-serif; font-weight: 400; font-size: 12px;"><svg version="1.1" style="font-family:&quot;HCo Gotham Narrow&quot;, &quot;HCo Gotham Narrow SSm&quot;, Arial, sans-serif;font-size:12px;font-weight:400;" xmlns="http://www.w3.org/2000/svg" width="451" height="226"><desc>Created with Highcharts highcharts</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="451" height="206"></rect></clipPath></defs><rect x="0" y="0" width="451" height="226" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g class="highcharts-series-group" zIndex="3"><g><path fill="#d8dfe3" d="M 102.36149423499926 189.12883777312265 A 128 128 0 0 1 281.57002688863855 40.69183848661888 L 279.8334635483686 44.295218533912035 A 124 124 0 0 0 106.22519754015553 188.09356159271258 Z" fill-opacity="1"></path><path fill="#ffc40d" d="M 93.66816179839765 191.45820917904535 A 137 137 0 0 1 285.477294404246 32.58423338020927 L 282.0041677237061 39.790993474795584 A 129 129 0 0 0 101.39556840871019 189.3876568182252 Z" stroke="#ffc40d" stroke-width="0.00001" stroke-dasharray="NaN"></path><path fill="#d8dfe3" d="M 283.5369154865064 41.660578292967486 A 128 128 0 0 1 344.4527979655053 107.49294222339199 L 340.75114802908325 109.00878777891099 A 124 124 0 0 0 281.73888687755306 45.23368522131226 Z" fill-opacity="1"></path><path fill="#ffc40d" d="M 287.5824798566514 33.621087704191766 A 137 137 0 0 1 344.57692100714956 87.38138878945296 L 337.6527212403087 91.38831499152869 A 129 129 0 0 0 283.9864226387447 40.76730156088129 Z" stroke="#ffc40d" stroke-width="0.00001" stroke-dasharray="NaN"></path><path fill="#d8dfe3" d="M 345.2662675952753 109.52896155784555 A 128 128 0 0 1 349.67157277800464 189.00518272354657 L 345.806836128692 187.97377076343574 A 124 124 0 0 0 341.5391967329229 110.98118150916288 Z" fill-opacity="1"></path><text x="226" y="108" text-anchor="middle" style="color:#23282B;font-size:19px;fill:#23282B;">NPS</text><text x="226" y="186" text-anchor="middle" style="color:#23282B;font-size:75px;font-weight:300;fill:#23282B;">57.1</text><text x="118" y="185" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-100</text><text x="117" y="134" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-75</text><text x="137" y="88" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-50</text><text x="176" y="56" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-25</text><text x="226" y="45" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">0</text><text x="275" y="56" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">25</text><text x="314" y="88" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">50</text><text x="334" y="134" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">75</text><text x="333" y="185" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">100</text></g></g><g class="highcharts-legend" zIndex="7"><g zIndex="1"><g></g></g></g><g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="rgba(0, 0, 0, 0.7)" d="M 0 0 L 0 0 C 0 0 0 0 0 0 L 0 0 C 0 0 0 0 0 0 L 0 0 C 0 0 0 0 0 0 L 0 0 C 0 0 0 0 0 0" stroke-width="0.00001"></path></g></svg><div class="highcharts-tooltip" style="position: absolute; left: 0px; top: -9999px;"><span style="position: absolute; white-space: nowrap; font-family: &quot;HCo Gotham Narrow&quot;, &quot;HCo Gotham Narrow SSm&quot;, Arial, sans-serif; font-size: 12px; font-weight: 500; color: rgb(255, 255, 255); margin-left: 0px; margin-top: 0px; left: 0px; top: 0px;" zindex="1"></span></div></div>

Maybe this is a little easier to copy, only the 'div' portion is from the source code....

<html>
<head>
	<title></title>
	<meta name="generator" content="BBEdit 13.1" />
</head>
<body>
<div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 556px; height: 226px; text-align: left; line-height: normal; z-index: 0; font-family: &quot;HCo Gotham Narrow&quot;, &quot;HCo Gotham Narrow SSm&quot;, Arial, sans-serif; font-weight: 400; font-size: 12px;"><svg version="1.1" style="font-family:&quot;HCo Gotham Narrow&quot;, &quot;HCo Gotham Narrow SSm&quot;, Arial, sans-serif;font-size:12px;font-weight:400;" xmlns="http://www.w3.org/2000/svg" width="556" height="226"><desc>Created with Highcharts highcharts</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="556" height="206"></rect></clipPath></defs><rect x="0" y="0" width="556" height="226" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g class="highcharts-series-group" zIndex="3"><g><path fill="#bd0700" d="M 154.36149423499927 189.12883777312265 A 128 128 0 0 1 333.57002688863855 40.69183848661888 L 331.8334635483686 44.295218533912035 A 124 124 0 0 0 158.22519754015553 188.09356159271258 Z" fill-opacity="0.6"></path><path fill="#ffc40d" d="M 145.66816179839765 191.45820917904535 A 137 137 0 0 1 337.477294404246 32.58423338020927 L 334.0041677237061 39.790993474795584 A 129 129 0 0 0 153.39556840871018 189.3876568182252 Z" stroke="#ffc40d" stroke-width="0.00001" stroke-dasharray="NaN"></path><path fill="#ffc40d" d="M 335.5369154865064 41.66057829296747 A 128 128 0 0 1 396.4527979655053 107.49294222339199 L 392.75114802908325 109.00878777891099 A 124 124 0 0 0 333.73888687755306 45.23368522131224 Z" fill-opacity="0.6"></path><path fill="#ffc40d" d="M 339.5824798566514 33.62108770419175 A 137 137 0 0 1 396.57692100714956 87.38138878945296 L 389.6527212403087 91.38831499152869 A 129 129 0 0 0 335.9864226387447 40.76730156088128 Z" stroke="#ffc40d" stroke-width="0.00001" stroke-dasharray="NaN"></path><path fill="#46a546" d="M 397.2662675952753 109.52896155784555 A 128 128 0 0 1 401.67157277800464 189.00518272354657 L 397.806836128692 187.97377076343574 A 124 124 0 0 0 393.5391967329229 110.98118150916288 Z" fill-opacity="0.6"></path><text x="278" y="108" text-anchor="middle" style="color:#23282B;font-size:19px;fill:#23282B;">NPS</text><text x="278" y="186" text-anchor="middle" style="color:#23282B;font-size:75px;font-weight:300;fill:#23282B;">57.1</text><text x="171" y="185" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-100</text><text x="169" y="134" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-75</text><text x="190" y="88" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-50</text><text x="229" y="56" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">-25</text><text x="278" y="45" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">0</text><text x="327" y="56" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">25</text><text x="366" y="88" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">50</text><text x="387" y="134" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">75</text><text x="385" y="185" text-anchor="middle" dy=".35em" transform="translate(0,0)" style="color:#9B9B9B;disabled:[object Object];font-size:12px;fill:#9B9B9B;">100</text></g></g><g class="highcharts-legend" zIndex="7"><g zIndex="1"><g></g></g></g><g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="rgba(0, 0, 0, 0.7)" d="M 0 0 L 0 0 C 0 0 0 0 0 0 L 0 0 C 0 0 0 0 0 0 L 0 0 C 0 0 0 0 0 0 L 0 0 C 0 0 0 0 0 0" stroke-width="0.00001"></path></g></svg><div class="highcharts-tooltip" style="position: absolute; left: 0px; top: -9999px;"><span style="position: absolute; white-space: nowrap; font-family: &quot;HCo Gotham Narrow&quot;, &quot;HCo Gotham Narrow SSm&quot;, Arial, sans-serif; font-size: 12px; font-weight: 500; color: rgb(255, 255, 255); margin-left: 0px; margin-top: 0px; left: 0px; top: 0px;" zindex="1"></span></div></div>
</body>
</html>

Hey @maweirkbm,

My JavaScript isn't that polished, so this is a bit clunky – but hopefully it will work for you.

-Chris


Extract NPS from Web Page v1.00.kmmacros (6.7 KB)

Since the <text> tag of interest does not have a class or ID, we have to rely on the order and hierarchy of tags. Assuming that stays the same, then this JavaScript should return the desired value ("57.1" in your example):

document.querySelector("g.highcharts-series-group > g > text+text").innerHTML;

Put this statement in a Execute a JavaScript in Front Browser action, and assign the results to a KM Variable.

Questions?

1 Like

Thank you both, perfect!

1 Like