PhantomJS - select value from page

Question

How to select value from the webpage using PhantomJS? Here is code in html:

<html lang="en-US" class="xxx">
  <head></head>
  <body class="xxxx">
    <section class="Section">
      <div id="mocha">
        <ul id="mocha-stats">
          <li class="passes">
            <a href="">passes:</a> 
            <em>443</em>
          </li>
          <li class="failures">
            <a href="">failures:</a> 
            <em>4</em>
          </li>
        </ul>
      </div>
    </section>
  </body>
</html>

I want to select value from the passes which is 443. Here is my code, but it returns null.

var page = require('webpage').create();
var url = 'http://localhost:9001/';

page.open(url, function (status) {
  if (status === 'success') {
    var input = page.evaluate(function() {
      return document.querySelectorAll("li.passes").value;
    }, 2000);
    console.log(input);
    phantom.exit();
  }
});

Teoulas · Accepted Answer · 2016-09-30 14:04:11Z

1

document.querySelectorAll("li.passes") returns a collection with the single li element that matches that selector. You need to change your code to document.querySelectorAll("li.passes > em")[0].textContent. This will match the em inside the li and return its text content.

answered Sep 30, 2016 at 14:04

Teoulas

2,97323 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Billy Bennett · Accepted Answer · 2016-09-30 14:07:26Z

The li tag doesn't have a value, it has innerText or innerHTML. In this case, the innerHTML has two children, an anchor tag and an emphasis tag.

If you are sure that every instance of what you are fetching will be emphasized, you can query on each returned value for the em field and get the innerHTML of that to get your final value, instead of

console.log(input)

you would have

if (input.length === 0) {
    console.log('No passes found.');
} else {
    for (var ndx = 0; ndx < input.length; ndx++) {
    console.log(input[ndx].querySelector('em').innerText);
}

I kept the answer as close to your original code as i could, but I would recommend putting in some error checks, ie if input[ndx] has no em tag. If a classes without an em field should be ignored, you can include the em descendant in your original querySelectorAll('.classes > em')

Of course, if you're originating the html yourself, you could put the tag on the em field (or wherever the value is) and eliminate a lot of hassle.

Collectives™ on Stack Overflow

PhantomJS - select value from page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related