Angularjs 点击按钮后，角度量角器端2端测试失败

所以今天我一直在为一个带量角器的Angular JS应用程序设置端到端测试。为了编写更干净的测试，我使用了量角器网站上描述的模式

测试场景：当用户进入网站时，他/她需要先登录。通过填写他们的凭据并单击按钮，用户将重定向到验证页面。在那里，他们需要输入通过电子邮件发送给他们的代码。在这种情况下，运行端2端测试时验证代码始终相同（

123456

）。用户输入代码后，需要单击验证按钮以进入登录页（

组织

）。将向用户显示组织列表

量角器测试：

运行测试时会发生什么：量角器能够填写用户凭据并单击登录按钮。但是，不会发生到验证页面的相应重定向，导致预期失败，因为量角器无法定位页面对象，因为这些对象位于另一个页面上。是量角器产生的错误消息的一部分。以防万一，您可以看到正在使用的量角器配置文件

---

我尝试放置显式等待（

browser.wait（））

点击按钮周围，但这似乎也有同样的效果。有人能指出我做错了什么，以及为什么没有发生重定向吗？我是否遗漏了一些明显的东西？提前感谢！

我遇到了一些代码问题，在一段时间内，代码比您预期的更早中断。例如，as当它加载一个具有正确路径的页面对象，但页面本身的声明可能出错时，整个测试崩溃

首先，我会在点击登录按钮后注释掉所有内容。然后可能添加10秒睡眠。运行测试并观看。它是否点击按钮？是否通过登录屏幕

如果这样做有效，一次取消一行的注释，看看它在哪里崩溃。试着保持睡眠状态，看看它是否有影响。如果睡眠确实有影响，这意味着你使用的任何等待在那种情况下都不起作用

---

当然，如果你每次都碰到一条让你崩溃的线，那么你可以进一步挖掘！

我发现有助于工作的是，通过等待标题成为特定标题，强制量角器等待页面加载

例如：标题可以是登录页面上的登录名，但点击“登录”后，下一页的标题是“验证”。因此，您可以强制量角器等待验证页面加载

注意：我不知道你的头衔的实际名称，所以我只使用了占位符

'use strict';

var Util = function () {
  this.login = function login(username, password) {
    browser.get('/#/login');

    var loginPage = require('./spec/login/login.po');
    var validationPage = require('./spec/login/validate.po');

    // fill in login form
    loginPage.username.sendKeys(username);
    loginPage.password.sendKeys(password);

    // submit login form and navigate to validation page
    loginPage.loginButton.click();

    // wait till our validation page loads then do our validation
    browser.wait(protractor.until.titleIs("Validation"), 5000, "✗ Failed to wait for the validation page to load").then(function(){

        // fill in validation form
        validationPage.validationCode.sendKeys('123456');

        // submit validation form and navigate to landing page
        validationPage.submitValidateBtn.click();
    });

  }
};

---

如果您的登录页面是非角度的，请仔细检查是否需要在量角器中设置为false

如果它们是棱角形的，我想您需要等待

单击
承诺在登录后完成吗？下面的操作有效吗

loginPage.loginButton.click().then(function () {
  validationPage.validationCode.sendKeys('123456');
  ...
}

通过这种方式，只要登录/验证页面确实是以角度完成的，量角器本身就执行
等待
（在其他答案中建议）

作为相关说明，在每次
之前的
和每次
之后的
中，您可能还希望使用可选的
done
回调，以便实际测试仅在登录成功后开始：

beforeEach(function (done) {
    ...
    util.login(user, pw).then(done);
}

不过，这确实需要您的
login
方法实际返回验证单击的承诺（我通常让我的所有页面对象方法返回承诺）

同样与页面对象相关，与其让登录页面对象仅包含元素查找器作为字段，为什么不给该页面对象提供更抽象的登录方法（现在位于util类中）

此外，我倾向于为每个页面对象提供一个“自检”方法，该方法允许检查浏览器是否确实位于预期页面上。在登录页面上单击“登录”后，我希望位于验证页面上。因此，我要做的第一件事是检查（断言）我确实在验证页面上。只有那时我才真正按下验证按钮。这会在应用程序的路由被破坏的情况下给出更清晰的错误消息

我在上写了更多关于状态导航和页面对象的内容。
您是否手动运行规范，全部由您自己完成？运行应用程序时是否成功（使用end-2-end配置），一切正常。我可以登录、验证并进入登录页。发生了什么事而不是重定向到验证页？浏览器控制台上有错误吗？谢谢。另外，如果单击“登录”按钮后，您将等待验证文本输入变为可见：
browser.wait（量角器.ExpectedConditions.visibilityOf（validationPage.validationCode），5000）
？…当您单击“登录”按钮时，应用程序中是否发送了任何XHR请求？此请求是否在测试中成功？
'use strict';

var Util = function () {
  this.login = function login(username, password) {
    browser.get('/#/login');

    var loginPage = require('./spec/login/login.po');
    var validationPage = require('./spec/login/validate.po');

    // fill in login form
    loginPage.username.sendKeys(username);
    loginPage.password.sendKeys(password);

    // submit login form and navigate to validation page
    loginPage.loginButton.click();

    // wait till our validation page loads then do our validation
    browser.wait(protractor.until.titleIs("Validation"), 5000, "✗ Failed to wait for the validation page to load").then(function(){

        // fill in validation form
        validationPage.validationCode.sendKeys('123456');

        // submit validation form and navigate to landing page
        validationPage.submitValidateBtn.click();
    });

  }
};

loginPage.loginButton.click().then(function () {
  validationPage.validationCode.sendKeys('123456');
  ...
}

beforeEach(function (done) {
    ...
    util.login(user, pw).then(done);
}