Question

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

基本上，我要完成的工作是，单击带有id='x'的输入，等待下拉列表显示（div和ul和li ，其中每个li都有id='y'道具），选择特定的一个，然后单击它。

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

注意：不能使用本机选择。

Answer 1

您需要先触发鼠标按下，然后单击“材质选择”元素上的事件。您可以在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);
}

用法示例：

(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');
})();

Answer 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');

带有木偶的E2E测试材料-UI选择

2 个答案: