Example of selecting an option in ng-select and submitting subsequent post.
.get("ng-select") // get all ng-select elements
.then((selects) => {
let select = selects[0]; // we want just first one
cy.wrap(select) // allows us to click using cypress
.click() // click on the first ng-select
.get("ng-dropdown-panel") // get the opened drop-down panel
.get(".ng-option") // Get all the options in drop-down
.contains("Employee") // Filter for just this text
.then((item) => {
cy.wrap(item).click(); // Click on the option
setInterceptor(/Person/, "POST"); // wait for HTTPResponse
cy.get(".fa-save > path") // click on save button
.click().wait("@Route"); // the post to person is complete
});
});
Sometimes it's confusing decided whether or not to use the native HTML elements or not. In this case; we had to use the ng-select layer because selecting an option was the only possible after clicking the ng-select element. ng-select controlled all state of this control.
This is one negative consequence of using any 3rd party tool (including Angular). Reason: They often usurp native HTML ways of doing things.
Top comments (0)