javascript - Protractor -ScriptTimeoutError : asynchronous script timeout: result was not received in 20 seconds

Question

我是 Protractor 的新手，我正在尝试运行我的脚本。

describe('Navigator homepage', function() {
  it('should proceed to login', function() {
    browser.get('url');
  });

  it('Clicks the proceed button', function() {
    const proceedButton = element(by.id('auth-login-page-button'));
    proceedButton.click();
  });
});

但每当我运行它时，浏览器都会打开并继续访问该网站，然后等待 20 秒，然后我收到错误:ScriptTimeoutError:异步脚本超时:20 秒内未收到结果。该元素显然在那里并且可以单击，但不适用于 Protractor 。难道我做错了什么？配置文件如下所示:

// An example configuration file.
exports.config = {
  directConnect: true,

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Framework to use. Jasmine is recommended.
  framework: 'jasmine',

  // Spec patterns are relative to the current working directory when
  // protractor is called.
  specs: ['login_spec.js'],
  
  allScriptsTimeout: 20000,
  getPageTimeout: 15000,
  framework: 'jasmine',
  jasmineNodeOpts: {
    isVerbose: false,
    showColors: true,
    includeStackTrace: false,
    defaultTimeoutInterval: 40000
  }
};

Answer 1

考虑到您添加的错误消息(请参阅评论)，原因似乎是不断轮询 $timeout，这让 promise 无限期未解决，因此导致 Protractor 异步超时(see details here) .

解决方案

正确的解决方案是避免使用$timeout，而是使用$interval。这样 Protractor 就可以继续控制 ControlFlow，管理您的异步任务。所以这是一种软件错误，而不是 Protractor 错误。

您的错误信息:

失败:WAITING异步 Angular 任务在 20 秒后完成时超时。这可能是因为当前页面不是 Angular 应用程序。有关详细信息，请参阅常见问题解答:https://github.com/angular/protractor/blob/master/docs/timeo‌ uts.md#waiting-for-a‌ ngular 在使用定位器等待元素时 - 定位器:By( css 选择器，md-raised md-primary md-button md-ink-ripple)。
*以下任务待处理:- $timeout: function (){return _this.getVersion()}*

解决方法

不太好的解决方法是通过设置 browser.waitForAngularEnabled(false);(在 beforeEach 中或直接在规范中。

但这也意味着，在测试规范本身中手动处理 controlFlow。这需要使用大量的 .then() 和 ExpectedConditions，失去 Protractor 的主要优势之一。

调试可能性

检查描述 here for potential causes and workarounds 。具体尝试 browser.waitForAngularEnabled(false); 排除 Angular Protractor 问题。

如果找不到原因，则可能是时间问题(不太可能，但此时值得检查)。

您可以尝试添加日志消息来缩小有效执行顺序:

describe('Navigator homepage', function() {
    it('should proceed to login', function() {
    browser.get('url').then(function(){
        console.log("Page is fully loaded");
        });
    });
    it('Clicks the proceed button',function() {
        console.log("Start 2nd Test");
        const proceedButton = element(by.id('auth-login-page-button'));
        proceedButton.click();
    });
});

或者你把 Action 放在同一个测试用例中，使用 then() 来同步执行它们:

describe('Navigator homepage', function() {
    it('should proceed to login', function() {
    browser.get('url').then(function(){
        const proceedButton = element(by.id('auth-login-page-button'));
        proceedButton.click();
    });
});

在 onPrepare 中打开主页

作为一个很好的旁白:如果你总是首先加载主页，只需将它放入你的 conf.js 的 onPrepare-part 并且它总是在你的测试开始之前执行一次:

onPrepare: function () {
    browser.driver.manage().window().maximize();
    browser.get('url');
},