What is the process for testing an Angular multi-select dropdown using Protractor?

Question

What is the process for testing an Angular multi-select dropdown using Protractor?

Currently, I am utilizing the angular-multi-select dropdown feature available at https://github.com/isteven/angular-multi-select. My next step involves writing test cases in Protractor for this specific functionality.

<div ng-show="!attribute.isMultivalued && page != 'view'" 
     class="select-group" 
     multi-select 
     input-model="typesDataDup"
     output-model="attribute.types"
     button-label="typeName"         
     item-label="typeName" 
     tick-property="ticked" 
     selection-mode="single"
     helper-elements="filter"
     is-disabled = "page == 'view'">
</div>

An issue I'm facing is the inability to send data using the model because the ng-model tag is not specified. Any guidance on how to write a test case for this scenario would be greatly appreciated.

javascript angularjs testing protractor multi-select

Answer 1

Answer №1

To locate the element, you have the option to utilize alternative attributes and employ by.css. For instance:

element(by.css('div.select-group'))

or

element(by.css('div[multi-select]'))

Based on my examination of the angular-multi-select source code, the select options are denoted by button elements. To locate and interact with these buttons, use element.all() to find all buttons within and select the desired one, such as Select All:

element.all(by.css('div[multi-select] button')).then(function(options) {
    options.forEach(function(option) {
        option.getText().then(function(text) {
            if (text.indexOf("Select All") != -1) {
                option.click();
            } 
        });
    });
});

Answer 2

To locate the element, you have the option to utilize alternative attributes and employ by.css. For instance:

element(by.css('div.select-group'))

or

element(by.css('div[multi-select]'))

Based on my examination of the angular-multi-select source code, the select options are denoted by button elements. To locate and interact with these buttons, use element.all() to find all buttons within and select the desired one, such as Select All:

element.all(by.css('div[multi-select] button')).then(function(options) {
    options.forEach(function(option) {
        option.getText().then(function(text) {
            if (text.indexOf("Select All") != -1) {
                option.click();
            } 
        });
    });
});

Answer 3

Answer №2

When trying to solve this issue, I sought help from CSS. By inspecting the element in the browser's developer tools, I was able to find the necessary solution.

element.all(by.buttonText('None selected')).then(function(items) {
   items[1].click();
}); 
element.all(by.model('inputLabel.labelFilter')).then(function(items) {
   items[1].sendKeys(protractor.Key.DOWN+protractor.Key.DOWN);
});
ptor.sleep(200);
element.all(by.css('.multiSelectFocus')).then(function(items) {
   items[0].click();
});

In this code snippet, I am utilizing the DOWN key to select a specific option.

Answer 4

When trying to solve this issue, I sought help from CSS. By inspecting the element in the browser's developer tools, I was able to find the necessary solution.

element.all(by.buttonText('None selected')).then(function(items) {
   items[1].click();
}); 
element.all(by.model('inputLabel.labelFilter')).then(function(items) {
   items[1].sendKeys(protractor.Key.DOWN+protractor.Key.DOWN);
});
ptor.sleep(200);
element.all(by.css('.multiSelectFocus')).then(function(items) {
   items[0].click();
});

In this code snippet, I am utilizing the DOWN key to select a specific option.

What is the process for testing an Angular multi-select dropdown using Protractor?

Answer №1

Answer №2

Similar questions

Discovering the oldest date in an array with JavaScript

Initiate a function once the innerHTML content in Angular has been completely loaded

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Ways to guarantee that a function is executed only once within an object notation

After the page has finished loading, I aim to have the modal window pop up after 10 seconds. Thank you to all!

When utilizing drag and drop in HTML5, the items.webkitGetAsEntry() method is not available

"Upon submitting a post request on my Heroku express app, an unexpected application error

having difficulty preserving the edited HTML document with JSoup and Java

Tips on sending JSON string from Controller action to View and utilizing it as a parameter for a JQuery function

Converting a jQuery DOM element into a string representation

Using jQuery to retrieve the initial object in an array following an Ajax request

Activate function when list item is clicked

Javascript - Issue with Ajax causing additional commas in JSON responses

Tips for using Cypress to confirm that an HTML element's height or width exceeds a specific value

Guide for serving multiple SVG files to a browser using Node.js

The JSON array retrieved from the $http.GET request is coming back as undefined, which is not expected

Self-reference within a JavaScript object involves creating a property that points

Show User Input as a dynamic tool-tip in Highcharts

Displaying PDF files on the internet without allowing them to be downloaded

Serializing ASP.NET WebApi's DateTimeOffset to Json/JavaScript in Angular2