Clicking particular element in a drop down list - selenium

Can you please help me click on an item in a drop down list. I have a class called prompt-wrapper which contains user names. I want to click a particular user.
In the example below I have only one user but the list can have multiple users. Here I want to click on "Janice Hunt".
<div class="prompt-wrapper" data-reactid=".0.0.3.0.$message-panel.2.2">
<div class="prompt-item selected hover" data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413">
<div class="prompt-item-avatar" data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.0">
<img src="/bundles/neighbourlyregistration/img/avatar.png" data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.0.0">
</div>
<span class="prompt-item-name" data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.1"><strong>Janice</strong> Hunt</span>
<span class="prompt-item-address" data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.2">
<span class="glyph icon glyphicon-marker" data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.2.0"></span>
<span data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.2.1"> </span><span data-reactid=".0.0.3.0.$message-panel.2.2.1:$user_950413.2.2">Suburb</span></span>
</div>
</div>

You can locate the desired item in the dropdown by XPath:
//span[#class="prompt-item-name" and strong = "Janice" and contains(., "Hunt")]
Don't forget to click the dropdown to open it up before selecting an item.

If you need to click on a particular value in drop down use the below code, if there are many values in the drop down field.
//get the drop down field first via id, name, className, cssSelector etc...
WebElement propertySelectBox = browser.findElement(By.className("txtfld"));
//Use 'Select' statement
Select propertyComboBox = new Select(propertySelectBox);
// 4 means 5th Element
propertyComboBox.selectByIndex(4);

Related

How to Select a value from drop down with span class. Conventional drop-down function does not work for span class

By Default properties :
<span class="selectBox-label" style="width: 135px;">--Select--</span>
Few values when selected from dropdown are having the below properties:
<span class="selectBox-label" style="width: 135px;">Association</span>
<span class="selectBox-label" style="width: 135px;">Partnership</span>
Requireent is to select the values 'Association' or 'Partnership'
Perform click operation on the Drop down label, then perform click operation on the required option.
Can be done something similar to this
//Clicks on the dropdown
driver.findElement(By.xpath("//span[#class='selectBox-label']")).click();
//Clicks on the required option
driver.findElement(By.xpath("//span[text()='Association']")).click();

trouble making in xpath for "ul" html code in selenium webdriver

