blocks|key|4512403|text|我认为您想为您的custom-form-directive指令构建一个类似于"pageObject“(参见https://github.com/angular/protractor/blob/master/docs/page-objects.md)的东西。这个对象将理解指令如何映射到Protractor将理解的原语(例如，特定的输入字段)。它应该接受一个定位器，这样它的调用者就可以在页面上传递how+to+find指令，但对象应该处理之后的所有事情。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4512404|var+object+=+new+customFormDirectiveObject(by.model('data.person'));|code-block|syntax|javascript|4512405|根据您的指令的工作方式，您可以执行如下操作：|4512406|object.setName(first,+last,+user);|4512407|或者，如果它更动态，可能是这样的：|4512408|object.setName({firstname:+first,+lastname:+last,+username:+user+});|4512409|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/protractor/blob/master/docs/page-objects.md^0|8|L|1H|1Y|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

I think you want to build something like a "pageObject" (see <a href="https://github.com/angular/protractor/blob/master/docs/page-objects.md" rel="nofollow">https://github.com/angular/protractor/blob/master/docs/page-objects.md</a>) for your <code>custom-form-directive</code> directive. This object will understand how the directive maps to primitives that Protractor will understand (e.g., specific input fields). It should take a locator so its callers can pass in the how to find the directive on the page, but the object should handle everything after that.

<pre><code>var object = new customFormDirectiveObject(by.model('data.person'));
</code></pre>

depending on how your directive works you'd do something like:

<pre><code>object.setName(first, last, user);
</code></pre>

or if its more dyanmic maybe something like this:

<pre><code>object.setName({firstname: first, lastname: last, username: user });
</code></pre>

blocks|key|4920|text|这取决于您如何从指令中的输入中获取数据。但是，在所有情况下，您都可以将element(<locator>)调用链接在一起以搜索指令的sub-elements：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4921|var+directive+=+element(by.model('data.person'));
var+subElement+=+directive.element(by.<something>);|code-block|syntax|javascript|4922|如果您在指令本身中对每个输入使用ng-model，则可以执行以下操作：|4923|var+directive+=+element(by.model('data.person'));

//+Assuming+the+inputs+have+attributes+like+`ng-model="firstname"`+in+the+directive+template
var+firstnameInput+=+directive.element(by.model('firstname'));
var+lastnameInput+=+directive.element(by.model('lastname'));
var+usernameInput+=+directive.element(by.model('surnamname'));|4924|然后在每次调用sendKeys时|4925|firstnameInput.sendKeys('Peter');
secondnameInput.sendKeys('Piper');
usernameInput.sendKeys('PickledPumpernickle');|4926|如果您没有在指令模板中使用ng-model，则可以使用其他定位器查找子元素，如果需要，还可以使用get，并取决于它们在DOM中的顺序|4927|var+inputs+=+directive.element(by.css('input'));
var+firstnameInput+=+inputs.get(0);
var+secondnameInput+=+inputs.get(1);
var+usernameInput+=+inputs.get(2);|4928|但是，我怀疑如果在指令中指定了replace:+true，上述方法都不会起作用，因为它依赖于DOM中具有ng-model属性的原始元素。|4929|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/protractor/blob/master/docs/locators.md#user-content-finding-sub-elements^0|Z|I|1U|C|0|0|0|G|8|0|0|7|8|0|0|D|8|1C|3|0|0|F|D|1G|8|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|U|3|V|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

It depends on how you're getting data in/out of the inputs in the directive. However, in all cases you can chain together <code>element(&lt;locator&gt;)</code> calls to search for <a href="https://github.com/angular/protractor/blob/master/docs/locators.md#user-content-finding-sub-elements">sub-elements</a> of the directive:

<pre><code>var directive = element(by.model('data.person'));
var subElement = directive.element(by.&lt;something&gt;);
</code></pre>

If you're using <code>ng-model</code> in the directive itself on each of the inputs, you can do something like:

<pre><code>var directive = element(by.model('data.person'));

// Assuming the inputs have attributes like `ng-model="firstname"` in the directive template
var firstnameInput = directive.element(by.model('firstname'));
var lastnameInput = directive.element(by.model('lastname'));
var usernameInput = directive.element(by.model('surnamname'));
</code></pre>

and then on each call <code>sendKeys</code>

<pre><code>firstnameInput.sendKeys('Peter');
secondnameInput.sendKeys('Piper');
usernameInput.sendKeys('PickledPumpernickle');
</code></pre>

If you're not using <code>ng-model</code> in the directive template, you can use other locators to find the sub elements, together with <code>get</code> if needs be, and depend on the order they're in the DOM

<pre><code>var inputs = directive.element(by.css('input'));
var firstnameInput = inputs.get(0);
var secondnameInput = inputs.get(1);
var usernameInput = inputs.get(2);
</code></pre>

However, I suspect none of the above will work if you have <code>replace: true</code> specified in the directive, as it depends on the original element, with the <code>ng-model</code> attribute, being in the DOM.

blocks|key|4512540|text|有了几个helper函数，你就可以很容易地做到这一点。helper对象只是包装了量角器，并使其更加合理和安全。尤其是在远程系统上运行时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4512541|var+helper+=+{
++getElement:+function+(selector)+{
++++return+element(by.css(selector));
++},

++resolveSelector:+function+(selector)+{
++++var+el;
++++if+(typeof+selector+===+'string')+{
++++++el+=+self.getElement(selector);
++++}+else+{
++++++el+=+selector;
++++}
++++return+el;
++},

++waitForElementClickable:+function+(selector)+{
++++var+el+=+self.resolveSelector(selector);
++++var+condition+=+function+()+{
++++++return+self.waitForElement(el).then(function+()+{
++++++++return+self.isElementEnabled(el);
++++++});
++++};
++++return+self.wait(condition,+15000,+'Element+not+clickable.+('+%2B+selector+%2B+')');
++},

++setElementValue:+function+(selector,+value)+{
++++var+el+=+self.resolveSelector(selector);
++++return+self.waitForElementClickable(el).then(function+()+{
++++++el.click().clear().sendKeys(value);
++++});
++},

++getElementValue:+function+(selector)+{
++++var+el+=+self.resolveSelector(selector);
++++return+el+?+el.getAttribute('value')+:+'';
++}

}|code-block|syntax|javascript|4512542|然后你可以使用常规的CSS选择器来设置你的值：|4512543|helper.setElementValue('[ng-model="data.person"]+input:nth-child(1)',+'1st+Input+Value');
helper.setElementValue('[ng-model="data.person"]+input:nth-child(2)',+'2nd+Input+Value');
helper.setElementValue('[ng-model="data.person"]+input:nth-child(3)',+'3rd+Input+Value');|4512544|您可以使用如下代码检查期望值：|4512545|expect(helper.getElementValue('[ng-model="data.person"]+input:nth-child(1)')).toEqual('something')|4512546|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

With a few helper function you could do it rather easily. The helper object just wraps protractor and makes it a little more sane and safe to use. Especially when running on remote systems.

<pre><code>var helper = {
 getElement: function (selector) {
 return element(by.css(selector));
 },

 resolveSelector: function (selector) {
 var el;
 if (typeof selector === 'string') {
 el = self.getElement(selector);
 } else {
 el = selector;
 }
 return el;
 },

 waitForElementClickable: function (selector) {
 var el = self.resolveSelector(selector);
 var condition = function () {
 return self.waitForElement(el).then(function () {
 return self.isElementEnabled(el);
 });
 };
 return self.wait(condition, 15000, 'Element not clickable. (' + selector + ')');
 },

 setElementValue: function (selector, value) {
 var el = self.resolveSelector(selector);
 return self.waitForElementClickable(el).then(function () {
 el.click().clear().sendKeys(value);
 });
 },

 getElementValue: function (selector) {
 var el = self.resolveSelector(selector);
 return el ? el.getAttribute('value') : '';
 }

}
</code></pre>

Then you can just use regular CSS selectors to set your values:

<pre><code>helper.setElementValue('[ng-model="data.person"] input:nth-child(1)', '1st Input Value');
helper.setElementValue('[ng-model="data.person"] input:nth-child(2)', '2nd Input Value');
helper.setElementValue('[ng-model="data.person"] input:nth-child(3)', '3rd Input Value');
</code></pre>

And you can check for expected values with something like this:

<pre><code>expect(helper.getElementValue('[ng-model="data.person"] input:nth-child(1)')).toEqual('something')
</code></pre>

blocks|key|4512585|text|这正是evaluate方法的用途：http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4512586|element(by.model('data.person')).evaluate('data.person.firstname+=+"yourvaluehere"');|code-block|syntax|javascript|4512587|我假设通过“以模型为目标”，您希望更改控制器的值并让ng-model指令更新视图，而不是相反。|4512588|entityMap|0|LINK|mutability|MUTABLE|url|http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate^0|H|27|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

This is exactly what the evaluate method is for: <a href="http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate">http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate</a>

<pre><code>element(by.model('data.person')).evaluate('data.person.firstname = "yourvaluehere"');
</code></pre>

I assume by "targeting the model" you want to change the controller's value and have the ng-model directive update the view, rather than the other way around.

Consider the following view model:

<pre><code>$scope.data = {};
$scope.data.person = {};
$scope.data.person.firstname = "";
$scope.data.person.lastname = "";
$scope.data.person.username = "";
</code></pre>

and the following element directive:

<pre><code>&lt;custom-form-directive ng-model="data.person"&gt;&lt;/custom-form-directive&gt;
</code></pre>

which contains three input tags to display the data. How do I use protractor to populate the input fields by targeting <code>ng-model="data.person"</code>?

Targeting elements within an element directive with Protractor

考虑以下视图模型：$scope.data = {};$scope.data.person = {};$scope.data.person.firstname = "";$scope.data.person.lastname = "";$scope.data.person.username = "";和以下元素指令：<c...

问使用量角器定位元素指令中的元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用量角器定位元素指令中的元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用量角器定位元素指令中的元素
EN