angularjs - Protractor E2E 测试 - 异步 Rest API 调用

Question

我想测试一个简单的端到端流程 - 创建一个新帐户 - 使用 Protractor。

我有一个 AngularJS 应用程序包含一个创建帐户页面，用户需要在其中填写一个简单的表格并单击提交。

单击提交会触发一个调用异步方法的方法，以在我的服务器中创建帐户。

当该函数返回时，用户将被定向到另一个页面。

这是我的测试(creatAccount.spec.js):

describe('Create Account Page Tests', function() {

    it('createAccount success', function(){
        browser.get('http://localhost:9001/#/createAccount');
        element(by.model('user.organizationName')).sendKeys('Westeros');
        element(by.model('user.firstName')).sendKeys('John');
        element(by.model('user.lastName')).sendKeys('Snow');
        element(by.model('user.email')).sendKeys('johnSnow@westeros.com');
        element(by.model('user.password')).sendKeys('123');
        element(by.model('confirmPassword')).sendKeys('123');

        element(by.id('submitBtn')).click();

        expect(browser.getCurrentUrl()).toEqual('http://localhost:9001/#/userManagement');

    });

});

这是我的提交方法:

  $scope.submit = function() {
        $scope.submitted = true;
        UserService.createAccount($scope.user)
            .then(function success(){
                $state.go('userManagement');
            }, function failure(){
                $log.error("something went wrong");
        });
    };

这是我的 UserService.createAccount 方法:

 function createAccount(user){
            var deferred = $q.defer();
            APIService.sendRequest(APIService.ACTION().createAccount, undefined, user)
                .then(function success(res) {
                    deferred.resolve();
                }, function failure(reason){
                    $log.debug('create account failed. reason: ', reason);
                    deferred.reject(reason);
                });

            return deferred.promise;
        }

这是我的 APIService.sendRequest 方法:

function sendRequest(action, params, data){
            var defferd = $q.defer();
            var request = $resource(action.url, {}, {send: {method: action.method, isArray: action.isArray ? action.isArray : false, withCredentials: true}});

            if (!params){
                params = {};
            }

            request.send(params, data, function(res) {
                defferd.resolve(res);
            }, function(error) {
                defferd.reject(getErrorReponseListError(error));
            });

            return defferd.promise;
        }

我的测试一直失败，因为该页面未定向到下一页。在我看来，测试并没有等待异步方法返回，甚至认为它应该...

我尝试调用 browser.waitForAngular() 或 browser.wait(5000) 但没有任何帮助...

Answer 1

这一行:

expect(browser.getCurrentUrl()).toEqual('http://localhost:9001/#/userManagement');

期望浏览器 URL 立即成为该值。它不会等待 URL 更改。该行完成之前的 click，但这意味着点击已传送到浏览器，而不是浏览器中的处理程序已完成(无论如何都是异步的)。

您需要训练 Protractor 测试等待浏览器达到预期状态。这样的事情应该有效:

browser.wait(function() {
   return browser.getCurrentUrl().then(function(url) {
      return url === 'http://localhost:9001/#/userManagement';
   });
});

因此，不是期望 url 是您所说的，而是等待 url 是您想要的。在与浏览器进行大多数交互之后(例如，提交任何内容或与服务器进行任何其他交互)，您需要等待页面进入其新状态。