JavaScriptError：尝试截屏时文档已卸载错误

Question

对于我在量角器中的 e2e 测试，我想为我的 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  

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

Answer 1

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

很少有可以帮助找到根本原因（或修复）的指针：

1. 确保 SELENIUM_PROMISE_MANAGER 设置为 false，因为您要对 await/async 自己负责
2. 如果上述内容已经到位，则删除所有异步和等待，让 Protractor 为您处理。不要忘记删除上面步骤中设置的标志。
3. 如果这不能解决问题，请给浏览器一点时间之前 browser.get 被调用。它本身不是一个修复程序，而是查看页面加载时间和/或屏幕截图 API 是否导致 Firefox 中的问题。

希望对您有所帮助。

Answer 2

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

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

如何防止testForAngular被调用

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

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

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

选项 2：browser.waitForAngularEnabled

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