Selenium Sometimes Succeeds in Clicking Sub Menu Item - selenium

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#.

Related

How to find element for the dropdown list which is using ajax

<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.

How to correctly output data from the database to the razor

I have 2 drop-down menus
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="#Model.WeekNumberDayStart" id="periodTypeNumber">
<span class="toggle-text">First</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">First</a>
</li>
<li role="presentation">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2">Second</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3">Third</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4">Fourth</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5">Fifth</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" id="periodTypeDay" data-value="#Model.DayNubmerOfWeek">
<span class="toggle-text">monday</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" data-value="1">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">monday</a>
</li>
<li role="presentation" data-value="2">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2">tuesday</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3">wednesday</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4">thursday</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5">friday </a>
</li>
<li role="presentation" data-value="6">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="6">saturday</a>
</li>
<li role="presentation" data-value="7">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="7">sunday</a>
</li>
</ul>
</div>
and if the date from #Model.WeekNumberDayStart(int - like 1,2,3,4...) = data-value = "1" then need to write class = "active" otherwise just class = ""
maybe somehow it can be done differently through the menu itself through DropDownList?
and if the date from #Model.WeekNumberDayStart(int - like 1,2,3,4...)
= data-value = "1" then need to write class = "active" otherwise just class = ""
It cannot be achieved by menu itself. You need to use jquery code to achieve.
Since you have two dropdown menus, you need to distinguish the a tag of these two menus.
Therefore, you can add custom attributes and corresponding values to each group of a tags to ensure that the corresponding elements can be obtained in jquery.
Below is the class active binding for the first group of dropdown menu example.
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="#Model.WeekNumberDayStart" id="periodTypeNumber">
<span class="toggle-text">First</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1" droptype="WeekNumberDayStart">First</a>
</li>
<li role="presentation">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2" droptype="WeekNumberDayStart">Second</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3" droptype="WeekNumberDayStart">Third</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4" droptype="WeekNumberDayStart">Fourth</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5" droptype="WeekNumberDayStart">Fifth</a>
</li>
</ul>
</div>
jquery to change binding class active according to #Model.WeekNumberDayStart value:
<script>
$(function () {
$("a[droptype=WeekNumberDayStart]").each(function () {
$(this).removeClass("active");
if ($(this).attr("data-value") == $("#periodTypeNumber").attr("data-value")) {
$(this).addClass("active");
}
})
})
</script>

Select value from dropdown with selenium webdriver

I am trying to select a value from a dropdown with selenium webdriver but it just opens the dropdown and immediately closes it.
Here is the code for webdriver:
driver.findElement(By.cssSelector("span.k-select ")).click();
Thread.sleep(3000);
driver.findElement(By.xpath("//li[#class='k-item'][.='Revenue per click']")).click();
And this is the html code from the browser for the dropdown:
<div class="controls">
<span class="k-widget k-dropdown k-header kendo-input span8 ddFix" unselectable="on">
<span unselectable="on" class="k-dropdown-wrap k-state-default">
<span unselectable="on" class="k-input">Select revenue type...
</span>
<span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input name="revenueType" id="revenueType" class="kendo-input span8 ddFix" data-role="dropdownlist" style="display: none;">
</span>
</div>
<div class="k-animation-container km-popup">
<div class="k-list-container k-popup k-group k-reset" id="revenueType-list" data-role="popup">
<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="revenueType_listbox" aria-live="off" style="overflow: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item">Select revenue type...</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per action</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per click</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per sale</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per action + Revenue per sale</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per mile</li>
</ul>
</div>
</div>
It's hard to debug without the context but:
Your locator is invalid, instead try using:
By.xpath("//li[text()='Revenue per click']")
Since only one item has that text, it should be sufficient. If you still want to include #class in selector, use
By.xpath("//li[#class='k-item' and text()='Revenue per click']")
Try using javascript change the unselectable to off using javascript executor.
Get the dropdown text value after perform click action
subdropdown_child = navigationDriver.findElements(By.cssSelector("select#ctl00_SPWebPartManager1_g_c873566a_540c_4681 option");
for (Element subchild : subdropdown_child)
{
dropdown_value = subchild.text();
new Select(navigationDriver.findElementByCssSelector("select#ctl00_SPWebPartManager1_g_c873566a_540c_4681_")).selectByVisibleText(dropdown_value);
}

Changing Tabs with Selenium WebDriver in Firefox

I have li tags in the site and I can't change the tabs, already tried with xpath, currently looks like this:
Select objSelect = new Select(objdriver.findElement(By.xpath("//*[#id='navigation']/li[2]/a")));
WebElement navigation = objdriver.findElement(By.xpath("//*[#id='navigation']/li[2]/a"));
HTML Code:
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div>
<div class="pull-right padding-top">
<a href="http://www.mineotaur.org>">
</div>
<ul id="navigation" class="nav navbar-nav">
<li class="active">
<a data-toggle="tab" href="#genewise">Gene-wise scatterplot</a>
</li>
<li>
<a data-toggle="tab" href="#groupwiseDistributionForm">Gene-wise distribution</a>
</li>
<li>
<a data-toggle="tab" href="#cellwise">Cell-wise scatterplot</a>
</li>
<li>
<a data-toggle="tab" href="#cellwiseDistribution">Cell-wise distribution</a>
</li>
<li id="toolNav" class="disabled">
<a data-toggle="tab" href="#tools">Tools</a>
</li>
Thanks for your answers!
You may need to pass over the driver using this but this is what I use
openTabElement.click();
ArrayList<String> tabs = new ArrayList<String> (driver.getWindowHandles());
driver.switchTo().window(tabs2.get(1));
driver.close();
driver.switchTo().window(tabs2.get(0));

Autocomplete Drop down selection in selenium webdriver

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