我无法访问 Material-UI <MenuItem>
下拉列表中的下拉值 ( Select
)组件。
基本上,我想要完成的任务如下,点击 id='x'
输入,等待下拉列表显示( div
与 ul
和 li
,其中每个 li 都有 id='y'
属性),选择特定的一个,然后单击它。
下拉菜单与过滤器有关...
注意:使用 native 选择不是一个选项。
最佳答案
您需要先触发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');
})();
关于reactjs - E2E测试 Material -UI Select with Puppeteer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60949856/