在量角器中单击按钮后如何等待 URL 加载？

Question

我正在使用量角器对 Angular 2 项目进行端到端测试，并且需要测试登录操作。这里的问题是，当单击登录按钮时，expect 语句仍然会获取登录页面的 URL，因为它应该是主页。如果我等待，那么测试成功。我在文档中的某处读到量角器等待进程自动完成，所以，

1. 是什么导致了这个错误？
2. 如何在不显式使用wait() 方法的情况下正确执行操作？
3. 量角器是否有类似于fakeAsync、async 或至少whenStable 之类的单位 测试？

这是我的测试用例

it("User successfully login",()=>{
    browser.get(browser.baseUrl + '/account/login').then(() => {
        return expect(browser.getCurrentUrl()).toBe(browser.baseUrl +  "/account/login")
    }).then(()=>{
        element(by.tagName('input[type=text]')).sendKeys('username');
        element(by.tagName('input[type=password]')).sendKeys('password');
        element(by.css('button[type=submit]')).click().then(()=>{
            return expect(browser.getCurrentUrl()).toBe(browser.baseUrl + "/home");
        });

    });
});

注意：

1. 我有指示避免使用browser.wait() 方法。
2. 登录按钮通过 API 向后端发送 http 请求。

变通解决方案[基于 Ernst 的解决方案]：

我解决了这个问题。我不知道它是否适用于其他场景，或者它是否是正确的方法。我加了

browser.wait(EC.urlContains(browser.baseUrl + "/account/login"), 10000);
browser.waitForAngularEnabled(false);
browser.wait(EC.urlContains(browser.baseUrl + "/home");

就在 click() 事件之后，它现在似乎可以工作。

Answer 1

导致错误的原因：

click() 返回一个承诺，量角器等待解决。当登录请求被发送到服务器而不是加载主页时，它可能已经解决了。因此，在页面加载之前就开始执行下一步。

为什么不wait()：

我不确定，你得到不使用browser.wait() 的指令的依据是什么。很可能您不应该使用browser.sleep()（因为该命令总是过时的），但如果您不想使用browser.wait()，您的开发人员可能不会离开最初打开的Angular Page。

fakeAsync、whenStable 等：

Protractor 在browser.waitForAngular() 中默认使用whenStable，它总是在promise 之后调用，只要你没有关闭browser.waitForAngularEnabled(false)...你只需要关闭非角度页面或者如果您的开发人员使用即持久的宏任务，这将导致超时。

此外，由于 Selenium 控制流可能会在 2018 年 11 月被弃用 (read about here)，因此有 async/await 可用。 Read this important guide here 还有一些further infos from protractor about it here

现在是你的情况：

您不需要在您的情况下使用then()s，因为您不需要立即解决承诺。 expect() 会自动解决你的承诺，所以那里不需要then()。

事实上，Protractor 逐行执行所有命令，就好像它们都被包裹在then()s 中一样，所以它会自动保持你的执行同步（只要你不使用then() 启动异步任务）代码。

所以这是我对您的代码的建议：

it("User successfully login",()=>{
    var EC = protractor.ExpectedConditions;  //or within onPrepare() of conf.js put global.EC = protractor.ExpectedConditions ... to make it everywhere available.
    browser.get(browser.baseUrl + '/account/login');
    //next line lets protractor wait max 5 seconds for your url to become, what you want.
    browser.wait(EC.urlContains(browser.baseUrl +  "/account/login"), 5000);
    //additionally after the URL appeared, use this command to wait until the page is fully loaded.
    browser.waitForAngular();
    expect(browser.getCurrentUrl()).toBe(browser.baseUrl +  "/account/login");
    element(by.tagName('input[type=text]')).sendKeys('username');
    element(by.tagName('input[type=password]')).sendKeys('password');
    element(by.css('button[type=submit]')).click();
    //next line lets protractor wait max 5 seconds for your url to become, what you want.
    //as here a new page is loaded and the click()-promise is resolved before, use this:
    browser.wait(EC.urlContains(browser.baseUrl +  "/account/login"), 5000);
    //additionally after the URL appeared, use this command to wait until the page is fully loaded.
    browser.waitForAngular();
    expect(browser.getCurrentUrl()).toBe(browser.baseUrl + "/home");
});

如果您现在超时，那么这是一个单独的调试问题。 查看this Protractor site for infos about timeouts 和this SO-Answer here 了解如何调试超时。