reactjs - E2E测试 Material -UI Select with Puppeteer

Question

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

基本上，我想要完成的任务如下，点击 id='x' 输入，等待下拉列表显示( div 与 ul 和 li ，其中每个 li 都有 id='y' 属性)，选择特定的一个，然后单击它。

下拉菜单与过滤器有关...

注意:使用 native 选择不是一个选项。

Answer 1

您需要先触发Material Select 元素上的mousedown 事件，然后再触发click 事件。您可以在 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');
})();