Hello every one,
I encounter a problem when I try to click on a dropdown, made with Angular. Unfortunately I can not click on it.
I explain, my goal is to click on “Select” in the red dorpdown.
I have try many different combinations in the chorme console. I can not click on it.
I finally try this:
document.querySelector ("# input-profile ng-select")
it return me the DOM object
but when I add: “.click ();”
like this :
document.querySelector ("# input-profile ng-select"). click ();
it return me undefined
Do you have any ideas?
Did you try to get the xpath of that dropdown object?
No i try with the CSS selector, the Xpath is not very stable, because the app is in development
Ahh I see… if its in development why not request for uniqueness of that object? like request to put an Id for that or name. . . .
I have already made the request to add ID, but it fake them a month to process the point
Its worth to try things that you think will might work
Yes, try it on object repo
Orr, see that “role=listbox”?? If you can notice there are only 2 listboxes on your modal window. Try to use that “role=listbox” as your locator, create a new test object I mean. Then try to do this code…
//store those listboxes in a list
java.util.List<WebElement> listbox = WebUiCommonHelper.findWebElements(findTestObject("your_Testobject"), 10)
that code will find the two or more(maybe) listboxes and it will be stored in that array list once
it becomes visible in your website.
//try to print first for you to know that it gets all the visible listbox.
//use the index of your desired listbox
The advantage of that is you dont have to create a new test object for another listbox or drop down, just use its index.
Hope that helps. . .
I think also could be handle in 2 ways:
- Declaring first the object maybe as xpath as: //*[text()=‘Sélectionner’] and try clicking on that object first and check is dropdown is recognize and opens the posible options. if ok ,you can create the options to be clicked also and check.
- Declaring the ng-select component as xpath or cssselector and try any of the 3 posible methods to select values within a select component:
it is like i cannot reach the ng-select element , so i reached the following div inside ng-select element by clicking on it first …and then clicking on the option i want. as an example on other page to test:
the xpath for ‘test/div object’ is: //*[@placeholder=‘No city selected’]/div[@class=‘ui-select-container dropdown open’]
The xpath for ‘Athens’ object is : //div[text()=‘Athens’]
Maybe could be handle in a better way like parameterizing the option you need or creating a keyword also.
Try this in the console:
querySelector("#input-profile ng-select .ng-arrow-wrapper").click()
That should click the down-arrow on the
If it works…
String js = 'querySelector("#input-profile ng-select .ng-arrow-wrapper").click();'
Thank you Russ_Thomas,
document.querySelector("#input-profile .ng-select .ng-arrow-wrapper").click()
doesn’t work in the browser console
Can you elaborate on “doesn’t work”?
the chome browser console return :
Uncaught type Error : document.querySelector(…).click is not a VM64415:1 function
Check your spelling of
undefined is correct. The question is: did the dropdown work when the
click() was applied?
no the action to click doesn’t work
Then I’m sorry, I’m out of ideas.
your help, was very good for me thank you very much,Thomas
Does the selector actually return an element in the first place? Does it return the correct element? A lot of times, when no error is thrown, it means that a click did happen, it just didn’t happen on the element you expected.