第二个下拉列表没有填满赛普拉斯答案

【问题标题】：Second drop down list does not get filled with Cypress第二个下拉列表没有填满赛普拉斯
【发布时间】：2020-04-01 18:55:48
【问题描述】：

我遇到了问题。谁能帮帮我？

所以，我有两个下拉列表，第二个取决于我在第一个上选择的选项。

例如：第一个下拉列表有“数字”和“字母”选项，而第二个下拉列表默认为空。但是，当我在第一个下拉列表中选择“字母”选项时，第二个下拉列表中会填充“A”、“B”和“C”选项。手动，它工作正常，但是当我用赛普拉斯选择第一个下拉列表时，第二个没有被填充。它仍然是空的，所以我不能在上面选择任何东西。

HTML：

<select id="list" class="selectpicker form-control" onchange=""><option value="0">select your preferences</option><option value="2">numbers</option><option value="3">letters</option></select>

柏树： cy.get('#list').select('字母')

它确实选择了选项字母，我可以看到第一个下拉列表中选择的选项字母，但第二个没有任何反应。

【问题讨论】：

我认为您应该从“未更新”下拉列表中“强制”刷新数据。尝试“点击（）”它。也许这个链接可以帮助你stackoverflow.com/questions/48362422/…
当我尝试使用 click() 时，cypress 返回错误：CypressError: cy.click() cannot be called on a
我按照您提到的其他主题的说明进行操作，我从没想过它会起作用，但它确实起作用了！！！！！！我必须在两个下拉列表中的每一个中包含这些代码行： cy.get('#list').contains('letters').then(option => { // 确认选项正确 cy.wrap( option).contains('letters'); option[0].click(); // 点击后，mdc-select 应该保存被选选项的文本 cy.get('#list').contains('letters' ); });
您显示onChange=""，但必须有一个事件链接这两个选择。选择后试试cy.get('#list').trigger('change')。
@GabrielCostaFinkel 我会把我的答案写成一个正常的答案，所以你可以批准它是每个遇到同样问题的人的答案。我将使用您的代码示例使其更简单:)

标签： cypress

【解决方案1】：

解决方案似乎是强制点击，因为据我所知，赛普拉斯选择了该选项，但它没有点击该选项！这是一个错误吗？

所以，这是必要的巨人，最终让它发挥作用：

//choose the option on the first drop down
    cy.get('#list').select('letters')
    cy.get('#list').contains('letters').then(option => {
        cy.wrap(option).contains('letters');
        option[0].click();
        cy.get('#list').contains('letters');
      });

//choose the option on the second drop down
    cy.get('#list2').select('A')
    cy.get('#list2').contains('A').then(option => {
        cy.wrap(option).contains('A');
        option[0].click();
        cy.get('#list2').contains('A');
      });

//click on the button to save the options selected
    cy.get('.saveButton').click()

通常情况下，应该只是：

    cy.get('#list').select('letters')
    cy.get('#list2').select('A')
    cy.get('.saveButton').click()

你们认为这是一个错误吗？

【讨论】：

我没有看到您已经自己评论了答案。而且我不认为这是一个错误......这是我在其他 JS 框架中看到的行为。

【解决方案2】：

我认为您应该从“未更新”下拉菜单中“强制”刷新数据。尝试“点击（）”它。

类似这样的：

cy.get('#list')
  .contains('letters')
  .then(option => { // Confirm have correct option 
    cy.wrap(option).contains('letters'); 
    option[0].click(); // After click, mdc-select should hold the text of the 
                      // selected option: cy.get('#list').contains('letters'); 
  });

也许这个链接可以帮助你：select dropdownlist item using cypress

【讨论】：

【解决方案3】：

您也可以按值选择cypress docs

cy.get('#list').select('3')

【讨论】：

是的，我试过了，但结果是一样的。它不会填充第二个下拉列表。知道为什么吗？
现在我想知道您要单击的元素是否可见 cy.get('#list').select('3').should('be.visible') 并且有趣的是您在 cypress runner 中是否有任何错误消息？还是只是没有被选中？
没有错误。甚至你现在提到的 be.visible 也变成了绿色。一切似乎都很完美，但第二个下拉菜单没有加载任何内容。如果我手动选择，它可以完美运行，但如果它的柏树选择选项 3，则不会加载任何内容！顺便说一句，如果我使用 cypress 侧边栏返回前面的步骤，第一个下拉菜单总是在“选择您的偏好”上，我在“字母”上看不到它。但是，当测试运行时，我可以看到 cypress 选择了“字母”选项。
@GabrielCostaFinkel 您找到解决问题的方法了吗？我正面临确切的问题，但还没有解决方案。