Exception in getting xpath to a web element: org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "a" - selenium

There is a dropdown with 9 options in it, all of anchor (a) type. Selecting an option from the list, changes its class & other attributes dynamically.
This is how the html code looks like:
<select data_old_value="Email" id="ActionType-db5ff710-2a01-11e8-9c5f-22000aa79843" name="ActionType-db5ff710-2a01-11e8-9c5f-22000aa79843" onchange="RuleWizardIns.RuleActionChanged($(this))" style="width: 103px !important; height: auto !important; display: none;" aria-disabled="false"><option value="Email" selected="selected">Send Email</option><option value="TaskCreate">Create Task</option><option value="AddActivity">Add Activity</option><option value="AddToList">Add To List</option><option value="LeadUpdate">Update Lead Fields</option><option value="TagLead">Tag Lead</option><option value="StarLead">Star Lead</option><option value="UnStarLead">Unstar Lead</option><option value="Webhook">Call Webhook</option></select>
<option value="Email" selected="selected">Send Email</option>
<option value="TaskCreate">Create Task</option>
<option value="AddActivity">Add Activity</option>
<option value="AddToList">Add To List</option>
<option value="LeadUpdate">Update Lead Fields</option>
<option value="TagLead">Tag Lead</option>
<option value="StarLead">Star Lead</option>
<option value="UnStarLead">Unstar Lead</option>
\<option value="Webhook">Call Webhook</option>
</select>
<span>
<a class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" id="ActionType-db5ff710-2a01-11e8-9c5f-22000aa79843-button" role="button" href="#nogo" tabindex="0" aria-haspopup="true" aria-owns="ActionType-db5ff710-2a01-11e8-9c5f-22000aa79843-menu" style="width: 103px;" aria-disabled="false"><span class="ui-selectmenu-status">Send Email</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>
<span class="ui-selectmenu-status">Send Email</span>
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
</a>
</span>
I tried to get the control on Update Lead Fields option by using below code, but unfortunately its not working.
Select ActionType = new Select(driver.findElement(By.xpath("//select[#data_old_value='Email']/following-sibling::span/a")));
ActionType.selectByVisibleText("Update Lead Fields");
I'm getting below error:
org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "a"
And there is no ui for select attribute as you can see from below image:
https://d24cdstip7q8pz.cloudfront.net/t/t20170511180558/content/common/images/Untitled.png

A Select object can only be created by getting the WebElement with tag is "select" that's what the errormessage is about. I created an C# example which I tested giving expected result.
Driver.Url = ("https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/select");
var valuesSelectElement = Driver.FindElement(By.Name("select"));
var selectElement = new SelectElement(valuesSelectElement);
// To select an option by value
selectElement.SelectByValue("value1");
// To select an option by text
selectElement.SelectByText("Value 2");
var options = selectElement.Options;
//To click on one of the options
foreach (var option in options)
{
if (option.Text.Equals("Value 3"))
{
option.Click();
}
}

Related

How does one use Selenium Webdriver : to choose text from a dynamic combobox with tag <aria-activedescendant>?

