Using Selenium IDE to find dynamic ID - selenium

I have been able to locate the element by using the following command, target and Value.
Command: Select
Target: //div[#id='ui-id-51']/div[2]/div/fieldset/div/div/select
Value: Documentation
This xpath works, however, the id number is dynamic and will change each time that I open up this window a new time. So the number (51 in this example) may be 201 the next time that I open this window, but the ui-id- will always be the same. So this Target is not found the next time I open the window. I have tried using the following xpath to fix this, but it does not work.
Command: Select
Target: //div[starts-with(#id,'ui-id-')]/div[2]/div/fieldset/div/div/select
Value: Documentation
Can someone give me the correct xpath to find this target with a dynamic id?
Here is the HTML:
<div id="ui-id-22" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 552px;">
<div></div>
<div class="patient-module-contact-edit">
<!--
start of template: "#contact_log_logEntry_edit"
-->
<div class="new-encounter">
<fieldset class="wide-mode liquid" style="border: none; padding-top: 0px;">
<div class="row span5">
<div class="span5">
<label></label>
<select class="encounterType vf vf-required span4 vf-validated" name="encounterType" style="visibility: visible; background-color: rgb(238, 238, 238);">
<option value=""></option>
<option value="INBOUND_TELEPHONE"></option>
<option value="OUTBOUND_TELEPHONE"></option>
<option value="OUTBOUND_TELEPHONE_VM"></option>
<option value="OUTBOUND_TELEPHONE_NO"></option>
<option value="INBOUND_EMAIL"></option>
<option value="OUTBOUND_EMAIL"></option>
<option value="INBOUND_FAX"></option>
<option value="OUTBOUND_FAX"></option>
<option value="INBOUND_TEXT"></option>
<option value="OUTBOUND_TEXT"></option>
<option selected="" value="ENCOUNTER"></option>
<option value="DOCUMENTATION"></option>

starts-with() based solution looks good and should work according to what you've provided.
You can also try a bit broader check using contains():
//div[contains(#id,'ui-id-')]/div[2]/div/fieldset/div/div/select

Related

Correct Syntax for this Selenium command

I am just not sure what will be the syntax for this
This is a drop-down which changes its ID so I wish to choose the label above to navigate the click
Here is the HTML
<label class="form-title">Charging and Billing Alignment</label>
<select name="ratingAndBillingAlignment" class="reverse-toggle-select check-if-form-row-visible hide-child-if-not-visible loadable-drop-down-37 loadable-drop-down-select" id="ratingAndBillingAlignment" makeloadabledropdown="37" style="display: none;" fixed_position=".popup-content-inner">
<option value="TRUE" class="done-into-select-dd">Yes</option>
<option value="FALSE" selected="selected" class="done-into-select-dd">No</option>
</select><span num="37" class="loadable-drop-down loadable-drop-down-container loadable-drop-down-container-37" id="makeLoadableDropDown37" style="position: relative;" title="No" title2="No"><span class="dropdown-label initialized" style="width: 100%;"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></span><span style="display: none; position: absolute; width: 100%; left: 0px;" class="dropdown-list custom-drop-down-dropdown-list custom-drop-down-dropdown-list-37" stop="0" loading="0" data-counter="37"><div class="option-list" style="max-height: 250px;"><div class="dropdown-link the-dd-counter-1 first-dd-link" c="1" title="Yes"><span class="dropdown-html"><span class="value_box" style="display: none;">TRUE</span><span class="text">Yes</span></span></div><div class="dropdown-link the-dd-counter-2 last-dd-link selected" c="2" title="No"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></div></div></span></span>
driver.findElement(By.xpath(
"//span[#class='dropdown-label initialized']/following-sibling::label[contains(text(),'Charging and Billing Alignment')and(#xpath='1')]"))
.click();
Thanks for your help!
Here is the xpath that you can use with name. As name does not update as it did in the case of id.
//select[#name='ratingAndBillingAlignment']
Locating <select> won't work in your case as its hidden. style="display: none;"
Try using below xpath to click on span looks alike dropdown
//label[contains(.,'Charging and Billing Alignment')]/following-sibling::span[contains(#class,'loadable-drop-down')]

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

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();
}
}

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

options for search TextField in navbar

Is it possible that the user could select from the utility dropdown (see picture below) a search option which will effect the search text field?
Or is it possible merge the dropdown and search text field together?
I think you will be able to do this leveraging input-groups. But the docs also mention:
Avoid using elements here as they cannot be fully styled in
WebKit browsers.
HTML to integrate a <select> in the navbar:
<form class="navbar-form navbar-left select-search" role="search">
<div class="input-group">
<span class="input-group-addon">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Then apply the following CSS:
.select-search .input-group-addon {
padding: 0;
border: 0;
}
.select-search .input-group .input-group-addon > select.form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Demo: http://www.bootply.com/8zPGZ9ySOl
I found this works well in chrome, but in firefox the select arrow got some button like styling:
I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS

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")));