Protractor E2E 测试 - 异步 Rest API 调用

Question

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

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

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

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

这是我的测试 (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;
        }

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

我试过打电话给 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 成为你想要的。在与浏览器进行大部分交互后（例如，提交任何内容或与服务器进行任何其他交互），您需要等待页面进入其新状态。

Protractor E2E 测试 - 异步 Rest API 调用

Protractor E2E test - async Rest API call

integration-testing

angularjs

protractor