在关闭之前让 puppeteer-cluster 在页面事件上等待的问题

Question

我目前正在设置一个 CI 环境来自动化我们团队在测试工具中运行的 e2e 测试。我在 Gitlab 上进行设置，目前正在使用 Puppeteer。我有一个从我们的测试工具触发的事件，该事件指定测试何时完成。现在我正在尝试“汇集”执行，这样我就不会用完所有资源或用完侦听器。我决定为这项任务尝试“puppeteer-cluster”。我快要让事情正常工作了，但是我似乎无法让它在关闭浏览器之前等待页面上的事件。在使用 puppeteer-cluster 之前，我将一个回调传递给我的函数，当自定义事件被触发（通过 ExposeFunction 注入）时，我会去调用它。该回调函数现在正在传递数据，因此不等待。我似乎无法找到让执行等待的方法，并希望有人可能在这里有一个想法。如果有人有任何建议，我很想听听。

test('Should launch the browser and run e2e tests', async (done) => {
    try {
        const cluster = await Cluster.launch({
            concurrency: Cluster.CONCURRENCY_CONTEXT,
            maxConcurrency: 10,
            monitor: false,
            timeout: 1200000,
            puppeteerOptions: browserConfig
        });
        
        // Print errors to console
        cluster.on("taskerror", (err, data) => {
            console.log(`Error crawling ${data}: ${err.message}`);
        });
        
        //Setup our task to be run
        await cluster.task( async ({page, data: {testUrl, isLastIndex, cb}, worker}) => {
            console.log(`Test starting at url: ${testUrl} - isLastIndex: ${isLastIndex}`);
        
            await page.goto(testUrl);
            await page.waitForSelector('#testHarness');

            await page.exposeFunction('onCustomEvent', async (e) => {         
                if (isLastIndex === true){ ; 
                    //Make a call to our callback, finalizing tests are complete
                    cb();
                }
                console.log(`Completed test at url: ${testUrl}`);
            });
    
            await page.evaluate(() => {
                document.addEventListener('TEST_COMPLETE', (e) => {
                    window.onCustomEvent('TEST_COMPLETE');   
                    console.log("TEST COMPLETE");         
                });
            });
        });

        //Perform the assignment of all of our xml tests to an array
        let arrOfTests = await buildTestArray();
        const arrOfTestsLen = arrOfTests.length;

        for( let i=0; i < arrOfTestsLen; ++i){
            //push our tests on task queue
            await cluster.queue( {testUrl: arrOfTests[i], isLastIndex: (i === arrOfTestsLen - 1), cb: done });
        };

        await cluster.idle();
        await cluster.close();
        
    } catch (error) {
        console.log('ERROR:',error);
        done();
        throw error;
    }
});

Answer 1

所以我得到了一些工作，但我真的觉得它很老套，我不确定这是正确的方法。因此，如果有人有正确的方法或更推荐的方法，请不要犹豫做出回应。我在这里张贴应该其他人处理类似的事情。我能够使用 bool 和 setInterval 来完成这项工作。我在下面粘贴了工作结果。

await cluster.task( async ({page, data: {testUrl, isLastIndex, cb}, worker}) => {
            
     let complete = false;

     console.log(`Test starting at url: ${testUrl} - isLastIndex: ${isLastIndex}`);
        
     await page.goto(testUrl)       
     await page.waitForSelector('#testHarness');
     await page.focus('#testHarness');
            
     await page.exposeFunction('onCustomEvent', async (e) => {   
         console.log("Custom event fired");      
         if (isLastIndex === true){ ; 
             //Make a call to our callback, finalizing tests are complete
             cb();
             complete = true;
             //console.log(`VAL IS ${complete}`);
         }
         console.log(`Completed test at url: ${testUrl}`);
                
     });

     //This will run on the actual page itself. So setup an event listener for
     //the TEST_COMPLETE event sent from the test harness itself
     await page.evaluate(() => {
         document.addEventListener('TEST_COMPLETE', (e) => {
             window.onCustomEvent('TEST_COMPLETE');                                       
         });
     });
           
     await new Promise(resolve => {
         try {
             let timerId = setInterval(()=>{
                 if (complete === true){
                     resolve();
                     clearInterval(timerId);
                 }
             }, 1000);
         } catch (e) {
             console.log('ERROR ', e);
         }
                    
     });
});