puppeteer QuerySelectorAll not working is vs-code Node.js

Question

const puppeteer = require("puppeteer");
const fs = require("fs");
const chalk = require("chalk");
const outputFile = "./swatHotelsDetails.json";



(async function main() {
  let content = fs.readFileSync("swat.json", "utf-8");
  const data = JSON.parse(content);

  for (url of data) {
    await HotelsDetails(url.hotelUrl);
  }
})();

async function HotelsDetails(URL) {
  const url = URL;
  //console.log(url);
  const browser = await puppeteer.launch({
    headless: true,
    ignoreHTTPSErrors: true,
    args: [`--window-size=1920,1080`],
    defaultViewport: {
      width:1920,
      height:1080
    }
  });

  const page = await browser.newPage();
  

  const userAgent =
    "Mozilla/5.0 (X11; Linux x86_64)" +
    "AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36";
  await page.setUserAgent(userAgent);

  await page.goto(url);

  await new Promise((r) => setTimeout(r, 10000));

  await page.screenshot({ path: "example.png" });

  const hotelsDetails = await page.evaluate(async (page) => {

    const hotelName = Array.from(
      document.querySelectorAll('[data-stid="content-hotel-title"] > h1')
    ).map((name) => name.textContent);

    const property_Highlights = Array.from(
      document.querySelectorAll(
        '[data-stid="hotel-amenities-list"] > div > ul > div > li'
      )
    ).map((name) => name.textContent);

    const property_Highlights2 = Array.from(
      document.querySelectorAll(".uitk-spacing-margin-block-two li")
    ).map((name) => name.textContent);

    const aa = document.querySelector('[data-stid="section-room-list"]');
    const Rooms = Array.from(
      aa.querySelectorAll(
        ".uitk-layout-grid-item div.uitk-layout-flex-item > div.uitk-spacing-padding-blockstart-three , .uitk-layout-grid-item div.uitk-layout-flex-item > div > div div[data-stid='price-summary']"
      )
    ).map((name) => name.textContent);


//******************************************************** */

    await new Promise((r) => setTimeout(r, 10000));


    const about_this_area = Array.from(
      document.querySelectorAll(".uitk-layout-columns-minwidth-seventy_two li")
    ).map((name) => name.textContent);
    // const about_this_area = Array.from(
    //   document.querySelectorAll(
    //     "div#Location div.uitk-layout-flex-item > ul.uitk-spacing-margin-blockstart-two  li"
    //   )
    // ).map((name) => name.textContent);

    const about_this_property = Array.from(
      document.querySelectorAll("section > div.uitk-card-content-section > div")
    ).map((name) => name.textContent);

    const at_a_glance = Array.from(
      document.querySelectorAll("div#Amenities div.uitk-layout-columns div")
    ).map((name) => name.textContent);

    const list = [];
    list.push({
     // hotelName: hotelName,
     // Property_Highlights: property_Highlights,
    // Property_Highlights2: property_Highlights2,
      //Rooms: Rooms,
      About_This_Area: about_this_area,
      //About_This_Property: about_this_property,
     // At_a_Glance: at_a_glance,
    });

    return list;
  });

  //exportResults(hotelsDetials)
  console.log(hotelsDetails);

  await browser.close();
}

const exportResults = (parsedResults) => {
  fs.writeFile(outputFile, JSON.stringify(parsedResults, null, 3), (err) => {
    if (err) {
      console.log(err);
    }
    console.log(
      chalk.yellow.bgBlue(
        `\n ${chalk.underline.bold(
          parsedResults.length
        )} Results exported successfully to ${chalk.underline.bold(
          outputFile
        )}\n`
      )
    );
  });
};

the above code is working fine but give me an empty array when i run the query in devTools it give me the result but not in vs-Code , i tried to set the viewport screen max size in order to check whether may be the headless opens it in small screen size and the may be class differences but issue still persists. also i tried the setTimeOut methods may be the document doesnt loads but still the issue is not resolved, i tried to change the selectors but no help, i am stuck here, checked the different questions and best possible solutionsbut still the issue is as it is. check the data serialization docs but no help from there too.

Answer 1

have solved the problem myself after using different methods, and the issue is resolved as the query was not grabbing the selector because its a one-page website which very lengthy so i used a click fucntion in-order too click on an anchor tag and go to that particular location so that it is visible and then run the query selector

await new Promise((r) => setTimeout(r, 5000));
document.querySelector("[href='#Location']").click()
await new Promise((r) => setTimeout(r, 5000));


const about_this_area = Array.from(
  document.querySelectorAll(".uitk-layout-columns-minwidth-seventy_two li")
).map((name) => name.textContent);