Puppeteer not able to fetch data for some reason

Question

I have created a react app that gives the following output as HTML:

import './App.css';

import Home from './Home';

function App() {
  return (
    <div className="Apps">
    <strong>"root1"</strong>
      <div className="content">
       
    <p>"root"</p>
      </div>
    </div>
  );
}

export default App;

My goal here is to basically retrieve "root1" from the <strong> tag under the Apps class. I have written the following code but it doesn't retrieve the data:

const puppeteer = require("puppeteer")
const fs = require("fs/promises")

async function start() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto("https://.herokuapp.com/")

  const names = await page.evaluate(() => {
    return Array.from(document.querySelectorAll(".Apps strong"), els => els.map(el => el.textContent))
  })
  await fs.writeFile("names.txt", names.join("\r\n"))


  await browser.close()
}

start()

When I run the script, a new text file is created but it is empty instead of showing "root1". Can someone help me? Thanks for your time!

@ggorlen can you tell me a good way to retrieve the text from the react app then? Should I use something other than puppeteer — Ali, Jul 02 '22 at 04:18
You can return text just fine, but your original code is trying to return an array of DOM nodes, which aren't serializable and only make sense in the browser, not in Node. My original code suggestion had a mistake, so I deleted it, but see the [suggested dupe](https://stackoverflow.com/questions/46377955/puppeteer-page-evaluate-queryselectorall-return-empty-objects) — ggorlen, Jul 02 '22 at 04:23
Does this answer your question? [Puppeteer page.evaluate querySelectorAll return empty objects](https://stackoverflow.com/questions/46377955/puppeteer-page-evaluate-queryselectorall-return-empty-objects) — ggorlen, Jul 02 '22 at 04:25
@ggorlen yes thos is what I put in but it doesn't work stilll: ` const puppeteer = require("puppeteer") const fs = require("fs/promises") async function start() { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto("https://token-price-213.herokuapp.com/") const names = await page.evaluate(() => { return Array.from(document.querySelectorAll(".Apps strong"), els => els.map(el => el.textContent)) }) await fs.writeFile("names.txt", names.join("\r\n")) await browser.close() } start()` — Ali, Jul 02 '22 at 04:27
Please [edit] your post. Code is unreadable in the comments. No need to `.map` in the callback, try `Array.from(document.querySelectorAll(".Apps strong"), el => el.textContent)` — ggorlen, Jul 02 '22 at 04:28
@ggorlenThank you so much! IT WORKED! YOu are so awsome., I did it! Thanks! — Ali, Jul 02 '22 at 04:35

score 0 · Accepted Answer · answered Jul 02 '22 at 06:50

The correct answer was given to me by @ggorlen, it should be like this:

const puppeteer = require("puppeteer")
const fs = require("fs/promises")

async function start() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto("url")

  const names = await page.evaluate(() => {
    return Array.from(document.querySelectorAll(".Apps strong"), el => el.textContent)
  })
  await fs.writeFile("names.txt", names.join("\r\n"))


  await browser.close()
}

start()

Thanks!

Puppeteer not able to fetch data for some reason

1 Answers1