本文介绍了量角器:无法使用BY.Deep Css(&;#39;Input&;#39;)选择阴影DOM(聚合物)内的输入元素。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
环境:ANGLING(带聚合物卷筒纸组件的v5应用程序。用于运行e2e测试的量角器。
Angular CLI: 1.6.4
Node: 6.10.0
Angular: 5.2.0
@angular/cli: 1.6.4
typescript: 2.5.3
下面给出的是我在Chrome中展开的聚合物Web组件阴影根。您可以在此自定义元素中看到输入type = "text"
。我无法使用量角器by.deepCss
访问自定义聚合物组件内部的输入元素。
var polymerFirstName = element(by.className('polyFName'));
var inputs = polymerFirstName.element(by.deepCss('input')); // returns nothing.
我需要访问内部输入元素,以便可以执行如下UI自动化任务。
element(by.deepCss('input')).clear();
element(by.deepCss('input')).sendKeys('Ritchie');
如果我尝试直接在聚合物组件上调用.clear
或.sendKeys
,它将失败,并显示"Failed: invalid element state: Element must be user-editable in order to clear it"
。基本上,我无法对使用聚合物创建的自定义输入元素调用.clear
或.sendKeys
。如何从量角器测试访问阴影DOM中的内部输入元素?
谢谢
Basanth
推荐答案
只需创建一个新定位器:
/**
* Usage:
* O element(by.css_sr('#parentElement #innerElement')) <=> $('#parentElement #innerElement')
* O element(by.css_sr('#parentElement::sr #innerElement')) <=> $('#parentElement').shadowRoot.$('#innerElement')
* O element.all(by.css_sr('#parentElement .inner-element')) <=> $$('#parentElement .inner-element')
* O element.all(by.css_sr('#parentElement::sr .inner-element')) <=> $$('#parentElement').shadowRoot.$$('.inner-element')
* O parentElement.element(by.css_sr('#innerElement')) <=> parentElement.$('#innerElement')
* O parentElement.element(by.css_sr('::sr #innerElement')) <=> parentElement.shadowRoot.$('#innerElement')
* O parentElement.all(by.css_sr('.inner-element')) <=> parentElement.$$('.inner-element')
* O parentElement.all(by.css_sr('::sr .inner-element')) <=> parentElement.shadowRoot.$$('.inner-element')
*/
by.addLocator('css_sr', (cssSelector: string, opt_parentElement, opt_rootSelector) => {
let selectors = cssSelector.split('::sr');
if (selectors.length === 0) {
return [];
}
let shadowDomInUse = (document.head.createShadowRoot || document.head.attachShadow);
let getShadowRoot = (el) => ((el && shadowDomInUse) ? el.shadowRoot : el);
let findAllMatches = (selector: string, targets: any[], firstTry: boolean) => {
let using, i, matches = [];
for (i = 0; i < targets.length; ++i) {
using = (firstTry) ? targets[i] : getShadowRoot(targets[i]);
if (using) {
if (selector === '') {
matches.push(using);
} else {
Array.prototype.push.apply(matches, using.querySelectorAll(selector));
}
}
}
return matches;
};
let matches = findAllMatches(selectors.shift().trim(), [opt_parentElement || document], true);
while (selectors.length > 0 && matches.length > 0) {
matches = findAllMatches(selectors.shift().trim(), matches, false);
}
return matches;
});
有关帮助,请参阅here。
您可以这样称呼它:
inputs = element(by.css_sr('.polyFName::sr input'))
// OR
inputs = polymerFirstName.element(by.css_sr('::sr input')
inputs.clear();
这篇关于量角器:无法使用BY.Deep Css(&;#39;Input&;#39;)选择阴影DOM(聚合物)内的输入元素。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!