量角器：使用 by.deepCss('input') 无法 select 在阴影 DOM（聚合物）内输入元素

Question

环境： Angular（带有 Polymer Web 组件的 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');

如果我尝试直接在 Polymer 组件上调用 .clear 或 .sendKeys，它将失败并返回 "Failed: invalid element state: Element must be user-editable in order to clear it"。基本上我无法调用 .clear 或 .sendKeys 到使用 Polymer 创建的自定义输入元素。

如何通过量角器测试访问阴影 DOM 内的内部输入元素？

谢谢

巴生

Answer 1

只需创建一个新的定位器：

/**
 * 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();

Answer 2

作为快速修复，您可能需要使用如下内容：

async function findShadowDomElement(shadowHostSelector, shadowElementSelector): Promise<WebElement> {
  let shadowHost = browser.findElement(by.css(shadowHostSelector));
  let shadowRoot: any = await browser.executeScript("return arguments[0].shadowRoot", shadowHost);
  return shadowRoot.findElement(by.css(shadowElementSelector));
}

用户可以这样使用这个函数：

let e: WebElement = await findShadowDomElement('ion-toast', '.toast-button');

请注意，您现在拥有的是 WebElement 而不是 ElementFinder！所以你必须使用 WebElement 函数：

expect<any>(await e.isDisplayed()).toBeTruthy();
await e.click();

Answer 3

借助节点模块“query-selector-shadow-dom”，我们可以轻松识别阴影DOM中的Web元素。无需遍历所有影根。使用element(by.shadowDomCss(''))，我们可以指向Shadow Root中任意层级的Web元素。

Answer 4

你可以: 异步扩展使用查询选择器（sRoot，sElement）{ var script="document.querySelector('"+sRoot+"').shadowRoot.querySelector('"+sElement+"')"; 尝试{ return await browser.executeScript("return "+script ); } 赶上（错误）{ 抛出错误； } }

量角器：使用 by.deepCss('input') 无法 select 在阴影 DOM（聚合物）内输入元素

Protractor: Unable select input element inside a shadow DOM (Polymer) using by.deepCss('input')

typescript

polymer

protractor

e2e-testing

angular