如何获取动态生成的下拉值的定位器？答案

【问题标题】：How to fetch the locator for the dynamic generated dropdown value?如何获取动态生成的下拉值的定位器？
【发布时间】：2021-09-10 14:31:03
【问题描述】：

我正在编写柏树测试。我可以看到开发人员使用下面的脚本来选择下拉列表。他们没有使用下拉选择选项。他们使用 div 作为下拉菜单。这样您就不会看到脚本中没有显示选项

div class=" css-yk16xz-control">
    <div class=" css-g1d714-ValueContainer">
        <input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>

我在测试中尝试过这个 cy.get(".css-g1d714-ValueContainer").click() 并且它被点击并显示下拉菜单。现在我必须从下拉列表中选择任何值。当我在浏览器中进行检查时，我没有看到任何选项显示在那里。

通过手动，我可以选择任何一个值并单击它，然后我可以看到所选值正在显示在检查浏览器中。

<div class=" css-yk16xz-control">
    <div class=" css-g1d714-ValueContainer">
        <div class=" css-1uccc91-singleValue">Start</div>
        <input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>

我看不到开头本身的“开始”。所以我在cypress中尝试了这两个代码

第一人

cy.get(".css-g1d714-ValueContainer").click()
cy.get(" css-1uccc91-singleValue").invoke("Start")

这也没用

第二个

cy.get(".css-g1d714-ValueContainer").next(" css-1uccc91-singleValue","Start")

这也没用。

我想知道如何编写用于选择下拉值的定位器？

【问题讨论】：

文本“开始”是否出现在下拉菜单中，您要选择它吗？
是的，我在下拉列表 Start、End、Middle 中有三个值。我想选择开始作为测试的一部分。

标签： javascript cypress

【解决方案1】：

一旦下拉菜单处于打开状态，您可以直接使用.contains() 选择选项。添加{matchCase: false} 禁用区分大小写检查。

cy.get('.css-g1d714-ValueContainer').trigger("mousedown")
cy.get('.css-g1d714-ValueContainer').trigger("mouseup")
cy.contains('Start', { matchCase: false, timeout: 6000 }).click()

【讨论】：

感谢您的回答。我可以看到测试没有失败，但选择框中没有显示“开始”。它只是去并单击框并找到“开始”。有什么办法可以在选择框中显示“开始”
如果你用.trigger("mousedown")和.trigger("mouseup")代替click怎么样？
是的，谢谢 Alapan Das。触发器对我有用。