Code Visualizer

Visualizing Puppeteer Script Flow

This DOT notation diagram illustrates the components and interactions of a Puppeteer script, detailing browser actions, page navigation, authentication steps, error handling, and final browser closure, providing a clear visual


Empty image or helper icon

Prompt

const puppeteer = require("puppeteer");

(async () => {
  let browser = await puppeteer.launch({
    headless: false,
  });

  try {
    // Открываем первую вкладку и логинимся на первом сайте
    let page1 = await browser.newPage();
    await page1.authenticate({ username: "log1", password: "pass1" });
    await page1.goto(`https://whatthesigma.com/`);

    // Ожидаем загрузки нужного элемента
    await page1.waitForSelector('#content table tbody tr:nth-child(1) td:nth-child(4)');

    // Извлекаем текст элемента, содержащего почту и ссылку
    let textContent = await page1.$eval('#content table tbody tr:nth-child(1) td:nth-child(4)', el => el.innerText);

    // Ищем часть текста, которая начинается с "https"
    let linkMatch = textContent.match(/https:\/\/[^\s]+/);
    if (!linkMatch) {
      throw new Error("Ссылка не найдена");
    }
    let link = linkMatch[0].trim();

    // Открываем вторую вкладку и логинимся на втором сайте
    let page2 = await browser.newPage();
    await page2.authenticate({ username: "log2", password: "pass2" });
    await page2.goto(`http://giga.nigga.com`);

    // Открываем третью вкладку и переходим по ссылке, полученной с первого сайта
    let page3 = await browser.newPage();
    await page3.goto(link);

  } catch (error) {
    console.error("Произошла ошибка:", error);
  } finally {
    // Если нужно закрыть браузер в конце
    // await browser.close();
  }
})();

Answer

digraph PuppeteerScript {
    // Define nodes
    Browser [label="Browser" shape=box];
    Page1 [label="Page 1\nhttps://whatthesigma.com/" shape=box];
    Page2 [label="Page 2\nhttp://giga.nigga.com" shape=box];
    Page3 [label="Page 3\nLink from Page 1" shape=box];
    AuthenticatePage1 [label="Authenticate\nlog1:pass1" shape=ellipse];
    AuthenticatePage2 [label="Authenticate\nlog2:pass2" shape=ellipse];
    WaitForSelector1 [label="Wait for Selector\n#content table tbody [...]" shape=ellipse];
    ExtractText1 [label="Extract Text\n#content table tbody [...]" shape=ellipse];
    ErrorHandling [label="Error Handling" shape=ellipse];

    // Define relationships
    Browser -> Page1 [label="newPage()"];
    Browser -> Page2 [label="newPage()"];
    Browser -> Page3 [label="newPage()"];
    Page1 -> AuthenticatePage1 [label="authenticate()"];
    Page1 -> "Wait for Selector" [label="waitForSelector()"];
    Page1 -> "Extract Text" [label="evaluate()"];
    AuthenticatePage1 -> "Wait for Selector";
    "Wait for Selector" -> "Extract Text";
    "Extract Text" -> Page3 [label="goto() with extracted link"];
    Page2 -> AuthenticatePage2 [label="authenticate()"];
    AuthenticatePage2 -> Page2 [label="goto()"];

    // Error handling flow
    subgraph cluster_Error {
        label = "Error Handling";
        ErrorHandling;
        Page1 -> ErrorHandling [label="catch(error)"];
        Page2 -> ErrorHandling [label="catch(error)"];
        Page3 -> ErrorHandling [label="catch(error)"];
    }

    // Browser closing
    subgraph cluster_Finally {
        label = "Finally";
        Browser -> ErrorHandling [label="close()"];
    }
}

Explanation

  1. Nodes: Each major component and actions, such as Browser, Page 1, Page 2, authentication steps, etc., are represented as nodes.
  2. Edges: The relationships between nodes are represented as directed edges, showcasing the flow of the program.
  3. Error Handling: A subgraph cluster_Error is created to visualize error handling in the script.
  4. Browser Closing: If the browser is intended to close at the end, it is depicted under the Finally cluster.

This DOT notation graph provides a visual representation of the Puppeteer script, showing the flow and relationships of various components and actions in the code.

For more advanced data manipulation and visualization techniques, consider exploring courses on the Enterprise DNA Platform.

Create your Thread using our flexible tools, share it with friends and colleagues.

Your current query will become the main foundation for the thread, which you can expand with other tools presented on our platform. We will help you choose tools so that your thread is structured and logically built.

Description

This DOT notation diagram illustrates the components and interactions of a Puppeteer script, detailing browser actions, page navigation, authentication steps, error handling, and final browser closure, providing a clear visual representation of the script's flow.

More Code Visualizers
Apache Flink Code Visualizer Apache Flink Code VisualizerApache Pig Code Visualizer Apache Pig Code VisualizerAzure Data Factory Code Visualizer Azure Data Factory Code VisualizerC/C++ Code Visualizer C/C++ Code VisualizerCouchDB Code Visualizer CouchDB Code VisualizerDAX Code Visualizer DAX Code VisualizerExcel Code Visualizer Excel Code VisualizerFirebase Code Visualizer Firebase Code VisualizerGoogle BigQuery Code Visualizer Google BigQuery Code VisualizerGoogle Sheets Code Visualizer Google Sheets Code VisualizerGraphQL Code Visualizer GraphQL Code VisualizerHive Code Visualizer Hive Code VisualizerJava Code Visualizer Java Code VisualizerJavaScript Code Visualizer JavaScript Code VisualizerJulia Code Visualizer Julia Code VisualizerLua Code Visualizer Lua Code VisualizerM (Power Query) Code Visualizer M (Power Query) Code VisualizerMATLAB Code Visualizer MATLAB Code VisualizerMongoDB Code Visualizer MongoDB Code VisualizerOracle Code Visualizer Oracle Code VisualizerPostgreSQL Code Visualizer PostgreSQL Code VisualizerPower BI Code Visualizer Power BI Code VisualizerPython Code Visualizer Python Code VisualizerR Code Visualizer R Code VisualizerRedis Code Visualizer Redis Code VisualizerRegex Code Visualizer Regex Code VisualizerRuby Code Visualizer Ruby Code VisualizerSAS Code Visualizer SAS Code VisualizerScala Code Visualizer Scala Code VisualizerShell Code Visualizer Shell Code VisualizerSPSS Code Visualizer SPSS Code VisualizerSQL Code Visualizer SQL Code VisualizerSQLite Code Visualizer SQLite Code VisualizerStata Code Visualizer Stata Code VisualizerTableau Code Visualizer Tableau Code VisualizerVBA Code Visualizer VBA Code Visualizer