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 是你想要的。在与浏览器进行大多数交互（例如，提交任何内容或与服务器进行任何其他交互）之后，您需要等待页面进入其新状态。