JavaScriptError: Document was unloaded error when trying to take screenshots

Question

对于量角器中的 e2e 测试，我想截取 angular 项目中各种路线的屏幕截图。所以我写了下面的代码，它从 url 的数组中取出一个 url，并将它提供给下面的函数。我运行这个代码用于 chrome 并且它工作正常所有的屏幕截图都被截取并保存在所需的位置，但是当我运行它用于 Firefox 时它会抛出大约 4-5 [=来自 39 个 url 数组的 20=]s 和这 4-5 个 urls 可能会改变它可能会或可能不会发生在第二个运行上的相同 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

根据配置和页面加载速度，Document was unloaded 错误的原因可能不止一种。

一些可以帮助找到根本原因（或修复）的建议：

请确保 SELENIUM_PROMISE_MANAGER 设置为 false，因为您要对自己 await/async 负责
如果以上内容已经到位，则删除所有异步和等待，让 Protractor 为您处理。不要忘记删除上面步骤中设置的标志。
如果那不能解决问题，请给浏览器一点时间，然后再 browser.get 被调用。它本身并不能解决问题，但可以查看页面加载时间 and/or 屏幕截图 API 是否导致了 Firefox 中的问题。

希望对您有所帮助。

Answer 2

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

我不确定你的 URL 列表中有什么，但 testForAngular 问题是关于导航到页面并检查 Angular 是否稳定。基本上当 Angular 是运行区域并进行更改检测、事件等。在区域 Angular returns 之后，它告诉量角器页面必须稳定。对于不是 Angular 的页面，这会引发错误，因为 Protractor 正在等待 "stable" 页面。

如何防止`testForAngular`被调用

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

选项 1：`browser.ignoreSynchronization`（将被弃用）

那么你怎么能停止检查testForAngular呢？您可以将浏览器设置为属性 browser.ignoreSynchronization = true;（自 Protractor v5 起，这已在评论中注明已弃用，最终将被删除）。这样做会阻止 Protractor 运行 testForAngular。您可以将 browser.ignoreSynchronization 添加到您的 onPrepare 插件或 beforeAll / beforeEach 块。

选项 2：`browser.waitForAngularEnabled`

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

JavaScriptError: Document was unloaded error when trying to take screenshots