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

Question

我有一个基于聚合物的网络应用程序，我想用Puppeteer进行测试。

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

布局将是：

应用程序> comp1> comp2> target_element

所有的">"都标志着一个新的影子 dom 边界。

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

Answer 1

事实证明，在影子 dom 中选择元素并不容易。 Achim Weimert 展示了一些解决方法，让皮尔斯通过影子 dom 进行选择。他的方法适用于 https://shop.polymer-project.org/app-header：

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。您可以在具有一定时间间隔的循环中检查此元素，或者您应该寻找其他解决方案。