HTML code:
<div id="routingPanel" class="">
<div id="routingPanelRight">
<ul id="routingList" class="ui-sortable">
<li class="ui-menu-item ui-draggable" style="display: list-item;" role="presentation" data-type="srl" data-id="15">
<a class="ui-corner-all" tabindex="-1">AS-HTTS-US-LAN-SW</a>
<span class="fa fa-trash"/>
<span class="type">[srl]</span>
</li>
<li class="ui-menu-item ui-draggable" style="display: list-item;" role="presentation" data-type="queue" data-id="119">
<a class="ui-corner-all" tabindex="-1">AS-EMEA-NORTH</a>
<span class="fa fa-trash"/>
<span class="type">[queue]</span>
</li></ul></div></div>
I need to click on a button which is having the span class"fa fa-trash" but it is inside li class. And i have list on buttons on the page with li class changing.
I am giving testdata from excel file so i can't use the direct value.
i tried to use this xpath
.//*[#id='routingList']/li[5]/span[1] //testdata1
.//*[#id='routingList']/li[2]/span[1] //testdata2
where li value changes everytime from excel file.
WebDriverWait wait = new WebDriverWait(driver, 15);
wait.until(ExpectedConditions.visibilityOfElementLocated((By.xpath("//ul[#id='routingList']/li/span[1]")))).click();
List<WebElement> options = driver.findElements(By.xpath("//ul[#id='routingList']/li/span[1]"));
for (WebElement option : options) {
if(testData.equals(option.getText()))
option.click();
Tried above code but it is deleting only one from the list ,where i have passed two more testdata that needs to be deleted.
Need suggestions Please
According to the information you gave me in comments, I think the problem is that you are trying to get a text from an element that doesn't contain text.
Let's say your testData is AS-HTTS-US-LAN-SW. In the HTML you provided and the xpath you mentioned, you are selecting an autoclosing tag <span class="fa fa-trash"/>. Once this tag is selected, you are trying to get the text inside of it, and there is none.
<ul id="routingList" class="ui-sortable">
<li class="ui-menu-item ui-draggable" style="display: list-item;" role="presentation" data-type="srl" data-id="15">
===========================
<a class="ui-corner-all" tabindex="-1">AS-HTTS-US-LAN-SW</a> ----> The text is contained here
<span class="fa fa-trash"/> ---> No text in that tag
===========================
<span class="type">[srl]</span>
</li>
</ul>
So, basically, you have to modify a little bit your xpath from : //ul[#id='routingList']/li/span[1] to : //ul[#id='routingList']/li/a to get the text, and then go back to the parent node to find your button with : ../span[contains(#class, 'fa fa-trash')]
WebDriverWait wait = new WebDriverWait(driver, 15);
wait.until(ExpectedConditions.visibilityOfElementLocated((By.xpath("//ul[#id='routingList']/li/span[1]")))) // removed the click here because you were clicking on the first element of the list
List<WebElement> options = driver.findElements(By.xpath("//ul[#id='routingList']/li/a"));
for (WebElement option : options) {
if(testData.equals(option.getText()))
option.findElement(By.xpath("../span[contains(#class, 'fa fa-trash')]")).click();
Tell me if it helped
I know you already accepted an answer but there's a more efficient way to do this. You can specify the text you are looking for as part of the XPath. So, you do a single search instead of looping through all the options which can be a performance hit if there are many options. Also, with something like this you are likely to use it more than once so put it in a function.
In this case, the function would take in the string you are looking for and then click the appropriate element.
public void selectRegion(String regionName)
{
driver.findElement(By.xpath("//a[.='" + regionName + "']/following-sibling::span[#class='fa fa-trash']")).click();
}
and you would call it like
selectRegion(testData);
The function looks for an A tag that contains the desired text and then clicks the sibling SPAN with class fa fa-trash.

How to deal with checkbox using selenium webdriver?

i want to scrape a page with checkboxes with no id, they have the same name and just the values are differents.
<div class="mvNavLk">
<form class="jsExpSCCategories" method="post" name="ExpressSCCategories" action="actionTest.html">
<ul class="mvSrcLk">
<li>
<label class="mvNavSel mvNavLvl1">
First
<input type="checkbox" value="firstValue" name="selectedNavigationCategoryPath">
</label>
</li>
<li>
<label class="mvNavSel mvNavLvl1">
Second
<input type="checkbox" value="secondValue" name="selectedNavigationCategoryPath">
</label>
</li>
</ul>
</form>
</div>
use below code:
driver.find_element_by_css_selector(".mvSrcLk>li:nth-child(1)>label.mvNavSel.mvNavLvl1").click();
hope this will work.
Hope this works-
driver.FindElement(By.XPath(".//label[contains(text(),'First')]/input")).SendKeys("test");
Hi please do it like below Note this example is in java
// take check boxes with same name inside the list
List<WebElement> myCheckBox = driver.findElements(By.name("selectedNavigationCategoryPath"));
// now on the basis of index call click
myCheckBox.get(0).click(); // for the first check box
Thread.sleep(2000);
myCheckBox.get(1).click(); // for the second check box
or if you want to select on the basis of value then
driver.findElement(By.xpath("//*[#value='firstValue']")).click(); // for the 1st one
Thread.sleep(2000);
driver.findElement(By.xpath("//*[#value='secondValue']")).click(); // for the 2st one
UPDATE
WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#value='firstValue']")));
driver.findElement(By.xpath("//*[#value='firstValue']")).click(); // for the 1st one
Hope this helps you
driver.findElement(By.name("selectedNavigationCategoryPath")).click();
Below Code is in C#, Collects all the Checkboxes with the name specified. Then Iterates through each ckeckbox, gets the value attribute, if the attribute is equal to your specified check box, then clicks it and comes out of the loop. Hope this should work.
IList<IWebElement> myCheckBoxs = driver.FindElements(By.name("selectedNavigationCategoryPath"));
Foreach(IWebElement chkBx in myCheckBoxs)
{
if(chkBx.GetAttribute("Value")=="Your Desired value")
{
chkBx.Click();
break;
}
}
`
Use this CSS locator.
[name='selectedNavigationCategoryPath'][value='firstValue']

How to select a specific value from drop down list in webdriver

I am new to selenium and need help to figure out how to select a specific value from drop down list. Scenario is that when I click on the arrow it gives a list to select from and when I select any of the value, another filed opens up to enter value in it. So please tell me how to select value from the list by clicking on it.
Here is the HTML:
div class="custom-select"
<select class="ng-pristine ng-untouched ng-invalid ng-invalid-required" required="" ng-class="{ 'ng-fieldEmptyOnCreate' : (profileAdminTab.modalrole.$dirty || submitted) && profileAdminTab.modalrole.$error.required }" ng-options="item.Role for item in RolesData | filter: {IsSecurityRole: true} | orderBy: 'RolePriority':false" ng-change="SetAllowedPermission()" ng-model="RolesData.selectedRole" name="modalrole">
<span class="error ng-binding ng-hide" ng-show="(profileAdminTab.modalrole.$dirty || submitted) && profileAdminTab.modalrole.$error.required">Roles are required</span>
/div
/div
Thanks
The quickest way would be to use Selenium IDE to record user actions and then interrogate the html generated to see what the elements and drop down selectable items are called.

Any suggesstions to locate the below elements in Selenium

Example HTML below. I want to locate the elements which contains the text Person Attributes and Age.
<div id="ext-gen210" class="x-tool x-tool-toggle"></div>
<span id="ext-gen214" class="x-panel-header-text">Person Attributes</span>
</div>
<div id="ext-comp-1071" class=" DDView ListView" style="height: auto;">
<p class="dragItem "><i class="icon-Gen"></i>Age</p>
</div>
Note: I am looking for a solution without using xpath or id or className as they might change with every new release of my website.
I tried to locate them using
'name' --> By.name("Person Attributes") and By.name("Age") but both failed.
By.name would check for the name attribute. What you need is to check the text of an element using By.xpath:
By.xpath('//div[span/text() = "Person Attributes"]')
Or, you can also check that an id element starts with ext-gen:
By.xpath('//div[starts-with(#id, "ext-gen")]')