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

Posted 2023-03-13

【中文标题】JavaScriptError：尝试截屏时文档已卸载错误

【英文标题】：JavaScriptError: Document was unloaded error when trying to take screenshots

【发布时间】：2019-12-04 03:45:14

【问题描述】：

对于我在量角器中的 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 所以认为这可能是问题所以我补充说，现在它也不起作用。我该怎么办？

【问题讨论】：

@yevhen 你对此有什么想法吗？

.then() ; 和 stream.end; 似乎真的错了。

@Bergi 那我该怎么办？

嗯，你想让这些做什么？查看他们的文档，了解如何正确使用它们。 （或者.then()的情况，以你的其他用法为例）

我应该也添加我的配置文件吗？

【参考方案1】：

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

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

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

希望对您有所帮助。

【讨论】：

我们有 2. 到位没有工作我想我应该添加 async/await 所以尝试了 1. 仍然没有工作，我们在这两种情况下都有 3 个到位。感谢您的意见

未来是异步/等待。您应该将 SELENIUM_PROMISE_MANAGER 设置为 false。

【参考方案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）。

【讨论】：

当然这只是对Failed: Error while running testForAngular: JavaScriptError: Document was unloaded错误信息的猜测。添加配置文件可能会有所帮助

现在感谢它在 Firefox 上的工作正常。 urlList 包含网站中的路线，例如。 urlList = ["/tutorial/toh-pt1"] 和 baseurl: "https://angular.io/"。但问题是每次我做browser.get(urlList[1])时我的页面都会被加载我认为它只会导航到一条路线而不会像在角度应用程序中那样重新加载网页

您对上面评论中提到的问题有何看法

当您使用 browser.get 导航时，整个页面都会被加载。我相信你想要的是不刷新，所以这需要你从 angular.io 页面开始并点击按钮，直到你找到 /tutorial/toh-pt1 路径