如何使用剧作家或柏树选择蚂蚁设计选择选项

Posted 2023-03-07

【中文标题】如何使用剧作家或柏树选择蚂蚁设计选择选项

【英文标题】：How to select ant desing select option with playwright or cypress

【发布时间】：2021-09-23 21:15:58

【问题描述】：

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

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

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

我还阅读了有关此问题的所有问题，维护人员/开发人员似乎并不在意，因为他们没有使用此类测试。

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

【问题讨论】：

您是否只在 JS 中寻找答案？ Java 或 Python 没有帮助？

【参考方案1】：

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

该函数将返回<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。

【讨论】：

在我的问题中，我说await click('#option-id') 什么也没做，您只是提供了如何通过索引获取句柄的方法，这不是我遇到的问题。 @SumitLubal 应该很容易提供工作示例。

好的，你能从你的工作中发布一个sn-p吗？

您可以使用ant.design/components/select/#header 并尝试使用您选择的自动化框架选择选项。

我不知道我之前做错了什么，但现在我可以通过常规两次点击毫无问题地选择选项我将上面的答案标记为已接受，谢谢。