Angularjs 使用cypress选择dropdownlist项

我需要使用cypress测试angularjs应用程序的下拉列表

我需要点击一个下拉列表，从下拉列表中选择或点击一个项目。我尝试了下面的方法，这在一个实例中有效，但在另一个实例中无效，因为第二个get（）方法中的id号会随着其动态生成而不断变化。这不是html中的标准选择选项

1） 我是否可以在每个选项上设置一个唯一的属性，然后只选择所需的属性，或者根据列表项的描述进行选择？我该怎么做

2） 以下是测试下拉列表的正确方法吗？我相信还有比这更好的办法吗

有人能帮忙吗

cy.get('[name="countries"]').click().get.('[id="selection_option_375"]').click()

多姆

国家类型
国家一
国家二
国家三
国家四
国家五
国家六
国家七
国家八
第九个国家
国家十
十一国

材料设计选择和Cypress

这是与相同的基本问题，除了这个问题是angularjs+md select，这个问题是angularjs+mdc select

但是，两个版本的“材质设计选择”（material design select）在单击父控件以打开选项后，使用相同的技巧使其不可见（通过将宽度和高度设置为0）

cypress将不允许单击选项，因为它认为选项不可见，因为父项不可见

解决方法是使用

.then（）

访问未包装的列表项，并使用jquery单击以选择它，而不是使用cypress单击

我已经在Angular5设置上测试了它，由于问题的相似性，我希望它能与AngularJS设置一起工作

带md选择的AngularJS

描述（'测试材料设计选择'，功能（）{
它（'通过单击顺序选择选项（由于可见性问题而失败）'，函数（）{
const doc=cy.visit（'http://localhost:4200');
cy.get（'[name=“countries”]'）。单击（）；
cy.get（'md-option'）。包含（'Country seven'）。单击（）；
});
它（'通过单击顺序选择选项'，函数（）{
const doc=cy.visit（'http://localhost:4200')
cy.get（'[name=“countries”]'）。单击（）
cy.get（'md-option'）。包含（'Country seven'）。然后（option=>{
//确认有正确的选项
cy.wrap（选项）。包含（'Country seven'）；
选项[0]。单击（）；//这是jquery单击（）而不是cypress单击（）
//单击后，md select应保留所选选项的文本
cy.get（'[name=“countries”]'）。包含（'Country seven'）
});
});
});

带mdc选择的角度2+

描述（'测试材料设计选择'，功能（）{
它（'通过单击顺序选择选项（由于可见性问题而失败）'，函数（）{
const doc=cy.visit（'http://localhost:4200');
cy.get（'[name=“countries”]'）。单击（）；
cy.get（'mdc-select-item'）。包含（'Country seven'）。单击（）；
});
它（'通过单击顺序选择选项'，函数（）{
const doc=cy.visit（'http://localhost:4200')
cy.get（'[name=“countries”]'）。单击（）
cy.get（'mdc-select-item'）。包含（'Country seven'）。然后（选项=>{
//确认有正确的选项
cy.wrap（选项）。包含（'Country seven'）；
选项[0]。单击（）；
//单击后，mdc select应保存所选选项的文本
cy.get（'[name=“countries”]'）。包含（'Country seven'）；
});
});
});

触发“mousemove”为我解决了这个问题

cy.get('[name="countries"]').click()
cy.get.('[id="selection_option_375"]').trigger('mousemove').click()

---

对于“使用材质的角度”下拉列表：

cy.get('mat-select').contains('CA').click({ force: true })

这对我很有用：

cy.get(this.dropdownlocactor).contains(optiontext)
  .then(element => {
    var text = element.text();
    cy.get(this.dropdownlocator).select(text);
});

---

如果上述解决方案都不适用于angular，请尝试以下方法：

cy.get({selectlocator}).find("option:contains('text')").then($el =>
   $el.get(0).setAttribute("selected", "selected")
).parent().trigger("change")

---

此外，您可以参考此链接

这不是html中的标准选项选择

-您可以显示DOM的外观吗？这不起作用。首先，有118个md选项的结果，我想这是考虑到了页面上的所有md选项。它没有选择所需的项目。其次，它正在超时重试cy.click（），因为该元素不可见。还有另一个下拉列表，它根据第一个列表中的项目选择自动生成，该下拉列表不可见，因为父级具有css属性：display:none。我尝试了force:true，但对于第一点，它不起作用，我的目标是

.get（'md-option'）

拾取选项的wole数组，但是

.contains（'Country seven'）

仅选择包含文本的选项。正常情况下，这应该是可行的（我认为），但第二个问题却使它受到了冲击。关于第二个问题，请参阅-

mdc select

，这个问题有一个问题。由于您的是

md select

我希望这不是同一个问题，但由于您提到了可见性，这可能是同一个根本原因。明天我将把答案扩展到可见性问题。只是想澄清一下，是第二次单击失败了吗？是的，是第二次单击失败了。第一次单击在其中显示项目，但没有选择所需的项目，因此工作正常。我是否可以进入特定的代码块并选择

cy.get({selectlocator}).find("option:contains('text')").then($el =>
   $el.get(0).setAttribute("selected", "selected")
).parent().trigger("change")