Cypress - 选择下拉选项不会将预期的项目添加到列表中

Question

我有一个下拉菜单，可以从选项中选择多个项目，这些选项应将所选项目添加到文本/标签/显示字段。仅当用户单击选项外部时，下拉选项才会关闭。否则它会保持原状等待下一个输入（因此，一旦我选择了所有选项，我就会模拟单击下拉列表的标签）。但是，所选项目不会添加到标签/文本字段。

手动单击页面上的项目即可添加它们。仅通过 cypress 它不起作用。在此处输入图像描述正如您在所附图像上看到的，所选项目已添加到上面。这是在网站上手动执行的。

下面是我正在尝试使用的代码。labelField 是保存“权限”标签选择器的变量。userDetails.permission 对象键保存要选择的选项。注意：我尝试过使用 cy.click() 参数，例如超时和 waitforanimation。还使用了.trigger(“点击”)。

cy.wrap(labelField.next()).find('.multiselect__select').click();
cy.wrap(labelField.next()).within(() => {
    userDetails.permission.forEach(($item) => {
        cy.get('.multiselect__element').contains($item).click({ timeout: 2000 });
    });
});
cy.wrap(labelField).click();  // click on label to hide the options after choosing required items. 

Answer 1

您正在使用Vue Multiselect。

\n

我无法准确说出您的代码出了什么问题，因为很多细节隐藏在自定义选择器中，而这些细节在问题中被省略。

\n

测试中缺少的关键可能是循环每一步的断言。

\n

这是一个可运行的示例，其中包含一些要在每次单击（）后检查的断言。\n\xc2\xa0

\n

Cypress.config(\'scrollBehavior\', \'center\')       // put the action in the center \n\n// A custom command just to make the assertion more readable\nCypress.Commands.add(\'eachText\', {prevSubject: true}, ($els) => {\n  return [...$els].map(e => e.innerText)\n})\n\nit(\'tests multiselect\', () => {\n\n  cy.visit(\'https://vue-multiselect.js.org/\')\n\n  // taking the "Tagging" example\n  cy.contains(\'label\', \'Tagging\').next(\'div.multiselect\').within(() => {\n\n    // assert "Javascript" is the only item selected initially\n    cy.get(\'span.multiselect__tag\').eachText()\n      .should(\'deep.eq\', [\'Javascript\'])\n\n    // click an item\n    cy.get(\'div.multiselect__select\').click()\n    cy.contains(\'li.multiselect__element\', \'Open Source\').click()\n\n    // assert the list has two items\n    cy.get(\'span.multiselect__tag\').eachText()\n      .should(\'deep.eq\', [\'Javascript\', \'Open Source\'])\n\n    // click another\n    cy.get(\'div.multiselect__select\').click()\n    cy.contains(\'li.multiselect__element\', \'Vue.js\').click()\n\n    // assert we have three items\n    cy.get(\'span.multiselect__tag\').eachText()\n      .should(\'deep.eq\', [\'Javascript\', \'Open Source\', \'Vue.js\'])\n  })\n})\n

\n

\n