I need to select the address from the auto complete drop down in selenium webdriver.
I have added the inspect element source of the drop down box as follows,
<head>
<body>
<input id="gridLogId" name="gridLogId" value="qOZcnJEE/G9A+fAN/C4PlA==" type="hidden"/>
<div id="wrapper">
<div id="confirmation-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<script id="subscriptiondetailTemplate" type="text/x-kendo-template"> # for (var i = 0; i < data.length; i++) { # <span class="kendoTooltip cursorpointer subs_IAM fa subs_#= data[i].PlanCode#" title="Plan description : #= data[i].PlanDesc #<br>Expiry on : #= data[i].ExpiryOnLabel #">#= data[i].PlanDesc #</span> # } # </script>
<script> var subscriptionTemplate = kendo.template($('#subscriptiondetailTemplate').html()); </script>
<style> body { overflow: hidden !important; } </style>
<ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: none;"/>
<div class="k-list-container k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute;">
<div id="Finyear_OWtyUEpDYnYyMFU9-list" class="k-list-container k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute;">
<ul id="ui-id-2" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: block; width: 444px; top: 742.85px; left: 460.133px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-303" class="ui-corner-all" tabindex="-1">SYDNEY, New South Wales, Australia, 1001</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-304" class="ui-corner-all" tabindex="-1">SYDNEY, New South Wales, Australia, 1002</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-305" class="ui-corner-all" tabindex="-1">SYDNEY, New South Wales, Australia, 1003</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-306" class="ui-corner-all" tabindex="-1">SYDNEY, New South Wales, Australia, 1005</a>
</li>
<li class="ui-menu-item" role="presentation">
<li class="ui-menu-item" role="presentation">
<li class="ui-menu-item" role="presentation">
<li class="ui-menu-item" role="presentation">
<li class="ui-menu-item" role="presentation">
I need to select the "SYDNEY, New South Wales, Australia, 1001" drop down value from the autocomplete box. Please suggest me some idea. I have used the following code but it is not working,
driver.findElement(By.id("ResidentialOrBusinessAddress_City")).sendKeys("Sydney");
Thread.sleep(1000);
java.util.List<WebElement> autoSuggest = driver.findElements(By.partialLinkText("1001"));
driver.findElement(By.id("ResidentialOrBusinessAddress_Region")).sendKeys("NSW");
Thread.sleep(1000);
java.util.List<WebElement> autoSuggest1 = driver.findElements(By.partialLinkText("1001"));
driver.findElement(By.id("ResidentialOrBusinessAddress_PostCode")).sendKeys("1001");
Thread.sleep(1000);
java.util.List<WebElement> autoSuggest2 = driver.findElements(By.partialLinkText("1001"));
driver.findElement(By.id("ResidentialOrBusinessAddress_Country")).sendKeys("Australia");
Thread.sleep(1000);
java.util.List<WebElement> autoSuggest3 = driver.findElements(By.partialLinkText("Australia"));
Please suggest me how to get that values. I have attached the screen shots of the page along with this.
Thank you.
please try the following, it worked for me
WebElement select = driver.findElement(By.id("ui-id-2"));
List<WebElement> options = select.findElements(By.tagName("li"));
for (WebElement option1 : options) {
if("SYDNEY, New South Wales, Australia, 1001".equals(option1.getText().trim()))
option1.click();
}
Related
<div class="ui-selectmenu-menu" style="z-index: 1; top: 457px; left: 1084.96px;">
<ul class="ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom selectmenu form-control form-select ajax-processed" aria-hidden="true" role="listbox" aria-labelledby="edit-quantity-left-eye-button" id="edit-quantity-left-eye-menu" style="width: 113px; height: 200px;" aria-disabled="false" aria-activedescendant="ui-selectmenu-item-850">
<li role="presentation" class="ui-selectmenu-item-selected ui-selectmenu-item-focus">
0
</li>
<li role="presentation">1</li><li role="presentation">
2
</li>
<li role="presentation">
3
</li>
<li role="presentation">
4
</li>
<li role="presentation">5</li><li role="presentation">6</li><li role="presentation">7</li><li role="presentation">8</li><li role="presentation">9</li><li role="presentation">10</li><li role="presentation">11</li><li role="presentation" class="ui-corner-bottom">12
</li>
</ul>
</div>
I have tried using the Xpath its not working
//li[#role='presentation' and contains (#role, 'option')]
As the code is in ajax how to identify the element for this code.
In Selenium Java - I would do this :
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("ui.ui-selectmenu-menu"))).click();
wait.until(ExpectedConditions.elementToBeClickable(By.linkText("2"))).click();
We can not use Select class from Selenium since, the drop HTML does not contain Select and option tag.
<div id="joblist-panel">
<ul class="list-job-box">
<li id="row" class="row bt-gray-border job white-bg list-arrow">
<div class="circle-outline">
<div class="circle-job circle-color" style="background-color: transparent; border: 1px solid rgb(183, 183, 183);">
<div class="circle-inner">
<div class="score-text"><i class="fa fa-file-text-o"></i></div>
</div>
</div>
</div>
title
<div class="row list-job">
<ul>
<li>
<div><i class="icon-glyph-111"></i></div>
3-6 Years
</li>
<li>
<div><i class=" icon-glyph-83"></i></div>
1 Opening
</li>
<li class="location-text"><i class=" icon-glyph-14"></i>
Bengaluru
</li>
</ul>
</div>
</li>
</ul>
Have content like this and I want to loop all 'li' tag and get href of 'a' tag and innertext of list-job class .. How can we achieve this by casperjs, phantomjs
I have 3 menu items in my navbar. I want the entire nav to be divided into 3 parts for my 3 menus. I tried with the following code but the last menu item takes bit extra space than others. How do i fix it?
.navbar {
border : 1px solid #ffffff;
}
#intr1, #intr2 {
border-right: 1px solid #ffffff;
}
.menuLabel {
text-align: center;
font-size: 17px;
font-weight: bold;
color: #ffffff;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-header ">
<ul class="nav navbar-nav container">
<li class="col-md-4" id="intr1"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr2"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr3"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try with something like this:
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul>
<li class="col-md-4" id="intr1">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr2">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr3">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
I hope this will help you a lot:
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav customnavbarnav">
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /.navbar navbar-default -->
CSS:
.customnavbarnav{
width: 100%;
text-align: center;
}
.customlist{
width: 33.33333333333333%
}
Just remove the .container class on the .navbar-nav because that is causing you to have 15px right padding which throws off the evenness.
I am having one of those scenarios with Selenium where it sometimes works.
The flow I’m focusing on is pretty simple and this has been asked and answered several times.
Hover over main menu item
Move to and click on sub menu item.
Here is the code:
Any advice as to how I could make this work every time would be most appreciated.
var actions = new Actions(SeleniumTestDriver.WebDriver);
// Move to the Main Menu Element and hover
actions.MoveToElement(SeleniumTestDriver.WebDriver.FindElement(By.XPath(#"//*[#id='main_menu']/ul/li[3]/a"))).Perform();
Thread.Sleep(1000);
var wait = new WebDriverWait(SeleniumTestDriver.WebDriver, TimeSpan.FromSeconds(5));
var subMenuLink = wait.Until(ExpectedConditions.ElementIsVisible(By.XPath(#"//*[#id='main_menu']/ul/li[3]/ul/li[4]/a")));
Thread.Sleep(250);
actions.MoveToElement(subMenuLink).Click().Perform();
Version Details:
Firefox v33.1
Selenium.WebDriver 2.44.0
Selenium.Support 2.44.0
Language C#
Edit by op
I should also add that when it fails, the menu flashes, as if the hover has been interrupted. Opens and shuts too quickly for the sub-menu item to be clicked.
The Html for that menu is:
<nav id="main_menu" class="ddsmoothmenu">
<ul class="primary_menu">
<li>calendar</li>
<li class="parent" style="z-index: 100;">...</li>
<li class="parent" style="z-index: 99;">
Upcoming Webinars<i></i>
<ul style="top: 95px; visibility: visible; left: 0px; width: 195px; display: none;">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4567">Best-Ever Compliance Checklists For...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4572">Build a No-Excuses Sales Environmen...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4560">Handling Power of Attorney Document...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4566">Flood Insurance</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4562">Opening Accounts for Nonresident Al...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4561">New Share Member Account Interview ...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/allActive/?eventsToShow=upcoming">
<font color="green">View <b>All</b> Upcoming Events</font>
</a>
</li>
</ul>
</li>
<li class="parent" style="z-index: 98;">...</li>
<li style="z-index: 97;">
About Us<i></i>
<ul style="display: none; top: 95px; visibility: visible;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/WhatIsAWebinar">What Is A Webinar?</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/CommonQuestions">Commonly Asked Questions</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/DetailedConnectionInstructions">Connecting to Your Webinar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/contactus">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>
Thanks
I have modified the xpath of your existing code. Please check if that works for you:
var actions = new Actions(SeleniumTestDriver.WebDriver);
// Move to the Main Menu Element and hover
actions.MoveToElement(SeleniumTestDriver.WebDriver.FindElement(By.XPath("//li[#class='parent']/a[.='Upcoming Webinars']"))).Build().Perform();
var wait = new WebDriverWait(SeleniumTestDriver.WebDriver, TimeSpan.FromSeconds(10));
var subMenuLink = wait.Until(ExpectedConditions.ElementIsVisible(By.XPath("//li[#role='presentation']/a[contains(text(),'Flood Insurance')]")));
actions.MoveToElement(subMenuLink).Click().Perform();
please try it out with below code:
WebElement web = dri.findElement(By
.xpath("//a[contains(.,'Upcoming Webinars')]"));
Actions objA = new Actions(dri);
objA.moveToElement(web).click().build().perform();
objA.moveToElement(
(new WebDriverWait(dri, 3)).until(ExpectedConditions.elementToBeClickable(By
.xpath("//a[contains(text(),'Safe Deposit Boxes')]"))))
.click().build().perform();
You cab replace Safe Deposit Boxes with your own choice of element to be clicked.
P.S. Sorry but this code is in java, please help yourself for any equivalent in C#.
The below code is dynamically generated HTML. How can I read it by using class name and click on the li element?
I want to select "Pandharpur" from the list of cities below:
<ul class="ui-autocomplete ui-menu ui.-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -1018.18px; left: 667px; display: block; position: relative; width: 201px;">
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Kumarganj</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Bitkewadi</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Imampur</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Pandharpur</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Malichinchora</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Pimpri Nirmal</a>
</li>
</ul>
driver.findElement(By.xpath("//*[contains(#class,'ui-menu-item')]/a[text()=\"Pandharpur\"]")).click();
Step 1:
With the given DOM Structure we can derive the CSS Selector for Pandgarpur
css=li.ui-menu-item > a:contains('Pandharpur')
Step 2:
Perform the Method
driver.findElement(
By.cssSelector("li.ui-menu-item > a:contains('Pandharpur')"))
.click();
to click it.