我需要使用cypress测试angularjs应用程序的下拉列表。
我需要点击一个下拉菜单，然后从下拉列表中选择或点击一个项目。我尝试如下，它适用于一个实例但不适用于其他时间，因为第二个get（）方法中的id号随着动态生成而不断变化。这不是带有html选项的标准选择。
1）无论如何，我可以在每个选项上设置一个唯一的属性，只需选择所需的属性，或者我可以根据列表项的描述进行选择吗？我怎么能这样做？
2）以下正确的测试方法是下拉列表吗？我相信还有比这更好的方法吗？
请任何人帮忙
cy.get('[name="countries"]').click().get.('[id="selection_option_375"]').click()
DOM
<md-select ng-model="target.countryType" name="countries" ng-required="requiredData.AssertRequiredFields" ng-change="oncountryTypeChanged($event)"
md-container-class="large" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" tabindex="0" aria-disabled="false"
role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_297" aria-owns="select_container_298" aria-required="true"
required="required" aria-invalid="true" aria-label="country type" style=""><md-select-value class="md-select-value md-select-placeholder"
id="select_value_label_288">
<span>country type</span><span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>
<div class="md-select-menu-container large" aria-hidden="true" id="select_container_298"><md-select-menu class="_md"><md-content class="_md md-no-flicker">
<!-- ngRepeat: countryType in refData.countryDetails.countryType.Items --><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_369" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country one
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_370" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country two
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_371" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country three
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_372" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country four
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_373" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country five
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_374" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country six
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_375" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country seven
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_376" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country eight
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_377" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country nine
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_378" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country ten
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_379" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country eleven
</div></md-option><!-- end ngRepeat: countryType in refData.countryDetails.countryType.Items -->
</md-content></md-select-menu></div>
</md-select>
答案 0 :(得分：4)
Material Design Select and Cypress
这是与Access element whose parent is hidden - cypress.io相同的基本问题，除了这个问题是angularjs + md-select，那个问题是angular + mdc-select。
尽管如此，材质设计选择的两个版本使用了相同的技巧，即在单击它以打开选项后，使父控件不可见（通过将宽度和高度设置为0）。
cypress 不允许点击选项，因为它认为选项不可见，因为父级是不可见的。
解决方法是使用.then()来访问未展开的列表项，然后使用 jquery 点击选择它而不是 cypress 点击。
我在Angular 5设置上测试了它，并且由于问题的相似性，它希望它可以与AngularJS设置一起使用。
AngularJS with md-select
describe('Testing material design select', function() {
it('selects an option by click sequence (fails due to visibility issue)', function() {
const doc = cy.visit('http://localhost:4200');
cy.get('[name="countries"]').click();
cy.get('md-option').contains('Country seven').click();
});
it('selects an option by click sequence', function() {
const doc = cy.visit('http://localhost:4200')
cy.get('[name="countries"]').click()
cy.get('md-option').contains('Country seven').then(option => {
// Confirm have correct option
cy.wrap(option).contains('Country seven');
option[0].click(); // this is jquery click() not cypress click()
// After click, md-select should hold the text of the selected option
cy.get('[name="countries"]').contains('Country seven')
});
});
});
Angular 2+ with mdc-select
describe('Testing material design select', function() {
it('selects an option by click sequence (fails due to visibility issue)', function() {
const doc = cy.visit('http://localhost:4200');
cy.get('[name="countries"]').click();
cy.get('mdc-select-item').contains('Country seven').click();
});
it('selects an option by click sequence', function() {
const doc = cy.visit('http://localhost:4200')
cy.get('[name="countries"]').click()
cy.get('mdc-select-item').contains('Country seven').then(option => {
// Confirm have correct option
cy.wrap(option).contains('Country seven');
option[0].click();
// After click, mdc-select should hold the text of the selected option
cy.get('[name="countries"]').contains('Country seven');
});
});
});
答案 1 :(得分：0)
触发“ mousemove”为我解决了此问题。
cy.get('[name="countries"]').click()
cy.get.('[id="selection_option_375"]').trigger('mousemove').click()
答案 2 :(得分：0)
对于使用材质下拉菜单的Angular：
cy.get('mat-select').contains('CA').click({ force: true })
答案 3 :(得分：0)
这对我有用：
#include <stdlib.h>
#include <iostream>
class Base
{
public:
Base(int val) : val_b(val)
{
std::cout << "Base::CTOR" << std::endl;
}
~Base() { }
int val_b;
};
class Derived : public Base
{
public:
Derived(int *, int);
~Derived() { }
int val_d;
void print(void)
{
std::cout << "Base:\t" << val_b << std::endl;
std::cout << "Derived:" << val_d << std::endl;
}
};
Derived::Derived(int *val1, int val2) : Base(val1 ? *val1 : -1), val_d(val2)
{
if (!val1)
{
throw std::invalid_argument("bad pointer");
}
}
int main()
{
int *a = NULL;
int b = 43;
try
{
Derived *d = new Derived(a, b);
d->print();
}
catch (std::exception &e)
{
std::cout << "Exception: " << e.what() << std::endl;
}
return 0;
}
答案 4 :(得分：0)
如果以上解决方案均不能解决问题，特别是对于角度而言，请尝试以下操作：
cy.get({selectlocator}).find("option:contains('text')").then($el =>
$el.get(0).setAttribute("selected", "selected")
).parent().trigger("change")