CasperJS 表单未在 AngularJS 内提交
CasperJS form not submitting in AngularJS
我将使用 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();
});
您的选择器有误。您的意思是使用 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
的步骤没有做任何有用的事情。您不使用传递给页面上下文的参数,也不使用您从页面上下文 return 获得的值。
我将使用 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();
});
您的选择器有误。您的意思是使用 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
的步骤没有做任何有用的事情。您不使用传递给页面上下文的参数,也不使用您从页面上下文 return 获得的值。