如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

2024-05-16

编辑:请注意,在 @ernst-zwingli 的帮助下,我找到了问题的根源,因此,如果您遇到相同的错误,他指出的修复之一可能会帮助您。我的问题是量角器本身的一个已知问题,如果您认为这可能是您,我已经扩展了我的步骤,以在我最初的问题之后查明问题的根源。


我正在尝试在使用 angular-cli 构建的 Angular2(只是 Angular)应用程序中使用量角器。

我的问题:在以下情况下找不到 Angular 应用程序页面上的元素browser.waitForAngularEnabled是它的默认设置true (如“我相信我在一个有角度的页面上并且希望量角器发挥它的魔力”)。如果我设置的话,他们会被发现很好browser.waitForAngularEnabledto false (如“我不在有角度的页面上,想自己处理这个问题,请坐下量角器”)。如何在我的绝对 Angular 页面上找出导致此问题的原因?

我有一个带有非 Angular Auth0 登录页面的产品,该页面可以访问该产品的其余部分is用 Angular 编写(准确地说是 Angular 4.3.2)。我已经成功遍历非Angular登录页面登录。我翻转了waitForAngularEnabled切换到false以方便非 Angular 登录。我把它转回true在单击提交按钮后,我期望加载初始登陆页面(Angular)。代码如下:

        browser.waitForAngularEnabled(false);
        browser.driver.get('https://dashboard.net/projects');
        browser.driver.sleep(10000);
        browser.driver.findElement(By.css("[type='email']"));
        browser.driver.findElement(By.css("[type='email']")).sendKeys("[email protected] /cdn-cgi/l/email-protection");
        browser.driver.findElement(By.css(".auth0-label-submit")).click();

        browser.driver.findElement(By.id("passwordInput")).sendKeys("password");
        browser.driver.findElement(By.id("submitButton")).click();
        browser.driver.sleep(5000);  // needed if not waiting for Angular
        //browser.waitForAngularEnabled(true);  // Back to Protractor land we go
        let elementToFind = element(by.className("header-text"));
        elementToFind.isDisplayed().then(function() {grabTheDarnLocalStorage()});
        expect(elementToFind.isDisplayed()).toBeTruthy();

如果我取消注释browser.waitForAngularEnabled(true);行来表明我回到了 Angular 代码中,我得到的错误跟踪如下:

Failed: Timed out waiting for asynchronous Angular tasks to finish after 30 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
While waiting for element with locator - Locator: By(css selector, .header-text)
ScriptTimeoutError: asynchronous script timeout: result was not received in 30 seconds
  (Session info: chrome=61.0.3163.100)
  (Driver info: chromedriver=2.32.498550 (9dec58e66c31bcc53a9ce3c7226f0c1c5810906a),platform=Windows NT 10.0.14393 x86_64)
    at WebDriverError (C:\Users\c-shouston\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\error.js:27:5)
    at ScriptTimeoutError (C:\Users\c-shouston\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\error.js:203:5)
    at Object.checkLegacyResponse (C:\Users\c-shouston\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\error.js:505:15)
    at parseHttpResponse (C:\Users\c-shouston\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\http.js:509:13)
    at doSend.then.response (C:\Users\c-shouston\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\http.js:440:13)
    at process._tickCallback (internal/process/next_tick.js:109:7)
From: Task: Protractor.waitForAngular() - Locator: By(css selector, .header-text)

我参考了常见问题解答:https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular我让我的开发人员声明他们不使用 $timeout (他们使用(编辑:不是 $interval)可观察间隔,非常感谢)并且他们不确定 $http。

我找到了关于调试量角器角度同步问题的规范方法的解决方案:调试量角器到角度同步问题的规范方法 https://stackoverflow.com/questions/42865376/canonical-way-to-debug-protractor-to-angular-sync-issues但我不确定该解决方案在无法修改开发代码以运行编程跟踪器的情况下是否有效。(编辑:我从来没有弄清楚如何让它发挥作用)

我还发现您在每次测试之前添加了很长的超时,但我认为这是不必要的开销,使您的整体测试执行时间比应有的时间长,而不了解问题的根本原因:https://stackoverflow.com/a/372​​17167/2718402 https://stackoverflow.com/a/37217167/2718402 (编辑:是的,这是一个坏主意,会给您的测试增加不必要的时间,请不要这样做)

令人沮丧的是,这似乎是一种常见现象,而且似乎没有关于如何处理它的简化文档。使用非 Angular 页面登录只是为了转换到 Angular 页面。量角器无法正确拾取有角度的页面。我在网上找到的所有示例都是一些代码,我没有参考它们应该在我的整体测试框架中的位置。我会想要一个完整的例子,说明有人测试非 Angular 登录,转换到完全 Angular 网站,并带有设置配置和真实世界的测试用例。(编辑:这仍然是事实,但我无法自己制作一个,因为我的应用程序处于糟糕的灰色区域,请注意下面我的 RCA 以了解更多详细信息。)