This is the html:
<select select2="" id="id_event_operator" value.bind="model.operator"
style="width:100%;display:block" class="au-target select2-hidden-accessible"
au-target-id="134" data-select2-id="id_event_operator" tabindex="-1" aria-
hidden="true"> <option model.bind="op.id" class="au-target" au-target-id="135"
data-select2-id="2">--- None ---</option><option model.bind="op.id" class="au-
target" au-target-id="135" data-select2-
id="11">liveeventuplynktest01#test.com</option><option model.bind="op.id"
class="au-target" au-target-id="135" data-select2-
id="12">uplynkcmsseleniumtestaccount#test.com</option><!--anchor--> </select>
<span class="select2 select2-container select2-container--default select2-
container--below select2-container--open" dir="ltr" data-select2-id="1"
style="width: 100%;"><span class="selection">
<span class="select2-selection
select2-selection--single" role="combobox" aria-haspopup="true" aria-
expanded="true" tabindex="0" aria-labelledby="select2-id_event_operator-
container" aria-owns="select2-id_event_operator-results" aria-
activedescendant="select2-id_event_operator-result-q5d6-
liveeventuplynktest01#test.com">
<span class="select2-selection__rendered"
id="select2-id_event_operator-container" role="textbox" aria-readonly="true"
title="--- None ---">--- None ---</span>
<span class="select2-selection__arrow"
role="presentation"><b role="presentation"></b></span></span></span>
<span class="dropdown-wrapper" aria-hidden="true"></span></span>
The value of the "aria-activedescendant" keeps on changing as I hover over the elements in the combobox.
How can I grab the value in combobox and set it to the textbox element.Clicking on the "class="select2-selection select2-selection--single" element is not setting the textbox value when I am doing it through the code, but it works if I manually do it from UI.
This is how the web page looks like
This is my code:
public class LiveEventsPage extends PageObject {
#FindBy(xpath = "/html/body/router-
view/div[4]/div/div[2]/div/form/ul/li[1]/span/span[1]/span/span[2]")
private WebElement eventOperatorDropDownButton;
public void setEventOperator(String dropDownElem){
waitForElemToBeClickable(eventOperatorDropDownButton).click();
driver.findElement(By.xpath("//span[contains(#aria-
activedescendant,'liveeventuplynktest01#test.com')]")).click();
}
}
Locate with this Xpath :
if(driver.findElement(By.xpath("//span[#aria-labelledby='select2-id_event_operator-container']")).isDisplayed())
{
String getData = driver.findElement(By.xpath("//span[#aria-labelledby='select2-id_event_operator-container']")).getAttribute("aria-activedescendant");
}

Element is not currently visible so may not be interacted with

I need to select the last item in the list. My code below shows the message that the element is not currently visible. How can fix this?
WebDriverWait wait = new WebDriverWait(driver, 60);
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector("#s2id_autogen1 > a.select2-choice > span")));
WebElement element = driver.findElement(By.xpath("//select[#name='siteKey']"));
element.click();
Select select = new Select(element);
select.selectByIndex(select.getOptions().size()-1);
HTML:
<div id="overview_form">
<ol>
<li>
<span>1.</span>
<label class="input_label" for="sites">Sites*</label>
<div class="select2-container select2-dropdown-open select2-container-active" id="s2id_autogen1" style="width: 500px;">
<a tabindex="-1" class="select2-choice" onclick="return false;" href="javascript:void(0)">
<span>gn</span><abbr style="display:none;" class="select2-search-choice-close"></abbr><div><b></b></div></a>
<input type="text" class="select2-focusser select2-offscreen" disabled="disabled"></div>
<select style="width:500px; *width:400px;" size="1" name="siteKey" class="select2-offscreen" tabindex="-1">
<option value="30706">gn</option>
<option value="30813">www.walmart.com_20150212151258</option>
<option value="30815">www.walmart.com_20150212151452</option>
<option value="30817">www.walmart.com_20150212152338</option>
<option value="30819">www.walmart.com_20150212152521</option>
<option value="30820">www.walmart.com_20150212152849</option>
<option value="30822">www.walmart.com_20150212152939</option>
<option value="30824">www.walmart.com_20150212153438</option>
<option value="30761">www.yup.com</option>
</select>
</li>
</ol>
Screenshot of the List. This list has a search field, where user can enter prefixes to narrow-down the search.
Try this. Please make sure to expand the list as needed. The selector is written such a way so that it will always fine the last option of the select tag named siteKey
//this selector find the last child o
By cssSelector = By.cssSelector("[name='siteKey']>option:last-child");
//explicit wait to make sure the element present
WebElement element = new WebDriverWait(driver,10).until(ExpectedConditions.presenceOfElementLocated(cssSelector));
element.click();
System.out.println(element.getText());
Print
www.yup.com

