title: Different behavior for page.evaluate and page.$ with a follow up function
body: <p>I have a page that I load. The following <code>page.$eval()</code> code works:</p>
  
  <pre><code>const productName = await page.$eval('h1[role="main"]', el =&gt;
      [].reduce.call(
        el.childNodes,
        (a, b) =&gt;
          a +
          (b.nodeType === 3
            ? b.textContent
                .replace(/[\r\n]+/gm, "")
                .replace(/\s+/g, " ")
                .trim()
            : ""),
        ""
      )
    );
  </code></pre>
  
  <p>By works, I mean it returns the intended product name. I run it in the main function.</p>
  
  <p>I now want to outsource the code to its own function outside the original context (to be reused).</p>
  
  <p>I call the function inside the main function like this:</p>
  
  <pre><code>  const productName = await page
      .$('h1[role="main"]')
      .then(el =&gt; getProductNameFromSelector(el))
      .catch(err =&gt; console.log("failure product name", err));
  </code></pre>
  
  <p>The outsourced function is like this:</p>
  
  <pre><code>const getProductNameFromSelector = async el =&gt;
    el
      .evaluate(
        el,
        [].reduce.call(
          el.childNodes,
          (a, b) =&gt;
            a +
            (b.nodeType === 3
              ? b.textContent
                  .replace(/[\r\n]+/gm, "")
                  .replace(/\s+/g, " ")
                  .trim()
              : ""),
          ""
        )
      )
      .then(result =&gt; result)
      .catch(err =&gt; console.log("error in function", err, el));
  </code></pre>
  
  <p>It runs into the following error:</p>
  
  <pre><code>failure product name TypeError: Cannot read property 'evaluate' of null
      at reduce (&lt;anonymous&gt;)
      at getProductNameFromSelector (pathToFile.js:395:17)
      at page.$.then.el (pathToFile.js:119:21)
      at process._tickCallback (internal/process/next_tick.js:68:7)
  </code></pre>
  
  <p>I should be receiving an <code>ElementHandle</code> from <code>page.$('h1[role="main"]')</code>. It says <code>undefined</code> though.</p>