DEV Community

John Peters
John Peters

Posted on • Updated on

Cypress and ng-select

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
Enter fullscreen mode Exit fullscreen mode

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)