无法从 nightmare.evalute function 返回 DOM 元素数组

Question

This is the DOM structure of a page I am accessing with Nightmare:

<h1 class='entry-title'>
  <a>Link</a>
</h1>

<h1 class='entry-title'>
  <a>Link</a>
</h1>

<h1 class='entry-title'>
  <a>Link</a>
</h1>

I am trying to iterate over the links on the page. Here's my code for that:

await nightmare.goto(URL);
await nightmare.wait('h1.entry-title a');

const titles = await nightmare.evaluate(() => Array.from(document.querySelectorAll('h1.entry-title a')));
console.log(titles) // result - [ {}, {}, {}, {}, {} ]

When I log the array of DOM elements inside the Nightmare headless browser, I get the expected result. However, when I log out the "titles" constant in my Node.js code, it's just an array of several empty objects.

What am I doing wrong?

Answer 1

You need to understand that nightmareJS instance is triggered from nodeJS. when you are inside the nightmare evaluate function, you have full access to the page DOM and you are within the context of the page which is loaded in electron.

when you are outside of evaluate function like nightmare.then() or any other nodeJs function, you outside the context of the Page and hence the difference.

if you have extract Details from Page, then in nightmareJS it can be done only with in the nightmare.evaluate() function.

nightmare
   .goto(www.google.com) //navigate to given url
   .wait(10000) // wait for 10s for the page to load
   .inject('js', 'node_modules/jquery/dist/jquery.min.js') //manually inject jQuery at runtime to the page
   .evaluate(() => {
       //You are inside the context of page loaded in electron.
       //since the jQuery has been loaded in the previous step, you 
       // can use jquery functions to scrape data or manipulate DOM at run 
       //time

      return element;
   })
   .then((element) => {
      //the returned element from the previous step (evaluate) is recieved as 
      //the input for the the function.
      //inside th then function you are with in the context of the nodeJs 
      
     //as you mentioned, if you want to print the titles object, it needs to 
     //be returned from the evaluate function and can be printed in then()
     //function.

    //when you returning something from evaluate function, you are basically 
    //returning the data from page context to nodeJS context.
   })
   .end();