How to ALWAYS select the last item in the list

I need to select the last item in a DYNAMIC list. The following is my script. Thanks!
WebElement selectElement = driver.findElement(By.name("siteKey"));
Select select = new Select(selectElement);
//select.selectByVisibleText("last item");
//select.selectByIndex(0);
//select.selectByValue("value");
Please see the page HTML below. Let me know if I can provide you with any other info. Thanks!
<div id="overview_form">
<ol>
<li>
<span>1.</span>
<label class="input_label" for="sites">Sites*</label>
<div class="select2-container select2-container-active select2-dropdown- open" id="s2id_autogen1" style="width: 500px;">
<a tabindex="-1" class="select2-choice" onclick="return false;" href="javascript:void(0)">
<span>www.roger.com_20150210075155</span>
<abbr style="display:none;" class="select2-search-choice-close"></abbr>
<div><b></b></div></a>
<input type="text" class="select2-focusser select2-offscreen" disabled="disabled">
</div>
<select style=" size="1" name="siteKey" class="select2-offscreen" tabindex="-1">
<option value="30518">www.roger.com_20150209191817</option>
<option value="30520">www.roger.com_20150209192123</option>
<option value="30522">www.roger.com_20150209192351</option>
<option value="30524">www.roger.com_20150209192910</option>
<option value="30528">www.roger.com_20150209193425</option>
<option value="30529">www.roger.com_20150209193801</option>
<option value="30531">www.roger.com_20150209194009</option>
<option value="30546">www.roger.com_20150210074133</option>
<option value="30548">www.roger.com_20150210074359</option>
<option value="30550">www.roger.com_20150210075155</option></select>
</li>
</ol>
</div>
How about something like:
WebElement selectElement = driver.findElement(By.name("siteKey"));
Select select = new Select(selectElement);
select.selectByIndex(select.getOptions().size()-1);
You can use getOptions(), it will return a list then get the size of the list
Select select = new Select(driver.findElement(By.id("siteKey")));
List<WebElement> l = select.getOptions();
int numElements = l.size();
select.selectByIndex(munElements);
Hope this helps
I tried below way, and it's working.. Maybe this will help u .
WebDriver driver = new FirefoxDriver();
driver.get("http://www.echoecho.com/htmlforms11.htm");
Thread.sleep(100l);
driver.findElement(By.xpath("//select[#name='dropdownmenu']")).click();
Thread.sleep(100l);
WebElement element = driver.findElement(By.xpath("//select[#name='dropdownmenu']"));
List<WebElement> elements = element.findElements(By.tagName("option"));
System.out.println(elements.get(elements.size() - 1).getText());

org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "td"

hii all i am very new to automation
my problem is i am getting an error
org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "td"
when i am trying to select an option from dropdown list
this is my sourch code
public void CompanyFilters_Fn() {
// TODO Auto-generated method stub
_driver.findElement(By.xpath(".//*[#id='company._idCell']")).click();
Select CompanyOptions = new Select(_driver.findElement(By.xpath(".//*[#id='company._idCell']")));
CompanyOptions.deselectAll();
CompanyOptions.selectByIndex(5150);
CompanyOptions.selectByIndex(5003);
}
this is my html code
<td id="company._idCell" class="filterValue filterActive filterChanged firepath-matching-node" onclick="showInputElement('pre.myProjectsForm.company._id', this, null, 'auto'); return false;" title="Select to filter by Company">Company: [No Company]</td>
these are the options
<div id="divSelect" class="inputElement" style="left: -1000px; top: 212px; width: auto; height: 20px;">
<select id="inputSelect" size="5" style="width: auto; visibility: visible;" multiple="" disabled="">
<option value="-1">Any</option>
<option value="0">[No Company]</option>
<option value="5150">123</option>
<option value="5203">AutoCarLoanCompany</option>
<option value="5205">Company_rahul</option>
<option value="5202">CreditCardCompany</option>
<option value="5003">IBM</option>
<option value="5204">June</option>
<option value="5300">other companyyyyy</option>
<option value="5001">qa</option>
<option value="5101">Rahul</option>
</select>
</div>
Plzzz help me to get out of this...
The error message is very descriptive, you've given it a td when it expects a select (rightly so).
So here:
Select CompanyOptions = new Select(_driver.findElement(By.xpath(".//*[#id='company._idCell']")));
You need to change this to give it the select:
Select CompanyOptions = new Select(_driver.findElement(By.id("inputSelect")));

