javascript - Puppeteer 一次打开每个文件的 chrome 实例

Question

我正在尝试自动化一个工作流程，其中我有一个目录中的文件列表，并将它们放入一个数组中。然后，对于数组中的每个文件，我调用一个 Chrome 自动化函数。

const path = require('path');
const chalk = require('chalk');
const puppeteer = require('puppeteer');

module.exports = {
    generateOutput : async(fileName, url = "https://example.com/") => {
        const filePath = path.join(process.cwd(), fileName);
        const outputFilePath = path.join(process.cwd(), "OutputFiles");
        try{
            const browser = await puppeteer.launch({headless: false});
            process.setMaxListeners(0);
            const page = await browser.newPage();
            await page._client.send('Page.setDownloadBehavior', {behavior: 'allow', downloadPath: outputFilePath});
            page.on('dialog', async dialog => {
                console.log(chalk.magenta("Error Occured: " + dialog.message()));
                await dialog.dismiss();
                await browser.close();
            });
            await page.goto(url, {waitUntil: 'networkidle2'});
            await page.click('#ui-id-9');
            await page.click('#ui-id-18');
            await page
                    .waitForSelector('#ui-id-9')
                    .then(() => console.log(chalk.magenta("Uploader module visible... Uploading the files") ));
            const input = await page.$('#upload-file');
            await input.uploadFile(filePath);
            await page.waitFor(10000);
            await page.click("#up-file");
            await page.waitFor(50000);
            await page
                    .waitForSelector('#ui-id-18')
                    .then(() => console.log(chalk.magenta("Downloader module visible... Downloading the files") ));
            await page.click("#download-td");
            await page.waitFor(100000);
            await browser.close();
        }
        catch(e){
            console.log(chalk.red(fileName + ' has failed in conversion.'));
        }
    }
};

这会同时创建一个 chrome 实例(例如 100 个文件)。有没有办法限制异步进程。我没有太多经验。在 Node 中，所以我无法搜索正确的术语。

Answer 1

一种解决方案是逐一访问每个文件的 URL。

const path = require('path');
const chalk = require('chalk');
const puppeteer = require('puppeteer');

module.exports = {

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

        const page = await browser.newPage();

        // for all the files in array call it one by one
        for (i = 0; i < files.length; i++) {
            await module.exports.generateOutput(page, fileName);
        }

        await browser.close();
    },

    generateOutput : async(page, fileName, url = "https://example.xm/b") => {
        const filePath = path.join(process.cwd(), fileName);
        const outputFilePath = path.join(process.cwd(), "OutputFiles");
        try{
            process.setMaxListeners(0);
            await page._client.send('Page.setDownloadBehavior', {behavior: 'allow', downloadPath: outputFilePath});
            page.on('dialog', async dialog => {
                console.log(chalk.magenta("Error Occured: " + dialog.message()));
                await dialog.dismiss();
                await browser.close();
            });
            await page.goto(coloradoUrl, {waitUntil: 'networkidle2'});
            await page.click('#ui-id-9');
            await page.click('#ui-id-18');
            await page
                    .waitForSelector('#ui-id-9')
                    .then(() => console.log(chalk.magenta("Uploader module visible... Uploading the files") ));
            const input = await page.$('#upload-file');
            await input.uploadFile(filePath);
            await page.waitFor(10000);
            await page.click("#up-file");
            await page.waitFor(50000);
            await page
                    .waitForSelector('#ui-id-18')
                    .then(() => console.log(chalk.magenta("Downloader module visible... Downloading the files") ));
            await page.click("#download-td");
            await page.waitFor(100000);
        }
        catch(e){
            console.log(chalk.red(fileName + ' has failed in conversion.'));
        }
    }
};

其他方法是为每个文件打开新选项卡，完成后将其关闭。但这可能会同时打开 100 个选项卡。您可以添加上限，例如一次最多打开 10 个选项卡等。以下代码使用 delay 函数主动等待选项卡数量小于 10，然后再打开新选项卡

const path = require('path');
const chalk = require('chalk');
const puppeteer = require('puppeteer');

module.exports = {

    delay: async (milisecs) => {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve, milisecs);
        })
    },

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

        // for all the files in array call it one by one
        for (i = 0; i < files.length; i++) {
            pages = await browser.pages();

            /*
            * if number of tabs is less than 10, skips while. Else
            * waits till number of open tabs become less than 10
            */
            while (pages.length == 10) {
                pages = await browser.pages();
                await module.exports.delay(3000);
            }

            // then open a new tab
            const page = await browser.newPage();
            module.exports.generateOutput(page, fileName);
        }

        await browser.close();
    },

    generateOutput : async(page, fileName, url = "https://example.xm/b") => {
        const filePath = path.join(process.cwd(), fileName);
        const outputFilePath = path.join(process.cwd(), "OutputFiles");
        try{
            process.setMaxListeners(0);
            await page._client.send('Page.setDownloadBehavior', {behavior: 'allow', downloadPath: outputFilePath});
            page.on('dialog', async dialog => {
                console.log(chalk.magenta("Error Occured: " + dialog.message()));
                await dialog.dismiss();
                await browser.close();
            });
            await page.goto(url, {waitUntil: 'networkidle2'});
            await page.click('#ui-id-9');
            await page.click('#ui-id-18');
            await page
                    .waitForSelector('#ui-id-9')
                    .then(() => console.log(chalk.magenta("Uploader module visible... Uploading the files") ));
            const input = await page.$('#upload-file');
            await input.uploadFile(filePath);
            await page.waitFor(10000);
            await page.click("#up-file");
            await page.waitFor(50000);
            await page
                    .waitForSelector('#ui-id-18')
                    .then(() => console.log(chalk.magenta("Downloader module visible... Downloading the files") ));
            await page.click("#download-td");
            await page.waitFor(100000);

            await page.close()
        }
        catch(e){
            console.log(chalk.red(fileName + ' has failed in conversion.'));
        }
    }
};

我修改了您的代码来传达这个概念。当然，除非您将 files 替换为您自己的变量等，否则它不会运行