angularjs - Protractor 找不到元素

Question

在测试我的 Angular 应用程序时，我无法让 Protractor 按预期运行。我的规范文件如下所示:

describe('app login', function() {
   it('should allow admin user to log in', function() {
       browser.get('http://localhost:3008');

    //we can find the log in link
    expect(element(by.id('login-link')).getText()).toContain('Log in');

    //open login dialog
    element(by.id('login-link')).click();
    browser.ignoreSynchronization = true;
    browser.sleep(1000);

    //enter credentials
    element(by.id('login-username')).sendKeys('User1');
    element(by.id('login-password')).sendKeys('Password1');
    browser.sleep(1000);

    //log in
    var el = element(by.id('login-btn'));
    //WORKS IF BELOW LINE IS COMMENTED OUT 
    el.click();
    browser.sleep(1000);

    //display confirms login
    expect(element(by.id('user-display')).getText()).toContain('User1');

  });
});

请注意，我在开始时遇到同步错误，这就是为什么我将ignoreSynchronization标志设置为true并且所有这些browser.sleeps。

现在事情是这样的:如果我删除 el.click() 语句(以及最后的 Expect 调用)，测试将顺利进行。但是，一旦包含该行，我就会得到 NoSuchElementError: No element found using locator: By.id("login-username")。请注意，这个元素不是我实际上想要单击的元素，这是奇怪之处的一部分。

Answer 1

首先让我将您的问题分为三部分。让我们一步一步来:
1)ignoreSynchronization 标志设置为 true:它指示 Protractor 不等待 Angular Promise。当您 i) 测试等待 $http 或 $timeout 解决的场景 ii) 针对非 Angular 站点进行测试时，将使用此选项。这些时候您应该将ignoreSynchronization 设置设置为true。问问自己你的测试先决条件是否需要它？根据您上面的解释，我相信您可以将其设置为 false 并安全地继续测试。通过在不需要时将其设置为 true，您将指示 Protractor 在执行操作之前不要尝试与页面同步。这可能是有害的，因为 Protractor 不会等到 $timeouts 和 $http 调用被处理，这可能会导致测试变得不稳定。更多信息:https://github.com/angular/protractor/blob/9891d430aff477c5feb80ae01b48356866820132/lib/protractor.js#L158

一旦将此标志设置为False，您就可以取消不必要的 browser.sleep()。

2) Protractor 未找到元素: Protractor 未检测到元素的原因有多种:
-元素不适合显示窗口。
-元素不可见，但存在。
-异步任务未正确处理。
-另一个元素覆盖在另一个元素上

我建议你尝试一下:

1. 使用 Promise、async/await 或回调处理所有异步事件。

describe('app login', function() {
  it('should allow admin user to log in', async() => {
    await browser.get('http://localhost:3008');

    //we can find the log in link
    expect(await element(by.id('login-link')).getText()).toContain('Log in');

    //open login dialog
    await element(by.id('login-link')).click();
    //try putting this setting in your protractor.conf file instead of describe 
    //block
    //browser.ignoreSynchronization = false;
    
    //enter credentials
    await element(by.id('login-username')).sendKeys('User1');
    await element(by.id('login-password')).sendKeys('Password1');

    //log in
    var el = element(by.id('login-btn'));
    //WORKS IF BELOW LINE IS COMMENTED OUT 
    await el.click();

    //display confirms login
    expect(await element(by.id('user-display')).getText()).toContain('User1');

    });
});

有关如何更改代码的更多信息:https://jasmine.github.io/tutorials/async

3)过度使用 browser.sleep(1000);:在代码中，使用 sleep() 会使其变得脆弱并且如果系统运行速度比正常慢，有时会失败。这会导致你的测试失败，通常是在不可重现的场景中。因此，除非您想将时间花在无用的调试上，否则请停止使用它。

而是使用这些等待策略:显式等待、waitforAngular；以确保您的异步事件在进入下一步之前已完成。如果您需要了解更多信息，请在下面发表评论，否则我将严格按照您提出的问题保留此答案。问走吧!