重定向到 Auth0 非 Angular 页面后，量角器同步到 Angular 页面 [英] Protractor syncing to an Angular page after redirection to Auth0 non-Angular page

问题描述

我有一个使用量角器进行 e2e 测试的 Angular Web 应用程序.我最近添加了 OAuth0 身份验证.我在使用 await browser.waitForAngularEnabled(false) 重定向到非 Angular OAuth0 页面之前禁用了 Angular 同步，并且工作正常.但是，对于该规范文件测试套件的其余部分，我无法再次使用 await browser.waitForAngularEnabled(true) 重新启用 Angular 同步，否则会出现臭名昭著的量角器超时错误.我想重新启用 Angular 同步，否则我必须使用预期的条件、等待和睡眠来确保加载后续页面，这可能会导致间歇性错误.

I have an Angular web app that uses Protractor for e2e tests. I recently added OAuth0 authentication. I disable Angular synchronisation before redirection to the non-Angular OAuth0 page using await browser.waitForAngularEnabled(false) and that works fine. However I cannot reenable Angular synchronisation using await browser.waitForAngularEnabled(true) again for the rest of that spec file test suite or I get the infamous protractor timeout errors. I'd like to re-enable Angular synchronisation as otherwise I have to use expected conditions, waits and sleeps to ensure follow-on pages are loaded and that can result in intermittent errors.

我已阅读所有问题和答案，并尝试了所有显而易见的方法 - 重新加载页面、获取新页面、等待、长时间睡眠等.

I have read all the questions and answers and have tried all the obvious - reloading the page, getting a new page, waits, long sleeps, etc, etc.

所以我的问题非常具体，而不是寻求建议 - 有没有人了解量角器用来与 Angular 页面同步的机制，你知道 Angular 是否有可能在重定向到和返回后重新同步，一个非 Angular 页面，即我是否在浪费时间寻找修复程序.我阅读了一些关于该机制的内容 - 它加载了一个要在页面上运行的脚本，但我不确定为什么在从 auth0 重定向返回后执行 browser.get{'/') 时无法再次加载.

So my question is quite specific rather than looking for suggestions - does anyone understand the mechanism Protractor uses to sync with Angular pages and do you know whether it possible or not for Angular to resync after a redirection out to, and back from, a non Angular page, i.e. am I wasting my time looking for a fix. I read up a little on the mechanism - it loads a script to be run on the page but I'm unsure why that can't be loaded again when I do a browser.get{'/') after returning from the auth0 redirection.

请注意，我可以禁用 Angular 同步，并且可以让事情正常工作，所以我不会就如何让事情正常工作寻求建议.如果您遇到了具体问题并提出了解决方案，我很乐意听取您的意见.

Note that I can leave Angular synchronisation disabled and can get things to work so I am not asking for advice on just how to get things working. If you have faced the specific problem and come up with a fix I'd love to hear it.

感谢任何帮助.

推荐答案

答案 - 是的，您可以在量角器中重新启用 angular.但是，量角器并不总是适用于角度应用程序.因此，只需确保量角器同步将在您的应用中正常工作，并且页面已为此做好准备.

Answer - yes you can reenable angular in protractor. However, protractor doesn't always work with angular apps. So just make sure protractors synchronization will be working as it should with your app AND the page is ready for this.

首先，手动打开应用，并获得授权.然后在控制台中运行 getAllAngularTestabilities().如果此命令不可用，量角器将无法使用 angular.如果命令成功，请查看返回的对象，特别是 obj[0]._ngZone 的 hasPendingMacrotasks 和 hasPendingMicrotasks 属性.如果其中任何一个是true，量角器就不能在这个页面上工作.如果两者都是false，则可以进行下一步

First, manually open the app, and get authorized. Then in console run getAllAngularTestabilities(). If this command in not available, protractor can't work with angular. If the command is successful, take a look at returned object, specifically at hasPendingMacrotasks and hasPendingMicrotasks properties of obj[0]._ngZone. If any of them is true, protractor can't work with this page. If both of them are false then you can proceed to the next step

现在，当您现在页面可以使用 browser.waitForAngularEnabled(true) 与量角器通信时，您需要为您的测试实现以下方法

Now, when you now the page can talk to protractor with browser.waitForAngularEnabled(true) you need to implement the following method for your tests

let login = async function (username, password) {
  await browser.waitForAngularEnabled(false);
  await browser.get(url);
  await $usernameInput.sendKeys(username);
  await $passwordInput.sendKeys(password);
  await $loginButton.click();
  // MOST IMPORTANTLY, YOU HAVE TO WAIT UNTIL YOUR APP FULLY LOADED
  await browser.wait(
    // whatever you need to wait for,
    timeout,
    'failure message'
  );
  // AND FINALLY
  await browser.waitForAngularEnabled(true);
}

我的意思是您不必使用这种方法，我只是向您展示了实现结果必须遵循的操作顺序.

I mean you don't have to have this method, I just showed you the order of actions you have to follow to achieve your results.

基本上，重点是，当您登录时，确保非 Angular 登录页面已消失，并且在重新启用等待 Angular 之前，您的 Angular 页面已完全加载.

Basically, the point is, when you login, make sure the non-angular login page is gone, and your angular page is fully loaded before reenabling waiting for angular.

您可以使用的两种方法:

Two approaches you could use:

• 等待所有关键元素出现
• 或编写一个函数，该函数将返回 return !obj[0]._ngZone.hasPendingMacrotasks &&!obj[0]._ngZone.hasPendingMicrotasks 并将其传递给 browser.wait

• wait for all key elements to be present
• or write a function which will be returning return !obj[0]._ngZone.hasPendingMacrotasks && !obj[0]._ngZone.hasPendingMicrotasks and pass it to the browser.wait

这篇关于重定向到 Auth0 非 Angular 页面后，量角器同步到 Angular 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！