如何为聚合物元素阴影dom元素指定选择器？

bdz 发表于 Dev

我有一个要使用Puppeteer测试的基于Polymer的Web应用程序。

当多个聚合物组件相互嵌入时，编写选择器的合适方法是什么？

布局为：

应用> comp1> comp2> target_element

所有的'>'标志着一个新的阴影dom边界。

如果我想在链的末端测试target_element，那么正确的选择器是什么？

Everettss

事实证明，在shadow dom中选择元素并不容易。Achim Weimert展示了一些变通办法，可以通过阴影dom进行刺穿选择。他的方法适用app-header于https://shop.polymer-project.org/：

const puppeteer = require('puppeteer');

const shadowSelectorFn = (el, selector) => el.shadowRoot.querySelector(selector);

const queryDeep = async (page, ...selectors) => {
    if (!selectors || selectors.length === 0) {
        return;
    }

    const [ firstSelector, ...restSelectors ] = selectors;
    let parentElement = await page.$(firstSelector);
    for (const selector of restSelectors) {
        parentElement = await page.evaluateHandle(shadowSelectorFn, parentElement, selector);
    }

    return parentElement;
};


(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://shop.polymer-project.org/');


    const app = await page.$('shop-app');
    console.log(app);

    // you can not simply wait for element inside shadow dom
    // it's up to you how you detect if this element is ready
    await page.waitFor(2000);

    const header = await queryDeep(
        page,
        'shop-app', 'app-header'
    );
    console.log(header);

    await browser.close();
})();

值得一提的是，没有简单的方法可以检测app-header元素何时准备就绪。您可以按一定的时间间隔循环检查此元素，或者应寻找其他解决方案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。