我只希望能够登录,然后成功转换到我的 Angular 页面,并能够依靠 Protractor 来处理我的 Angular 页面。我需要知道要寻找什么,这可能是一个长时间运行的异步进程(我具体可以在 Chrome 开发工具中检查什么?)。我很想了解 Protractor 需要什么作为默认值才能成功地使用我的应用程序/网站的 Angular 部分(除了存在之外还有什么东西吗?<app-root _nghost-c0="" ng-version="4.3.2">在 HTML 中?)。在这份工作之前,我从事 Java 工作,所以所有这些异步性和 Angular 对我来说都是新的,所以我知道我错过了经验丰富的 Javascript 开发人员所知道的已知事物。


我的解决方案/根本原因分析

从@ernst-zwingli 建议的列表开始:

for Angular(2) 检查对象 window.getAllAngularRootElements 是否至少返回一个值。

它至少返回一个值,所以我继续前进。

useAllAngular2AppRoots:true,

我尝试了这个,但仍然遇到异步超时。

如果使用 $interval 或其他持久的异步任务,由于区域的原因,可能会出现问题

之前 @ernst-zwingli 也提到过查看可测试性方法,只不过这是旧方法。通过研究和测试我发现window对象还有一个getAllAngularTestabilities方法。这导致了一个有趣的兔子洞。 Chrome 控制台的输出示例(将window.getAllAngularTestabilities()在Chrome控制台窗口中,查看结果列表)如下:

t:
  _callbacks:...,
  _didWork:true,
  _isZoneStable: true (this looks promising, but why isn't Protractor working then?!?)
  _ngZone:
    hasPendingMacrotasks: true,
    hasPendingMicrotasks: false,
    isStable: true

我认为 isZoneStable 就足够了,但对于 Protractor 来说显然不是这样。然后看看 Macrotasks 是否正确,我必须查一下 Macrotask 到底是什么:hasPendingMacrotasks 和 hasPendingMicrotasks 检查什么? https://stackoverflow.com/questions/43480595/what-does-haspendingmacrotasks-and-haspendingmicrotasks-check-for.

宏任务可以是:

即setTimeout、setInterval、setImmediate

因此,@ernst-zwingli 关于间隔在区域中引起问题的注释被记住,并且最终得到了解决。
第一个 github 问题,关于区域不稳定 https://github.com/angular/angular/issues/12372

另一个 github 问题 https://github.com/angular/protractor/issues/3611抱怨必须使用 browser.driver 和 browser.waitForAngularEnabled 来完成任务。显然这是预期的行为,它导致我发出问题#3349

问题#3349 https://github.com/angular/protractor/issues/3349- 我的问题的实际根本原因。我的开发人员不会主动跳入或跳出可观察值周围的区域。尽管这些可观察量只有一个订阅者。由于此时它们位于角区域,因此它们是 Protractor 无限等待的长时间运行的“宏任务”。

我无法使用这些包装器重写代码,因为我目前对 Angular 还不够熟悉,无法安全地完成此操作,而且我们目前正朝着 11 月份的截止日期赶去。我想我暂时必须处理使用 browser.driver 的问题,并希望以后不能修复它。希望我的 RCA 对您有帮助。


下面我列出了一组潜在原因以及修复/解​​决这些问题的可能性。

AngularJS 和 Angular(2) 如何工作/我可以在浏览器开发模式中检查什么

我也无法解释它安德烈·阿吉巴洛夫 (Andrey Agibalov) 在他的博客中 http://loki2302.me/2017/05/19/How-do-Protractor-and-Angular-synchronize/,所以请检查一下(也适用于开发人员)。

基本上,Protractor 所需的对象您可以在 Chrome Dev 中查看。

对于 AngularJS检查对象是否window.angular已正确定义,即查找window.angular.version并且也尝试window.angular.getTestability你的根元素

对于角度(2)检查对象是否window.getAllAngularRootElements返回至少一个值。

根元素 (AngularJS)

您的 Angular 应用程序可能位于 Body 内的某个位置,例如<div ng-app="my-app">。 在这种情况下,你必须调整你的rootElement: body inside config.ts. 查看此答案了解详细信息 https://stackoverflow.com/a/32202674/8683679.

角度(2)

如果您使用 Angular(又名 Angular2),那么就会引入 ngZone。在这种情况下你的config.js还应包含以下内容:

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js'],
    useAllAngular2AppRoots: true,
    // rootElement: 'root-element'
};

检查您的浏览器window.getAllAngularRootElements因为conf.js 中的附加行是关于此的。

