E2E测试材料UI选择与木偶

Question

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

基本上，我试图完成的是以下操作，用id='x'点击输入，等待下拉列表出现(div和ul和li，其中每个li都有id='y'道具(，选择特定的一个，然后点击它。

下拉列表与筛选器有关。。。

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

Answer 1

您需要首先触发鼠标向下移动，然后单击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);
}

示例用法："演示简单选择"；是我分配给材料ui的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');
})();

Answer 2

一个简单的例子。

使用期望的木偶师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');