📅  最后修改于: 2020-12-06 10:24:13             🧑  作者: Mango
在本章中,让我们学习更多分度器的核心API。
元素是量角器暴露的全局功能之一。此函数使用定位器并返回以下内容-
上述两种支持链方法如下所述。
以下是ElementArrayFinder的功能-
element.all(locator).clone
顾名思义,此函数将创建元素数组的浅表副本,即ElementArrayFinder。
element.all(定位器).all(定位器)
此函数基本上返回一个新的ElementArrayFinder,该元素可以为空或包含子元素。可用于选择多个元素作为数组,如下所示
例
element.all(locator).all(locator)
elementArr.all(by.css(‘.childselector’));
// it will return another ElementFindArray as child element based on child locator.
element.all(定位器).filter(filterFn)
顾名思义,将滤镜函数应用于ElementArrayFinder中的每个元素之后,它将返回一个新的ElementArrayFinder,其中包含所有通过滤镜函数的元素。它基本上有两个参数,第一个是ElementFinder,第二个是索引。也可以在页面对象中使用。
例
视图
- First
- Second
- Third
码
element.all(by.css('.items li')).filter(function(elem, index) {
return elem.getText().then(function(text) {
return text === 'Third';
});
}).first().click();
element.all(定位符).get(索引)
借助于此,我们可以按索引在ElementArrayFinder中获取一个元素。请注意,索引从0开始,负索引被换行。
例
视图
- First
- Second
- Third
码
let list = element.all(by.css('.items li'));
expect(list.get(0).getText()).toBe('First');
expect(list.get(1).getText()).toBe('Second');
element.all(locator).first()
顾名思义,这将获得ElementArrayFinder的第一个元素。它不会检索基础元素。
例
视图
- First
- Second
- Third
码
let first = element.all(by.css('.items li')).first();
expect(first.getText()).toBe('First');
element.all(locator).last()
顾名思义,这将获得ElementArrayFinder的最后一个元素。它不会检索基础元素。
例
视图
- First
- Second
- Third
码
let first = element.all(by.css('.items li')).last();
expect(last.getText()).toBe('Third');
element.all(定位器).all(选择器)
当对$$的调用可能被链接时,它用于查找父对象中的元素数组。
例
视图
- First
- Second
- Third
码
let items = element(by.css('.parent')).$$('li');
element.all(locator).count()
顾名思义,这将计算ElementArrayFinder表示的元素数量。它不会检索基础元素。
例
视图
- First
- Second
- Third
码
let list = element.all(by.css('.items li'));
expect(list.count()).toBe(3);
element.all(locator).isPresent()
它将使元素与查找器匹配。它可以返回true或false。如果存在与查找程序匹配的任何元素,则为True,否则为False。
例
expect($('.item').isPresent()).toBeTruthy();
element.all(locator).locator
顾名思义,它将返回最相关的定位器。
例
$('#ID1').locator();
// returns by.css('#ID1')
$('#ID1').$('#ID2').locator();
// returns by.css('#ID2')
$$('#ID1').filter(filterFn).get(0).click().locator();
// returns by.css('#ID1')
element.all(定位符).then(thenFunction)
它将检索ElementArrayFinder表示的元素。
例
视图
- First
- Second
- Third
码
element.all(by.css('.items li')).then(function(arr) {
expect(arr.length).toEqual(3);
});
element.all(locator).each(eachFunction)
顾名思义,它将在由ElementArrayFinder表示的每个ElementFinder上调用输入函数。
例
视图
- First
- Second
- Third
码
element.all(by.css('.items li')).each(function(element, index) {
// It will print First 0, Second 1 and Third 2.
element.getText().then(function (text) {
console.log(index, text);
});
});
element.all(定位器).map(mapFunction)
顾名思义,它将在ElementArrayFinder中的每个元素上应用映射函数。它有两个参数。第一个是ElementFinder,第二个是索引。
例
视图
- First
- Second
- Third
码
let items = element.all(by.css('.items li')).map(function(elm, index) {
return {
index: index,
text: elm.getText(),
class: elm.getAttribute('class')
};
});
expect(items).toEqual([
{index: 0, text: 'First', class: 'one'},
{index: 1, text: 'Second', class: 'two'},
{index: 2, text: 'Third', class: 'three'}
]);
element.all(定位符).reduce(reduceFn)
顾名思义,它将对累加器和使用定位器找到的每个元素应用reduce函数。此函数会将每个元素缩减为一个值。
例
视图
- First
- Second
- Third
码
let value = element.all(by.css('.items li')).reduce(function(acc, elem) {
return elem.getText().then(function(text) {
return acc + text + ' ';
});
}, '');
expect(value).toEqual('First Second Third ');
element.all(locator).evaluate
顾名思义,它将评估输入是否在当前基础元素的范围内。
例
视图
{{letiableInScope}}
码
let value =
element.all(by.css('.foo')).evaluate('letiableInScope');
element.all(locator).allowAnimations
顾名思义,它将确定是否允许在当前基础元素上播放动画。
例
element(by.css('body')).allowAnimations(false);
ElementFinder的链接功能及其描述-
element(locator).clone
顾名思义,此函数将创建ElementFinder的浅表副本。
element(locator).getWebElement()
它将返回此ElementFinder表示的WebElement,如果该元素不存在,则将引发WebDriver错误。
例
视图
some text
码
// All the four following expressions are equivalent.
$('.parent').getWebElement();
element(by.css('.parent')).getWebElement();
browser.driver.findElement(by.css('.parent'));
browser.findElement(by.css('.parent'));
element(locator).all(locator)
它将在父级中找到一组元素。
例
视图
- First
- Second
- Third
码
let items = element(by.css('.parent')).all(by.tagName('li'));
element(定位符).element(定位符)
它将在父级中找到元素。
例
视图
Child text
{{person.phone}}
码
// Calls Chain 2 element.
let child = element(by.css('.parent')).
element(by.css('.child'));
expect(child.getText()).toBe('Child text\n981-000-568');
// Calls Chain 3 element.
let triple = element(by.css('.parent')).
element(by.css('.child')).
element(by.binding('person.phone'));
expect(triple.getText()).toBe('981-000-568');
element(locator).all(selector)
当对$$的调用可能被链接时,它将在父对象中找到一个元素数组。
例
视图
- First
- Second
- Third
码
let items = element(by.css('.parent')).$$('li'));
element(定位符)。$(定位符)
当对$的调用可能被链接时,它将在父级中找到元素。
例
视图
Child text
{{person.phone}}
码
// Calls Chain 2 element.
let child = element(by.css('.parent')).
$('.child'));
expect(child.getText()).toBe('Child text\n981-000-568');
// Calls Chain 3 element.
let triple = element(by.css('.parent')).
$('.child')).
element(by.binding('person.phone'));
expect(triple.getText()).toBe('981-000-568');
element(locator).isPresent()
它将确定元素是否显示在页面上。
例
视图
{{person.name}}
码
expect(element(by.binding('person.name')).isPresent()).toBe(true);
// will check for the existence of element
expect(element(by.binding('notPresent')).isPresent()).toBe(false);
// will check for the non-existence of element
element(locator).isElementPresent()
与element(locator).isPresent()相同。唯一的区别是它将检查子定位器标识的元素是否存在,而不是当前的元素查找器。
element.all(locator).evaluate
顾名思义,它将评估输入是否在当前基础元素的范围内。
例
视图
{{letiableInScope}}
码
let value = element(by.id('.foo')).evaluate('letiableInScope');
element(locator).allowAnimations
顾名思义,它将确定是否允许在当前基础元素上播放动画。
例
element(by.css('body')).allowAnimations(false);
element(locator).equals
顾名思义,它将比较元素是否相等。
它基本上是元素定位器策略的集合,提供了通过绑定,模型等在Angular应用程序中查找元素的方法。
功能及其说明
ProtractorLocators API的功能如下-
by.addLocator(locatorName,fuctionOrScript)
它将向此ProtrcatorBy实例添加一个定位器,该定位器还可以与element(by.locatorName(args))一起使用。
例
视图
码
// Adding the custom locator.
by.addLocator('buttonTextSimple', function(buttonText, opt_parentElement, opt_rootSelector) {
var using = opt_parentElement || document,
buttons = using.querySelectorAll('button');
return Array.prototype.filter.call(buttons, function(button) {
return button.textContent === buttonText;
});
});
element(by.buttonTextSimple('Go!')).click();// Using the custom locator.
绑定
顾名思义,它将通过文本绑定找到一个元素。将进行部分匹配,以便返回绑定到包含输入字符串的变量的任何元素。
例
视图
{{person.name}}
码
var span1 = element(by.binding('person.name'));
expect(span1.getText()).toBe('Foo');
var span2 = element(by.binding('person.email'));
expect(span2.getText()).toBe('foo@bar.com');
精确绑定
顾名思义,它将通过精确绑定找到一个元素。
例
视图
码
expect(element(by.exactBinding('person.name')).isPresent()).toBe(true);
expect(element(by.exactBinding('person-email')).isPresent()).toBe(true);
expect(element(by.exactBinding('person')).isPresent()).toBe(false);
expect(element(by.exactBinding('person_phone')).isPresent()).toBe(true);
expect(element(by.exactBinding('person_phone|uppercase')).isPresent()).toBe(true);
expect(element(by.exactBinding('phone')).isPresent()).toBe(false);
by.model(型号名称)
顾名思义,它将通过ng-model表达式找到一个元素。
例
视图
码
var input = element(by.model('person.name'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('Foo123');
by.buttonText
顾名思义,它将通过文本找到一个按钮。
例
视图
码
element(by.buttonText('Save'));
by.partialButtonText
顾名思义,它将通过部分文本找到一个按钮。
例
视图
码
element(by.partialButtonText('Save'));
中继器
顾名思义,它将在ng-repeat中找到一个元素。
例
视图
{{cat.name}}
{{cat.age}}
<
{{$index}}
{{book.name}}
{{book.blurb}}
码
var secondCat = element(by.repeater('cat in
pets').row(1)); // It will return the DIV for the second cat.
var firstCatName = element(by.repeater('cat in pets').
row(0).column('cat.name')); // It will return the SPAN for the first cat's name.
by.exactRepeater
顾名思义,它将通过精确的中继器找到一个元素。
例
视图
码
expect(element(by.exactRepeater('person in
peopleWithRedHair')).isPresent())
.toBe(true);
expect(element(by.exactRepeater('person in
people')).isPresent()).toBe(false);
expect(element(by.exactRepeater('car in cars')).isPresent()).toBe(true);
by.cssContainingText
顾名思义,它将通过CSS查找包含精确字符串的元素
例
视图
- Dog
- Cat
码
var dog = element(by.cssContainingText('.pet', 'Dog'));
// It will return the li for the dog, but not for the cat.
by.options(optionsDescriptor)
顾名思义,它将通过ng-options表达式找到一个元素。
例
视图
码
var allOptions = element.all(by.options('c for c in colors'));
expect(allOptions.count()).toEqual(2);
var firstOption = allOptions.first();
expect(firstOption.getText()).toEqual('red');
by.deepCSS(选择器)
顾名思义,它将通过CSS选择器在影子DOM中找到一个元素。
例
视图
>
>
码
var spans = element.all(by.deepCss('span'));
expect(spans.count()).toEqual(3);