dojo.connect with dojox.form.DropdownSelect

Hi I have 3 Controls on my Razor Form. 1) combobox, 2) DropdownSelect 3) Text Input.
First I select value from Combobox and as a result i add options to DropdownSelect. After i select a value from DropdownSelect, i want to enable or disable the 3rd input box.
I am able to populate 2nd Dropdown select when i select a value in 1st Combobox. But I am not able to enable or disable the 3nd input box based on 2nd Dropdown value change.
Here is sample Code.
<input type="text" dojoType="dijit.form.ComboBox" style="margin-top: 5px;" class="left" store="regionStore" queryExpr="${0}" hasDownArrow="true"
searchAttr="text" labelAttr="name" title="Region" id="Plan_RegionName" jsId="Plan_RegionName" name="Plan.RegionName" required="true" placeholder="None" ignoreCase="true" />
<select name="Plan.PlanType" id="Plan_PlanType" title="Plan Type" dojoType="dojox.form.DropDownSelect" required="true" maxHeight="125" labelwidth="185px" style="width: 180px">
<option value="" selected="selected">-- Select One --</option>
<option value="Trial">Trial</option>
<option value="PerUser">Per User</option>
<option value="PerUnit">Per Unit</option>
<option value="Reseller">Reseller</option>
<option value="Other">Other</option>
</select>
<div dojoType="dijit.form.ValidationTextBox" style="width: 180px; margin-top: 5px;" id="Plan_Name" title="Plan Name" name="Plan.Name" required="true"
missingMessage="This value is required" promptMessage="Enter a value" value="">
<script text/type="javascript">
dojo.addOnLoad(function () {
dojo.connect(Plan_RegionName, "onChange", Plan_RegionName, function (evt) {
alert("Combo box Changed!");
});
dojo.connect(Plan_PlanType, "onChange", Plan_PlanType, function (evt) {
alert("Dropdown Changed!");
});
});
</script>
I get the alert message for Combox box change but not for Dropdown change.
Any ideas. Please advice.
thanks,
Vivek
Since "Plan_PlanType is a dojox.form you should be able to check if it is 'valid' as a way to enable the last textbox. So, something like:
if(dojo.byId("Plan_PlanType").validate()){
dojo.byId("Plan_Name").set("enabled", true);
}
However, you may need to wrap this in a dojo.connect function.
I used the onChange event of Selectbox.
Here is the example.
<select name="#name" id="#id" title="#ViewData.ModelMetadata.GetDisplayName()" onChange="enablePlanname(this.getValue())" dojoType="dijit.form.ComboBox" required="true" maxHeight="125" style="width: 180px; margin-top: 5px;">
#if (String.IsNullOrEmpty(Model))
{
<option value="" selected="selected">-- Select One --</option>
}
#foreach (CurrencyType bt in Enum.GetValues(typeof(CurrencyType)))
{
bool selected = false;
if (bt.ToString() == Model)
{
selected = true;
}
<option value="#bt.ToString()"#(selected ? " selected=\"selected\"" : "")>#bt.GetDisplayName()</option>
}
</select>
<script type="text/javascript">
function enablePlanname(value) {
var CurrentTextBox = dijit.byId('Region_Currency');
if (value == "other") {
CurrentTextBox.set("disabled", false);
}
else {
CurrentTextBox.set("disabled", true);
}
}
</script>
Thanks for all your help.