JavaScript错误 : Document was unloaded error when trying to take screenshots

Question

对于我在 Protractor 中的端到端测试，我想为我的 Angular 项目中的各种路线截屏。所以我写了下面的代码，它从一个 url 数组中获取一个 url，并将它提供给下面的函数。我为 chrome 运行了这段代码，它工作正常，所有的屏幕截图都被截取并保存在所需的位置，但是当我为 Firefox 运行它时，它会从 39 个 url 的数组中抛出大约 4-5 个 url 的错误，而这 4-5 个 url 可能在第二次运行时，相同的 url 可能会或可能不会发生更改。

    async function WantToTakeGoldenScreenshots(urlForWhichScreenshot,rank){
    console.log("1")
    await browser.get(urlForWhichScreenshot)
    console.log("2")

    const png = await browser.takeScreenshot()
    var ImagePath =  path + RouteName 
    var stream =  createWriteStream( ImagePath+'.png'); 
    stream.write(Buffer.from(png, 'base64'));
    stream.end; 
    console.log("3")

}


    describe('Function to take golden screenshot of all url in list',  () => { 

        var urlListlength = urlList.length
          for (let i = 0; i < urlListlength; i++) {
             it('screenshot taken', async() => {
              console.log("0")    
             await WantToTakeGoldenScreenshots(  urlList[i],i)  
              console.log("test end")
             // Goto Function(2a)      
             });
          // }
        }
    });

抛出的错误是:

0
1
    ✗ screenshot taken
      - Failed: Error while running testForAngular: JavaScriptError: Document was unloaded

NOTE: In console 2 and 3 are not printed but in cases that passes all are shown in a sequence  

我无法解决这个问题我之前没有使用异步等待所以认为这可能是问题所以我补充说，现在它也不起作用。我该怎么办？

Answer 1

看起来您正在使用 async/await，所以这一定意味着您在 Protractor 配置中使用了 SELENIUM_PROMISE_MANAGER: false。您使用 async/await 真是太好了，因为控制流已经被弃用了一段时间。

我不确定您的 URL 列表中有什么，但 testForAngular 问题与导航到页面和检查 Angular 是否稳定有关。基本上当 Angular 正在运行一个区域并进行更改检测、事件等时。Angular 从区域返回后，它会告诉 Protractor 页面必须稳定。对于非 Angular 页面，这会引发错误，因为 Protractor 正在等待“稳定”页面。

如何防止调用testForAngular

有两个选项可以防止此错误发生。第一个选项是使用 browser.ignoreSynchronization，另一个是使用异步方法 browser.waitForAngularEnabled。请记住，如果您决定转到非 Angular 的页面，您将不得不自己进行同步检查。这方面的一个例子可能是简单地检查 Web 元素是否可见(尽量避免盲目地设置休眠)。

选项 1:browser.ignoreSynchronization(将被弃用)

那么如何才能停止检查 testForAngular？您可以设置浏览器属性 browser.ignoreSynchronization = true;(这在 Protractor v5 的评论中已被指出已弃用，最终将被删除)。这样做会阻止 Protractor 运行 testForAngular。您可以将 browser.ignoreSynchronization 添加到您的 onPrepare 插件或 beforeAll/beforeEach block 。

选项 2:browser.waitForAngularEnabled

下一个选项是使用异步方法:browser.waitForAngularEnabled。这是一个异步的 getter 和 setter。因此，您可以使用 await browser.waitForAngularEnabled() 检查它的值，或者您可以设置值 browser.waitForAngularEnabled(false)。基本上，您希望将其设置为与 ignoreSynchronization 值相反的值(在这种情况下，如果您考虑将 ignoreSynchronization 值设置为 true，那么您希望将此值设置为 false)。