Taking Screenshot of Dynamically Rendered Element with Puppeteer

The user will provide a URL, and then they will click a button. Using Puppeteer, specific data will be scraped from the user-provided webpage. After that, the page will be rendered. The goal is to take a screenshot of an element from the rendered page. How can this be achieved?

Here’s the code (server.js):

"use strict";
const express = require("express");
const app = express();
const puppeteer = require("puppeteer");
const fs = require("fs");
const path = require("path");
const https = require("https");

app.use(express.static("public"));
app.use(express.static("src"));

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("index");
});

app.post("/result", async (req, res) => {
  const reveiwLink = req.body.review_link;

  try {
    const browser = await puppeteer.launch({
      headless: false,
      defaultViewport: false,
      userDataDir: "./tmp",
    });

    const page = await browser.newPage();
    await page.goto(`${reveiwLink}`, {
      waitUntil: "load",
    });

    // specifying the selectors and scraping of data works here

    res.render("result", {
      data: {
        movieName,
        reviewerName,
        review,
        movieYear,
        rating,
        watchedDate,
        likes,
        hasSpoiler,
      },
    });

    await page.goto(`http://localhost:3000/result`, {
      waitUntil: "load",
    });

    const element = await page.$("#htmlContent");
    await element.screenshot({ path: "theCard.png" });
    await browser.close();
  } catch (err) {
    console.error(err);
    res
      .status(500)
      .json({ error: "An error occurred while fetching the review" });
  }
});

app.listen(3000);

As you can see, after rendering the “result,” an attempt was made to take a screenshot of the rendered “result” by navigating to http://localhost:3000/result in the Puppeteer browser. However, this did not display the rendered “result,” and an error occurred: “Cannot GET /result.” As a result, the screenshot could not be taken.

What should be done to resolve this issue? Please provide suggestions. Thank you.

I’m using Puppeteer to take the screenshot because I’ve tried using html2canvas, dom-to-image, apiFlash to take the screenshot and I am not satisfied with the quality of the image. That’s why I’m using Puppeteer to take the screenshot.