I do not know how to click a menu item on a CSS dropdown menu.
The structure of the menu looks like this:
<ul id="nav" class="clearfix" role="navigation">
<li>
<li class="navMenu navActive">
Allfinanzberatung
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a> <- I want to Select this Menu Point
</div>
</li>
</ul>
<li class=" subMenuPoint">
<li class=" subMenuPoint">
<li class="last subMenuPoint">
</ul>
I've tried it with the following code but it doesn't work: (Eclipse Junit)
WebElement elems=driver.findElement(By.linkText("Wie ich Sie unterstütze"));//Menu Item
WebElement elems1=driver.findElement(By.xpath("//li[#nav']/a"));//Menu
Actions builder = new Actions(driver);
Actions hoverOverRegistrar = builder.moveToElement(elems1);
hoverOverRegistrar.perform();
elems.click();//at last Menu Item Click
First of all, thank you all,
but unfortunately it still does not work properly.
here is again the code for the menu.
<ul id="nav" class="clearfix" role="navigation">
<li class="navMenu">
beratung
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-berate/">Wie ich Sie berate</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/produktwelt/">Produktwelt</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/auszeichnungen/">Auszeichnungen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/premium-partner/">Premium-Partner</a>
</div>
</li>
<li class="last subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/ihr-allfinanzcheck/">Ihr Allfinanzcheck</a>
</div>
</li>
</ul>
</li>
<li>
<img alt="" src="/test.user/javax.faces.resource/pic_bg_main_menu_separator.png.xhtml?ln=images/frontend/menus" />
</li>
<li class="navMenu">
Karriere
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihre-perspektiven/">Ihre Perspektiven</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-neuer-beruf/">Ihr neuer Beruf</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-karrierefahrplan/">Ihr Karrierefahrplan</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-karrierecheck/">Ihr Karrierecheck</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/was-andere-sagen/">Was andere sagen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/auszeichnungen/">Auszeichnungen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/freie-stellen/">Freie Stellen</a>
</div>
</li>
<li class="last subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/im-falschen-film/">Führen Sie selbst Regie</a>
</div>
</li>
</ul>
</li>
</ul>
This code selects me the fourth element so "karriere" thats good driver.findElement(By.cssSelector("#nav > li:nth-child(4) a")).click();
But unfortunately I could not select the second element of it -> Karriere -> Ihr neuer Beruf
I try this but it dosnt work
driver.findElement(By.cssSelector("#nav > li:nth-child(4) li:nth-child(2) a")).click();
What is the error?
Try
driver.findElement(By.cssSelector(".navMenu a")).click();
This finds the elements with class navMenu, then selects the first child that is an html <a> element (aka your link) and clicks it.
Css selector doesnot support cross platform browsers, you have to use xpath.
if you want to select "Wie ich Sie unterstütze"
then use
element= driver.findelement(By.xpath("//ul[#class='clearfix']/li/ul/li[1]/div/a"));
element.click();
if you want to select "Wie ich Sie berate"
element= driver.findelement(By.xpath("//ul[#class='clearfix']/li/ul/li[1]/div/a"));
element.click();
Related
I'm trying to wrap my list with div, here is my Thymeleaf structure:
<th:block th:if="${predStatus.namePrem}">
<div class="Holder">
<ul id="holder" class="price-table__info">
<li>
<p class="exam1" th:text="#{exam2}"></p>
</li>
</ul>
</th:block>
<ul id="holder" class="price-table__info">
<li>
<p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
<p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
</li>
</ul>
</div>
What I trying to achieve is this structure
<div class="Holder">
<ul id="holder" class="price-table__info">
<li>
<p class="top">Title 1</p>
</li>
</ul>
<ul id="holder" class="price-table__info">
<li>
<p class="top">Title 2</p>
</li>
</ul>
</div>
Can anybody help me?
Can you try the following?
Just put the condition in the div
<div class="Holder" th:if="${predStatus.namePrem}">
<ul id="holder" class="price-table__info">
<li>
<p class="exam1" th:text="#{exam2}"></p>
</li>
</ul>
<ul id="holder" class="price-table__info">
<li>
<p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
<p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
</li>
</ul>
</div>
In Selenium, i Was Automating, But in That Drop down Menu i need to Click on The Element Which is Hidden Down.
It scrolls whole page down i want only specific dropdown scrolled down not page.
HTML Code For The Full Div :
<ul class="dropdown-menu drop_Loc" role="menu" style="display: none;" xpath="1"> <li>
<a href="carle_place.aspx" target="_self">
<span class="icon-fort icon-left" style="font-size: 40px;padding: 0px 8px;"></span> <span class="nav_icon_heading">Carle Place</span>
</a>
</li>
<li>
<a href="Selling-a-car-cutler-bay.aspx" target="_self">
<span class="icon2-cutlerbay icon-left" style="font-size: 24px;padding: 7px 8px;"></span>
<span class="nav_icon_heading">Cutler Bay</span>
</a>
</li>
<li>
<a href="Daytona.aspx" target="_self">
<span class="icon-daytona icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Daytona</span>
</a>
</li>
<li>
<a href="Fort_lauderdale.aspx" target="_self">
<span class="icon-fort icon-left" style="font-size: 40px;padding: 0 8px"></span> <span class="nav_icon_heading">Fort Lauderdale</span>
</a>
</li>
<li>
<a href="Sell-my-car-longwood.aspx" target="_self">
<span class="icon-orlando icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Longwood</span>
</a>
</li>
<li>
<a href="Melbourne.aspx" target="_self">
<span class="icon-melbourne icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Melbourne</span>
</a>
</li>
<li>
<a href="miami.aspx" target="_self">
<span class="icon-miami icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Miami</span>
</a>
</li>
<li>
<a href="Orlando.aspx" target="_self">
<span class="icon-orlando icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Orlando</span>
</a>
</li>
<li>
<a href="St_James.aspx" target="_self">
<span class="icon-daytona icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">St James</span>
</a>
</li>
<li>
<a href="Treasure_coast.aspx" target="_self">
<span class="icon-treasure_coast icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Stuart</span>
</a>
</li>
<li>
<a href="Tampa.aspx" target="_self">
<span class="icon-treasure_coast icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Tampa</span>
</a>
</li>
<li>
<a id="last-child-location" href="West_palm_beach.aspx" target="_self">
<span class="icon-palm_beach icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">West Palm Beach</span>
</a>
</li>
</ul>
i Tried With These Code,
By Stuart = By.xpath("/html[1]/body[1]/div[1]/nav[1]/div[1]/div[2]/ul[1]/li[2]/ul[1]/li[10]/a[1]/span[2]");
JavascriptExecutor je = (JavascriptExecutor) driver;
WebElement element = driver.findElement(Stuart);
je.executeScript("arguments[0].scrollIntoView(true);",element);
Thread.sleep(4000);
The Above Code is Working,But it is Scrolling The Dropdown aswell as Webpage Also.
Please Sort Me out This Guys.
Your code is right i didn't find any problem in your code it should scroll till that element is visible.
Don't use absolute xpath, it's good practice to always use dynamic xpaths.
Please try below code,
browser.executeScript('window.scrollTo(0,0);').then(function () {
page.saveButton.click();
})
You can also use action class of selenium for scroll,
for that you will need to import it.
import org.openqa.selenium.interactions.Actions;
WebElement menuItem = Driver.findElement(menuItemPath);
Actions action = new Actions(Driver);
action.moveToElement(menuItem);
action.perform();
menuItem.click();
In the image below you will see that my navbar is at the top of the page however it is slightly covering the heading that is supposed to be beneath it. How do I fix this?
My code for the navigation bar:
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<a class="navbar-brand" href="userProfile1">
<img alt="Brand"">
</a>
</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">
<li>Profile</li>
<li class="dropdown">
Menu <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
I added the following to my CSS file but it didn't change anything:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
You can always give your heading a DIV tag and give that div a margin-top.
CSS:
.heading-text {
margin-top: 100px;
}
HTML:
<div class="heading-text">
<h1>My Title</h1>
</div>
Let's say, I want to achieve this with Struts iterator:
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client1.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client4.png"></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client4.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client1.png"></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client1.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client4.png"></li>
</ul>
</div>
</div>
</div>
This is what I have tried:
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" begin="0" end="3">
<li class="span3"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" begin="3" end="7">
<li class="span3"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></li>
</ul>
</div>
</div>
</div>
I want my struts iterator to create item classes with 4 list items each. Once a class is filled with 4 list items, the iterator must create another item class. How can I achieve this?
Thank you
You can achieve this pretty easily by using the module operator (as described in this answer):
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" status="ctr" >
<li class="span3">
<a href="#">
<img src="<s:property value='imageUrlPrefix' />
<s:property value='imageName'>" />
</a>
</li>
<s:if test="%{#ctr.count % 4 == 0}" >
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
</s:if>
</s:iterator>
</ul>
</div>
</div>
</div>
Note: to set the active class to the right item, use an <s:if> inside the iterator, and another one outside to check if it's the first element to be active.
I need to write script for drop-down boxes. There are two dropdown elements on same screen and both the dropdown boxes have got similar class names (Dropdown boxes are of search and select kind),and there is no unique-id for any element.
So the script works fine to select element from first dropdown, But it fails when it supposed to perform same for second dropdown.
Do reply
Regards
<div class="title-edit-form" id="49156080-2097-ea0f">
<div class="control-group required">
<label class="control-label">Title
</label>
<div class="controls row-fluid">
<div class="select2-container span12 select2-container-active select2-dropdown-open" id="s2id_title">
<a href="#" onclick="return false;" class="select2-choice" tabindex="-1">
<span>de</span>
<abbr class="select2-search-choice-close" style="display:none;">
</abbr>
<div>
<b></b>
</div>
</a>
</div>
<input class="span12" id="title" type="hidden" style="display: none;" value="-1">
</div>
</div>
<div class="select2-drop select2-drop-active" style="display: block; top: 177px; left: 536px; width: 530px;">
<div class="select2-search">
<input type="text" autocomplete="off" class="select2-input select2-focused" tabindex="-1" style="">
</div>
<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-new">
<div class="select2-result-label">
<span class="select2-match">de</span>
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match">De</span>
"an"
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
<div class="select2-result-label">
"Stu"
<span class="select2-match">de</span>
"nt"
</div>`enter code here`
</li>
</ul>
</div>
the best way is to use cssSelector() for that kind of things, and especially the nth-child() function from cssSelector().
Exemple :
// gets the first div that contains school as a class value.
driver.findElement(By.cssSelector("div.school:nth-child(1)"));
More about cssSelector()
exemple wokring here -> JSfiddle