如果可以的话,也许可以利用多个区域的优势。创建第二个区域,配置rootElement: 'root-element'只关注一个区域,然后将一些异步任务移至另一个区域,直到找到导致超时的任务。将这些任务(如果可能)保留在单独的区域中,以便 Protractor 忽略这些任务。

And if $interval或者使用其他持久的异步任务,由于区域的原因,可能会出现问题。重复或长期持续的任务应在区域外启动,然后移至区域内,否则 Protractor 可能会遇到超时。有一个解决方法可供开发人员应用,以避免 Protractor 出现这些问题。在这里阅读所有相关内容 https://christianliebel.com/2016/11/angular-2-protractor-timeout-heres-fix/

浏览器驱动程序。 - 旁注

browser.driver.get()就好像ignoreSynchronization = true,因为您直接分配浏览器驱动程序,并且您绕过了 Protractor 的同步逻辑。 阅读更多相关信息这个答案在这里 https://stackoverflow.com/questions/28808463/what-is-browser-ignoresynchronization-in-protractor.

希望我能为您提供更多意见,并能解决您的问题。请告诉我结果。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素 的相关文章

  • querySelector 搜索直接子级[重复]

    这个问题在这里已经有答案了 我有一些类似 jquery 的函数 function elem return gt someselector elem 问题是我怎样才能做同样的事情querySelector 问题是 gt 选择器中querySe
  • 如何正确地将节点从引用传递到上下文?

    我正在尝试将节点从引用传递到上下文 但是因为我在第一次渲染后没有重新渲染 所以传递的节 点是null 我考虑了两种变体 但我认为它们不是最好的 To pass ref代替ref current 但在用例中 我将被迫使用类似的东西contex
  • React Native 无法访问 Cloud Firestore 后端

    我之前使用的是 firebase 实时数据库 但现在想切换到 Cloud Firestore 但即使经过身份验证 也会收到以下错误 我目前正在使用 Android Simulator 尝试禁用我的实时数据库 但找不到解决方案 Firebas
  • 用更好的模式替换开关(Javascript)

    我必须升级我的应用程序以根据用户类型和角色属性显示页面 目前 我使用一个简单的 switch 语句来根据用户类型来执行此操作 例如 switch type case a return CONSTANT ONE case b return C
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 指定 HTML5 输入类型 = 日期的值输出?

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d
  • 仅从功能区打开一个对话框

    我有一个带有登录按钮的功能区 可打开登录对话框 我想将对话框的数量限制为一个 我正在使用函数 displayDialogAsync startAddress options callback https learn microsoft co
  • 插件 gulp-babel 错误:插件/预设文件不允许导出对象,只能导出函数

    我现在尝试在我的 Ionic v1 应用程序中使用 JavaScript 2015 ES6 包 json name test version 1 0 0 dependencies ionic native deeplinks 4 18 0
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环?

    努力思考最好的解决办法 我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
  • iPhone 上的锁定方向 UIWebView

    有没有办法锁定 UIWebView 的方向 使用 Obj C JS 还是 Html 我不想有按钮或任何东西 我只想在应用程序打开时将其锁定为纵向 好像这个堆栈溢出帖子 https stackoverflow com questions 43
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • 如何捕获文本区域上的 Enter 按键而不是 Shift+Enter? [复制]

    这个问题在这里已经有答案了 I m doing it for texarea A function should be called when the user press Enter but nothing should be done
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙

