protractor testing on multi select giving 'Element not visible' error - google-chrome

Question

I have the following html code with a multiselect element. On running tests with protractor to select the options, I get the error as 'Element not visible'.
<div id="one" class="class1">
<select id="select1" style="width: 70%;" class="multiselect" multiple="multiple" ng-model="formData.abcqw">
<option value="abc">ABC</option>
<option value="xyz">XYZ</option>
<option value="pqr">PQR</option>
</select>
</div>
protractor code :
browser.actions().
mouseMove(element(by.className("multiselect"))).click().perform();
element(by.model("formData.abcqw")).sendKeys("abc");
Any help is appreciated.

Answer 1

It's pretty much evident from the HTML which you have shared that the <select> tag is an AngularJS element, so we have to induce wait i.e. WebDriverWait as follows for the element to be selectable:
var EC = protractor.ExpectedConditions;
// Waits for the element with id 'select1' to be selected.
browser.wait(EC.elementToBeSelected($('#select1')), 5000);

Answer 2

I also think that it is a wait issue.
Whenever you see this "element not visible error" you can add
browser.sleep(5000);
before the click statement and try again
if that doesn't work try below.
This when we intentionally want to click an hidden element. So this should work
var elm = element(by.className("multiselect "));
browser.executeScript("arguments[0].click();", elm.getWebElement());
browser.sleep(2000);
element(by.model("formData.abcqw")).sendKeys("abc");

Answer 3

Try the following code, I replicated the same in my local and verified the below code it works fine:
var EC = protractor.ExpectedConditions;
var multiSelectElement = element(by.model('formData.abcqw');
browser.wait(EC.visibilityOf(multiSelectElement))).then(function() {
browser.wait(EC.elementToBeClickable(multiSelectElement.element(by.cssContainingText('option', 'ABC'))))).then(function() {
multiSelectElement.element(by.cssContainingText('option', 'ABC')).click();
});
});