reactjs - 端到端测试材料-UI Select with Puppeteer

Question

我无法访问<MenuItem>Material-UISelect组件下拉列表中的下拉值 ( )。

基本上，我想要完成的是，点击输入id='x'，等待下拉菜单显示（div使用uland li，每个 li 都有id='y'道具），选择特定的，然后点击它。

下拉列表与过滤器有关...

注意：使用本机选择不是一个选项。

标签： reactjsmaterial-uipuppeteer

Answer 1

您需要先触发 mousedown，然后单击 Material Select 元素上的事件。您可以在 Puppeteer 代码中使用以下函数。

const MaterialSelect = async (page, newSelectedValue, cssSelector) => {
    await page.evaluate((newSelectedValue, cssSelector) => {
        var clickEvent = document.createEvent('MouseEvents');
        clickEvent.initEvent("mousedown", true, true);
        var selectNode = document.querySelector(cssSelector);
        selectNode.dispatchEvent(clickEvent);
        [...document.querySelectorAll('li')].filter(el => el.innerText == newSelectedValue)[0].click();
    }, newSelectedValue, cssSelector);
}

用法示例：“demo-simple-select”是我分配给material-ui Select的id

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://my-app-site/page');
    await MaterialSelect(page, 'new selected value', '#demo-simple-select');
})();