端到端测试材料-UI Select with Puppeteer答案

【问题标题】：E2E Testing Material-UI Select with Puppeteer端到端测试材料-UI Select with Puppeteer
【发布时间】：2020-03-31 11:47:04
【问题描述】：

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

基本上，我想要完成的是，点击输入id='x'，等待下拉列表出现（div 和ul 和li，每个li 都有id='y'道具），选择特定的，然后单击它。

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

注意：不能使用原生选择。

【问题讨论】：

标签： reactjs material-ui puppeteer

【解决方案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');
})();

【讨论】：

对于cssSelector，#demo-simple-select是不是你分配给material-ui Select的id？例如
对，就是我分配给material-ui Select的id

【解决方案2】：

一个简单的。

使用expect-puppeteer npm 包获取onClick 方法。

然后声明：

export const MaterialSelect = async (page, cssSelector, newSelectedValue) => {
    await expect(page).toClick(cssSelector);
    await expect(page).toClick(`li[data-value="${newSelectedValue}"]`);
}

并像这样使用它：

 await MaterialSelect(page, '#demo-simple-select', 'new selected value');

【讨论】：