I was trying to select a dropdown value in my app built in Angular. Here are my observations:
There is a select tag present in the dom with options tag underneath that. I tried making use of the select class to select the dropdown options and I was not successful. On inspecting the element, I learned that the element is hidden. Attaching the screenshot of the select element
I tried accessing the element with id "Location_chosen" and the elements beneath that as well ( a, span div, b). However each time I received an error, the element is not clickable at that point and some other element would receive the click.
identifier - css_Selector - #Location_chosen a - Operation -
element.click()
- Error - Message: element click intercepted: Element is not clickable at point (1677, 462)identifier - css_Selector - #Location_chosen a span - Operation -
element.click()
- Error - Message: element click intercepted:Element <span style="border: none;">...</span> is not clickable at point (806, 463). Other element would receive the click: <div class="row display-flex m-l-5 ng-scope ng-enter-prepare" style="font-weight : bold" ng-repeat="formRow in dynamicForm.components ">...</div>
(Session info: chrome=80.0.3987.122) . Now the element that is expected to be clicked in this exception is in a complete different row of the user form. Also, please note that I have used an explicit wait statement for the element to be clickable and no exception was thrown. But, after that element click is not working.