随机推荐

  • Ansible local_action 指令

    我对 Ansible 很陌生 有一个简单的问题来了解我的理解local action指示 这是否意味着该命令完全在本地执行 假设你有这样的东西 local action command which nginx register check
  • 在 Lavaan 生长曲线模型中提取个体轨迹

    我已经使用 R 的 Lavaan 包中的 Growth 函数成功地对一项研究的纵向数据进行了建模 我找不到任何关于如何提取每个参与者的预测轨迹的记录 我只能找到整个组的预测轨迹 在摘要输出的 拦截 部分下给出 使用 lavPredict m
  • 如何在 JavaScript 中将变量的内容写入文件[重复]

    这个问题在这里已经有答案了 可能的重复 firefox 如何启用本地 JavaScript 来读取 写入我的 PC 上的文件 https stackoverflow com questions 2846045 firefox how to
  • python 中的 h2o 框架子集

    如何在 python 中对 h2o 框架进行子集化 如果 x 是一个 df 并且 Origin 是一个变量 那么在 pandas 中我们通常可以通过以下方式进行子集化 x x Origin AAF 但使用 h2o 框架会出现以下错误 H2O
  • 使用 Xamarin.Forms 和 Zxing 生成 QR 码

    我在网上看到了很多关于这个的内容 旧帖子 但似乎没有什么对我有用 我正在尝试从字符串中生成二维码并将其显示在应用程序中 这就是我一开始的情况 qrCode new ZXingBarcodeImageView BarcodeFormat Ba
  • OpenGL缓冲区更新[重复]

    这个问题在这里已经有答案了 目前我正在编写一个模拟水的程序 以下是我所做的步骤 创建水面 平面 创建VAO 创建顶点缓冲区对象 在其中存储法线和顶点 将指针绑定到此 VBO 创建索引缓冲区对象 然后我使用 glDrawElements 渲染
  • 当 ViewController 从 UIStoryboard 实例化时,isMemberOfClass 返回 no

    我有一个 OCUnit 测试类 PatientTestViewControllerTests 下面是界面 interface PatientTestViewControllerTests SenTestCase property nonat
  • “Electron”中“BrowserView”和“renderer” React 页面之间的消息

    我正在尝试弄清楚如何在两者之间交换消息main过程和BrowserView 我一直在使用ipc在 之间main过程和renderer 简单 的过程react renderer page 但现在 使用相同的技术 我在console of th
  • LibGDX 非常奇怪的错误 - 对象消失了

    当我创建我的第一个平铺地图创建器时libGDX 我注意到一个非常奇怪的错误 我创建这样的对象网格 private static final int GRID WIDTH 2400 private static final int GRID
  • 如何将 STRUCT - OR - JSON 传递给 Coldfusion CFC 方法

    我有一个现有的 CFC 在将结构传递到方法中时可以正常工作 问题是 我们现在还需要通过 JSON 将数据传递到同一函数中 这是 CFC 片段
  • 使用规则保护 Firestore 数据库。检查身份验证。够了吗?

    我是 Firebase 新手 正在尝试了解数据库规则 我正在使用 Firestore 我有一个数据库 基本上需要所有用户读取 也需要写入 所有用户都可以查看数据库中的文档 并通过某些操作更改某些字段 在某些情况下 他们会删除某些旧的过期文档
  • 在Python中读取tiff标签

    我正在尝试用 Python 读取 tiff 文件的标签 该文件是 RGB 的uint16每个通道的值 我目前正在使用tifffile import tifffile img tifffile imread file tif 然而 img是一
  • 以编程方式应用样式资源

    我没有找到一种以编程方式做到这一点的方法 所以我在这里发布这个问题 我也没有找到与此相关的任何问题 我有一个资源样式 在 res values styles xml 中定义 我想做的是使用 java 将这种样式应用到我正在操作的 View
  • 如何将标记化中的多单词名称保留在一起?

    我想使用 TF IDF 特征对文档进行分类 一种方法是 from sklearn feature extraction text import TfidfVectorizer import string import re import n
  • .pdbs 会减慢发布应用程序的速度吗?

    如果 dll 中包含 pdb 程序调试 文件 则行号将出现在引发的任何异常的堆栈跟踪中 这会影响应用程序的性能吗 这个问题与发布与调试 即优化 无关 这是关于拥有 pdb 文件的性能影响 每次抛出异常时都会读取 pdb 文件吗 加载程序集时
  • popupBackground 与 Material Design 相关的问题

    我一直致力于将我的应用程序更新为 Material Design 我有一个使用选项卡的应用程序 由于某种原因 每当我使用 android popupBackground 设置下拉菜单颜色时 它就会崩溃 我设置了一个带有选项卡的默认项目并使用
  • 转义 \u200b(零宽度空格)和其他非法 JavaScript 字符

    我有一组 JavaScript 对象 我引导到后端模板 以在页面加载时初始化我的 Backbone js 集合 它看起来像这样 作为 Twig 模板 我遇到的问题是某些文本字段包含 u200b 零宽度空格 这会破坏
  • 如何使用 C# 以编程方式编辑 Power BI Desktop 文档参数或数据源?

    我有一个在 Power BI Desktop 中内置的报告模板 并保存为 pbix 或 pbit 文件 该模板使用DirectQuery SQL数据库作为数据源 而服务器地址和数据库名称被提取到参数中 还有一个参数包含一个ReportId
  • libtool 在 Ubuntu 13.04 上构建 thrift 0.9.1 时出错

    在 Ubuntu 13 04 上构建 thrift 0 9 1 支持 C C java C perl python 时出现此错误 configure 不带任何选项运行 make 不带任何选项运行 Making all in test mak
  • 如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

    编辑 请注意 在 ernst zwingli 的帮助下 我找到了问题的根源 因此 如果您遇到相同的错误 他指出的修复之一可能会帮助您 我的问题是量角器本身的一个已知问题 如果您认为这可能是您 我已经扩展了我的步骤 以在我最初的问题之后查明问