如何 select ant design select option with playwright or cypress

Question

如何使用任何 e2e 自动化框架在 ant design Select 组件中 select 选项？（我将能够将您的解决方案重写给我个人使用的剧作家）

我知道这个问题可能看起来很简单，所以您可能会想提出类似 await click('#option-id') 的建议，我真的希望它能这么简单。我已经尝试了几乎所有方法，从简单的点击、绝对鼠标定位、virtual={false}、调度自定义鼠标和键盘事件、timeouts/hoovers/force 点击的组合以及此列表中列出的所有其他内容，不幸的是没有任何效果。

我相信这个问题只能由在其当前维护的代码中具有此选项的人回答 selection 逻辑，因为该组件不断更新，并且您现在所做的任何假设在更新后都会有所不同年左右。

我也阅读了关于这个问题的每一期，maintainers/developers 似乎不太在意，因为他们没有使用此类测试。

我不想阻止任何人回答，只是为了让您知道我已经尝试过了。

Answer 1

剧作家元素句柄具有 Query All Selector。如果至少有一部分 xpath 保持不变，您可以使用 $$ 选择器。

该函数将 return <Promise<Array<ElementHandle>>> 然后您可以解析并挂接到您要进行的选择的索引。

例如-

const selector = "//div[contains(@attribute, 'selection-options-partial-id-text')]"    
const allSelectionOptions = await page.$$(selector);
await allSelectionOptions[index].click();

假设 Select 下的所有选项在它们的 xpath 中必须有一个公共部分，或者如果已定义，它们的 data-test-id.

如何 select ant design select option with playwright or cypress

How to select ant desing select option with playwright or cypress

reactjs

selenium

ant-design-pro

playwright

e2e