我正在尝试测试我制作的一个小角度应用程序。My app只是一个简单的用户表（您可以添加和编辑用户）。名称和电子邮件输入得到验证。
我要在名称输入上测试验证，验证非常简单-您的姓名必须至少少于3个字符。如果您的名字通过了验证the name input will be in green color，并且输入的类别将是
用户名表单控制输入-sm ng-dirty ng-valid-parse ng-touched ng-valid-required ng-valid ng-valid-minlength
如果您的姓名未通过验证the name input will be in yellow color，并且输入的类别为
用户名表单控制输入sm ng-无效ng-dirty ng-valid-parse ng-valid-必需ng-invalid-minlength ng-touched
conf.js
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
onPrepare : function() {
// browser.manage().window().setSize(1600, 1000);
browser.manage().window().maximize();
},
capabilities: {
'browserName': 'chrome'
},
specs: ['specs/main-spec.js'],
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 3000000,
},
};
main-spec.js
const userFormPage = require('../pages/user-form-page');
describe('test app', function () {
it('should get to the main page of the app', function () {
browser.get('http://localhost:8080/TestAppExample/index');
expect(browser.getCurrentUrl()).toEqual('http://localhost:8080/TestAppExample/index');
});
it('should write wrong input in the name input',function () {
userFormPage.sendKeysNameInput('na');
expect(userFormPage.getNameInput().getAttribute('value')).toEqual('na');
// browser.wait(function () {
// return nameInput.getAttribute('class').then((attr) => {
// return attr == 'username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched';
// })
// },10000);
expect(userFormPage.getNameInput().getAttribute('class')).toEqual('username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched');
});
});
user-form-page.js
var userFormPage= function () {
var nameInput = element(by.id('uname'));
this.getNameInput = function () {
return nameInput;
};
this.sendKeysNameInput = function (keys) {
nameInput.clear().sendKeys(keys)
}
};
module.exports = new userFormPage();
index.html
<html>
<head>
<title>Test App</title>
<link href="/TestAppExample/static/css/bootstrap.css" rel="stylesheet">
<link href="/TestAppExample/static/css/app.css" rel="stylesheet">
</head>
<body data-ng-app="myApp" class="ng-cloak">
<div class="generic-container" data-ng-controller="UserController as controller">
<div class="panel panel-default">
<div class="panel-heading"><span class="lead">User Registration Form </span></div>
<div class="formcontainer">
<form data-ng-submit="controller.submit()" name="myForm" class="form-horizontal">
<input type="hidden" data-ng-model="controller.user.id" />
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="uname">Name</label>
<div class="col-md-7">
<input type="text" data-ng-model="controller.user.userName" id="uname" class="username form-control input-sm"
placeholder="Enter your name" required data-ng-minlength="3"/>
<div class="has-error" data-ng-show="myForm.$dirty">
<span data-ng-show="myForm.uname.$error.required">This is a required field</span>
<span data-ng-show="myForm.uname.$error.minlength">Minimum length required is 3</span>
<span data-ng-show="myForm.uname.$invalid">This field is invalid </span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="address">Address</label>
<div class="col-md-7">
<input type="text" data-ng-model="controller.user.address" id="address" class="form-control input-sm"
placeholder="Enter your Address. [This field is validation free]"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="email">Email</label>
<div class="col-md-7">
<input type="email" data-ng-model="controller.user.email" id="email" class="email form-control input-sm"
placeholder="Enter your Email" required/>
<div class="has-error" data-ng-show="myForm.$dirty">
<span data-ng-show="myForm.email.$error.required">This is a required field</span>
<span data-ng-show="myForm.email.$invalid">This field is invalid </span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-actions floatRight">
<input type="submit" id="submit" value="{{!controller.user.id ? 'Add' : 'Update'}}"
class="btn btn-primary btn-sm" data-ng-disabled="myForm.$invalid">
<button type="button" id="reset" data-ng-click="controller.reset()" class="btn btn-warning btn-sm"
data-ng-disabled="myForm.$pristine">Reset Form</button>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><span class="lead">List of Users </span></div>
<div class="tablecontainer">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="u in controller.users" class="user-row">
<td><span data-ng-bind="u.userName" class="user-name-td"></span></td>
<td><span data-ng-bind="u.address"></span></td>
<td><span data-ng-bind="u.email"></span></td>
<td>
<button type="button" id="edit" data-ng-click="controller.edit(u.id)"
class="btn btn-success custom-width">Edit</button>
<button type="button" id="remove" data-ng-click="controller.openModal(u)"
class="btn btn-danger custom-width">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-ng-controller="ModalInstanceController as modalCtrl">
<script type="text/ng-template" id="modalContent">
<div class="modal-header">
<h3 class="modal-title">Delete user</h3>
</div>
<div class="modal-body">
<label class="control-lable">Are you sure wan't to delete user {{userName}}?</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="ok" type="button" ng-click="$close()">OK</button>
<button class="btn btn-warning" id="cancel" type="button" ng-click="$dismiss('cancel')">Cancel</button>
</div>
</script>
</div>
<script src="/TestAppExample/static/js/vendor/angular.js"></script>
<script src="/TestAppExample/static/js/vendor/jquery.min.js"></script>
<script src="/TestAppExample/static/js/vendor/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="/TestAppExample/static/js/vendor/bootstrap.min.js"></script>
<script src="/TestAppExample/static/js/app.js"></script>
<script src="/TestAppExample/static/js/service/UserService.js"></script>
<script src="/TestAppExample/static/js/controller/UserController.js"></script>
<script src="/TestAppExample/static/js/controller/ModalInstanceController.js"></script>
</body>
</html>
我的测试在名称输入中写了'na'并且名称输入应变为黄色，但是当我运行测试时，出现以下错误
预期“用户名形式控制输入-sm ng不变” ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength'等于“用户名形式控制输入-sm ng-invalid” ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched”。
编辑
如果我将sendKeysNameInput()方法更改为该方法
this.sendKeysNameInput = function (id, keys) {
var targetInput = element(by.id(id));
(<HTMLInputElement>targetInput).focus().clear().sendKeys(keys)
}
然后我收到意外的令牌错误
(<HTMLInputElement>targetInput).focus().clear().sendKeys(keys)
^
SyntaxError: Unexpected token <
我的想法（WebStorm）建议我更改sendKeysNameInput()方法时将语言设置为react，但是我正在将纯js与node.js（量角器和茉莉花库）一起使用并测试Angular应用程序。
答案 0 :(得分：0)
在您的nameInput.focus()中添加sendKeysNameInput()，这将使您的输入聚焦，并使其被“触摸”。或者，您可以将sendKeysNameInput()更改为
this.sendKeysNameInput = function (id, keys) {
var targetInput = element(by.id(id));
(<HTMLInputElement>targetInput).focus().clear().sendKeys(keys)
}
然后将getNameInput()改为类似的内容
this.getInputValue = function (id) {
return (<HTMLInputElement>document.getElementById(id)).value
};
并创建一个名为getClassValue()
this.getInputValue = function (id) {
return document.getElementById(id).className
};
哪个可以允许您这样做
userFormPage.sendKeysNameInput('uname', 'na');
expect(userFormPage.getInputValue('uname').toEqual('na');
expect(userFormPage.getClassValue('uname').toEqual('...');
这会将您的函数转换为pure functions，从而使您可以随着表单的增长使用多个输入。
要提及的另一件事是，如果我是对的话，您不想获取类属性，而希望获取 className DOM属性。这些属性用于DOM属性的 初始化 ，通常以后不会更改，类属性应该进行更新，但最佳实践是抢占将会总是更新的DOM属性。
诸如textContent的某些属性没有附加属性，反之，colspan获得属性时，诸如colspan的某些属性没有关联的DOM属性。是唯一可能做的事情。对于确实具有value属性和value属性的Input，您将发现该属性永不更新，您可以看到here。