Question:

I’m using Puppeteer-Core with the @sparticuz/chromium package instead of Puppeteer due to its high memory consumption. My goal is to check if a dynamically loaded script and UI element (e.g., dev tag class name) are present on a webpage.

What I’m Doing: 1. Blocking image requoptimiseoptimize performance. 2. Extracting script URLs from the page to check if the script is installed. 3. Waiting for a UI element (.test-ui-element-class) to appear. 4. Switching from load to networkidle2 to improve detection for dynamically loaded elements.

Issue: • The script detection works correctly, but the UI element detection is inconsistent. • It seems like the UI element takes longer to load, so I increased the timeout to 30 seconds, but it still fails sometimes. • Currently, I’m navigating to the same URL twice (load → networkidle2) to force re-evaluation. Is there a better way to do this?

Here’s my current implementation:

const puppeteer = require("puppeteer-core");
const chromium = require("@sparticuz/chromium");

const TEST_SCRIPT_PATH = "/"; // Test value

class TestScriptChecker {
  async blockImageRequests(testPage) {
    await testPage.setRequestInterception(true);
    testPage.on("request", (testRequest) => {
      if (testRequest.resourceType() === "image") {
        testRequest.abort();
      } else {
        testRequest.continue();
      }
    });
  }

  hasTestScriptInstalled(testScriptArray, testWidgetId) {
    let testScriptPath = TEST_SCRIPT_PATH + testWidgetId;
    return testScriptArray.some((testUrl) => testUrl && testUrl.includes(testScriptPath));
  }

  async evaluateTestPageForScriptUrls(testPage) {
    return await testPage.evaluate(() => {
      return Array.from(document.querySelectorAll("script"))
        .map((testScript) => testScript.getAttribute("src"))
        .filter(Boolean);
    });
  }

  async getTestScriptInstalledStatus(testWebsiteUrl, testWidgetId) {
    let isTestScriptInstalled = false;
    let isTestUIElementInstalled = false;
    let testBrowser;

    try {
      testBrowser = await puppeteer.launch({
        args: [...chromium.args, "--no-sandbox", "--disable-setuid-sandbox"],
        executablePath: await chromium.executablePath(),
        headless: true,
        ignoreHTTPSErrors: true,
      });
      console.log("Test Browser launched");

      const testPage = await testBrowser.newPage();
      await this.blockImageRequests(testPage);

      await testPage.goto(testWebsiteUrl, { waitUntil: "load" });
      console.log("Test Page loaded");

      const testScriptUrls = await this.evaluateTestPageForScriptUrls(testPage);
      isTestScriptInstalled = this.hasTestScriptInstalled(testScriptUrls, testWidgetId);
      console.log("Test Script installed:", isTestScriptInstalled);

      await testPage.goto(testWebsiteUrl, { waitUntil: "networkidle2" });
      console.log("Checking for UI element... changed to networkidle2");

      try {
        await testPage.waitForSelector(".test-ui-element-class", { timeout: 30000 });
        isTestUIElementInstalled = true;
        console.log("Test UI element installed:", isTestUIElementInstalled);
      } catch (err) {
        console.log("Test UI element not found within the timeout.");
      }

      await testBrowser.close();
    } catch (e) {
      console.error("Test Error:", e);
      if (testBrowser) await testBrowser.close();
    }

    return { isTestScriptInstalled, isTestUIElementInstalled };
  }
}