How to click on a dropdown that uses angular class ng-content?

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?

Hi Jeremie,

Did you try to get the xpath of that dropdown object?

Thanks,

1 Like

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. . . .

1 Like

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 :slight_smile:

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.
println listbox.text.toString()

//to click
//use the index of your desired listbox
listbox[0].click()

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. . . :slight_smile:

2 Likes

thank you, I will try

Hello Jeremie,

I think also could be handle in 2 ways:

  1. 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.
  2. Declaring the ng-select component as xpath or cssselector and try any of the 3 posible methods to select values within a select component:
    WebUI.selectOptionByIndex
    WebUI.selectOptionByLabel
    WebUI.selectOptionByValue
1 Like

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:

WebUI.openBrowser(‘https://valor-software.com/ng2-select/’)
WebUI.delay(3)
WebUI.scrollToElement(findTestObject(‘test/div’), 5)
WebUI.click(findTestObject(‘test/div’))
WebUI.click(findTestObject(‘Object Repository/test/Athens’))

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.

1 Like

@jeremie.pichot

Try this in the console:

querySelector("#input-profile ng-select .ng-arrow-wrapper").click()

That should click the down-arrow on the ng-select element.

If it works…

String js = 'querySelector("#input-profile ng-select .ng-arrow-wrapper").click();'
WebUI.executeJavaScript(js, null)
1 Like

Thank you Russ_Thomas,

But,
document.querySelector("#input-profile .ng-select .ng-arrow-wrapper").click()

doesn’t work in the browser console :frowning:

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 click().

1 Like

Tank you Thomas.
image

The result 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

1 Like

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.

2 Likes