这与隐藏了其父元素的Access元素cypress.io相同,是基本问题,不同的是这个问题是angularjs + md-select,这个问题是angular +mdc-select。
但是,两个版本的 使用相同的技巧,在单击父控件以打开选项后,使父控件不可见(通过将width和height设置为0)。
不允许单击选项,因为它认为选项是不可见的,因为父级是不可见的。
解决方法是使用.then()
来访问未包装的列表项,并使用 单击选择它而不是 单击。
我已经在Angular 5设置上对其进行了测试,并且由于问题的相似性,预计它可以与AngularJS设置一起使用。
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')
});
});
});
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');
});
});
});