Selecting item from dropdown doesn't kick off angularjs function using Selenium

Question

I am trying to write a test with Selenium that selects an item from 2 dropdowns and then clicks a button. The problem I am running into is that the second dropdown is populated by an angularjs call depending on the item selected from the first dropdown. For some reason the angular call never runs and the second list never gets populated and causes an error. Why does the angularjs call not get executed when the value changes?

Sample of dropdown:

<select id="itemList" style="width:495px;" onchange="angular.element($(this)).scope().itemChanged(this);">
   <option value="item1">Item 1</option>
   <option value="item2">Item 2</option>
   <option value="item3">Item 3</option>
</select>

Selenium code:

SelectElement item = new SelectElement(driver.FindElement(By.Id("itemList")));
item.SelectByText("Item 2");

It properly picks the item from the first dropdown, but for some reason the angular call doesn't run to populate the second dropdown; how can I make that call run?

Answer 1

You can't force this trigger by using selenium if it's not triggered as it should be (after click, select or whatever). You could force it by using some javascript. But I would recommend you to try with click() instead of select .

Answer 2

I was able to solve this by manually triggering the onchange() event that made the call to the angular function after the first dropdown was populated.

IJavaScriptExecutor jse = (IJavaScriptExecutor)driver;
jse.ExecuteScript("$(arguments[0]).change();", driver.FindElement(By.Id("itemList")));