CasperJS 表单未在 AngularJS 中提交

Question

我将使用 CasperJS 进行测试、表单提交和 UI 测试，而且我是 CasperJS 和 AngularJS 的新手。在使用 CasperJS 进行测试时，我的表单没有提交，但它给出了错误，即找不到表单。

这是我的表格

<form role="form" name="login-form">
    <div class="list list-inset col-sm-6 well col-md-offset-3 shadowBox">
         <label class="item item-input item-stacked-label ">
          <span class="input-label">Email</span>
         </label>
        <div class="item item-input item-stacked-label">
          <input class="form-control" name="emailId" type="email" ng-model="loginData.email" placeholder="Email" required>
        </div>
        <label class="item item-input item-stacked-label">
          <span class="input-label">Password</span>
        </label>
        <div class="item item-input item-stacked-label">
          <input class="form-control" name="passwordId" type="password" ng-model="loginData.password" placeholder="Password" required>
        </div>
        <div class="message-box  alert-danger text-center" role="alert" ng-hide="!message.length">
              <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
              <span class="sr-only">Error:</span>
              <span data-ng-bind="message"></span>
         </div>
         <div class="item" ng-show="{{applicationType}}">
              <hr/>
              <button class="button button-positive pull-right btn btn-primary"   ng-click="doLogin(loginData)" id="success">Log in</button>
              <a ng-click="goToForgotPassword()" class="button button-clear button-positive">Forgot password?</a>
        </div>
        <div style="clear:both;"></div>
        <label class="item" ng-hide="{{applicationType}}">
            <button class="button button-positive"   ng-click="doLogin(loginData)" id="success">Log in</button>
             <a ng-click="goToForgotPassword()" class="button button-clear button-positive">Forgot password?</a></div>
        </label>
    </div>
</form>

这是我的 CasperJS 代码

casper.start('http://localhost:3000/#/login', function() {
    this.fillSelectors('form#login-form', {
        'emailId':    'test@gmail.com',
        'passwordId':    'test123'
    }, false);
});

casper.then(function() {
    this.evaluateOrDie(function() {
        return /message sent/.test(document.body.innerText);
    }, 'sending message failed');
});

casper.run(function() {
    this.echo(this.getHTML());
    this.echo('message sent').exit();
});

Answer 1

您的选择器错误。你的意思是使用form[name="login-form"]。你的初始选择器实际上等于form[id="login-form"]，因为# 是id 选择器。

请注意，您使用fillSelectors 函数，因此您需要使用实际的选择器来查找字段。

由于这是angularjs，你可能还需要等待表单出现。

完整代码：

casper.start('http://localhost:3000/#/login');

casper.waitForSelector('form[name="login-form"] input[name="emailId"]', function() {
    this.fillSelectors('form[name="login-form"]', {
        'input[name="emailId"]':    'test@gmail.com',
        'input[name="passwordId"]':    'test123'
    }, false);
});

casper.run(function() {
    this.echo(this.getHTML());
    this.echo('message sent').exit();
});

---

还要注意包含evaluateOrDie 的步骤没有做任何有用的事情。您不使用传递给页面上下文的参数，也不使用从页面上下文返回的值。