We Keep Coding

Locating elements in <li> using selenium webdriver with java

I need to locate each item and click on it.
I tired this:
List<WebElement> allTournaments = driver.findElements(By.xpath("//*[#id='main-section']/div/div/section/div[1]/ul/li/div/div[1]/div"));
for (WebElement tournament : allTournaments) {
tournament.click();
}
But got the error "element not visible"
The xpath of first element is //[#id='main-section']/div/div/section/div1/ul/li1/div/div1/div
xpath of second element is //[#id='main-section']/div/div/section/div1/ul/li[2]/div/div1/div
like wise..
can anybody help..?
HTML:
<div class="header-toggle-area">
<div class="header-notification-area text-right ng-scope" ng-controller="notificationController">
</header>
<!--HEADER ENDS-->
<div class="content-wrap" style="padding-top: 60px;">
<aside id="main-sidebar">
<!--MAIN SIDEBAR ENDS-->
<main id="main-section">
<div class="main-content">
<div class="ng-scope" ng-controller="NewTournamentsController as tournaments">
<header class="member-title dt-title-main">
<section class="dashboard-tournaments-listing">
<div class="" ng-show="tournaments.Page==1">
<ul class="row dashboard-listing">
<!-- ngRepeat: running in tournaments.runningTournaments -->
<li class="dashboard-listing-items ng-scope" ng-repeat="running in tournaments.runningTournaments" style="">
<div class="dtslider-block">
<div class="dtslider-content">
<img ng-src="../../category/categoryDefault.jpg" alt="slider" src="../../category/categoryDefault.jpg"/>
<div class="hover-contents">
<div class="hc-timer">
<p> Tournament ends in </p>
<div class="hct-ticker ng-binding"> 04:30 - 26/11/16 </div>
</div>
<div class="hc-details">
<div class="hcd-block ng-hide" ng-show="running.JoinedPlayers>0">
<ul class="hc-icons">
</div>
</div>
</div>

Check if each element is visible and clickable as follows:
for (WebElement tournament : allTournaments) {
if (tournament.isDisplayed()
&& ExpectedConditions.elementToBeClickable(tournament).equals(true)) {
tournament.click();
}
}

java calendar on Modal Bootstrap

Hi i'm using modal Bootstrap and a calendar inside but when i click the calendar button the calendar appears behind and it must be over the modal. here's the picture.
this is the java code:
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function() {
myCal1 = new Calendar({ fcap1: 'd/m/Y' }, { blocked: ['12-15,20-22,25 2-5 2008'], direction: 0, tweak: { x: 6, y: 0 } });
myCal2 = new Calendar({ fcap2: 'd/m/Y' }, { blocked: ['12-15,20-22,25 2-5 2008'], direction: 0, tweak: { x: 6, y: 0 } });
});
//]]>
</script>
and this is the Modal Bootstrap
<div class="container">
<div class="modal fade" id="modal-fechacap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Asignar fechas de captura</h4>
</div>
<div class="modal-body">
<input type="hidden" name="horario" id="horario" value=""/>
<p>
<label>Materia:</label>
<input type="text" name="materia" id="materia" value="" size='50' maxlength='80' readonly/>
</p>
<p>
<label>Unidad:</label>
<input type="text" name="unidad" id="unidad" value="" size='5' maxlength='2' readonly/>
</p>
<p>
<label>fecha inicio:</label>
<input type="text" name="fcap1" id="fcap1"/>
<label>fecha fin:</label>
<input type="text" name="fcap2" id="fcap2"/>
</p>
</div>
<div class="modal-footer">
<div style="margin-left:10px">
<button type="button" class="fechacap btn btn-success btn-sm" id="fechacap">
<i class="glyphicon glyphicon-pencil"></i> Asignar fechas de captura
</button>
<a href="" class="btn btn-danger btn-sm" data-dismiss="modal">
<i class="glyphicon glyphicon-ban-circle"></i> Cancelar </a>
</div>
</div>
</div>
</div>
</div>
</div>
All suggestions are welcome and appreciated, thanks.
I updated this code in the calendar.js and worked great!
'styles': { left: '-1000px', opacity: 0, position: 'absolute', top: '-1000px', zIndex: 999999 }

You can try writing some CSS to target the calendar and set it's z-index to be larger than that of the modal. Check what the z-index is for the modal with a web inspector and make the calendar's z-index larger. For example:
#calendar {
z-index: 1000;
}

Vaadin : CustomLayout don't generate <div> content

I'm using Vaadin 7. When I try to add html content to CustomLayout it does not generate a paragraph inside a div element. Here is the input :
<div style="margin-top: 10px; padding-left: 50px;" class="col-lg-10">
<div class="bs-component">
<ul class="nav nav-pills">
<li class="active"><a href="#Myprofile" class="active"
data-toggle="tab">Profile</a></li>
<li class="">setting</li>
<li class="">Tasks</li>
</ul>
<div class="tabbable">
<div class="tab-content">
<div id="Myprofile" location="Myprofile" class="tab-pane active"></div>
<div id="setting" location="setting" class="tab-pane">
<p>My paragraph</p>
</div>
</div>
</div>
</div>
In java I use this :
String html; //This var contain my input
InputStream is = new ByteArrayInputStream(html.getBytes());
CustomLayout custom = null;
try {
custom = new CustomLayout(is);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Finaly I add the customLayout to my mainLayout. When I run the application I get this output :
<div style="margin-top: 10px; padding-left: 50px;" class="col-lg-10">
<div class="bs-component">
<ul class="nav nav-pills">
<li class="active"><a href="#Myprofile" class="active"
data-toggle="tab">Profile</a></li>
<li class="">setting</li>
<li class="">Tasks</li>
</ul>
<div class="tabbable">
<div class="tab-content">
<div id="Myprofile" location="Myprofile" class="tab-pane active"></div>
<div id="setting" location="setting" class="tab-pane">
</div>
</div>
</div>
</div>
My paragraph inside div with id=setting was not generated by Vaadin. Any Ideas to fix this problem ?

I found the source of the problem. I removed the location="setting" part in the div element and it worked. I don't know why It does that. Probably because CustomLayout when generating the html looks for elements to put in the location, if it does not find one it clean all the element content.

Don't you need the location="setting" attribute? Don't you insert a component for that attribute?

Jsoup getElementsByClass gives size 0 Elements

I'm trying to write a program that fetches weather information from weather.com by using JSoup. This is what I have so far:
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import org.jsoup.Jsoup;
public class WeatherComHandler {
private Element ForeCastDiv;
public static void main(String[] args) {
WeatherComHandler wch = new WeatherComHandler("http://www.weather.com/weather/today/Brussels+BEXX0005:1:BE");
wch.getTodaysForeCast();
}
public WeatherComHandler(String url) {
getForeCastDiv(url);
}
private void getForeCastDiv(String url) {
try {
Document doc = Jsoup.connect(url).get();
ForeCastDiv = doc.getElementById("wx-forecast-container");
} catch(Exception e) {
e.getStackTrace();
}
}
public void getTodaysForeCast() {
System.out.println(ForeCastDiv.toString());
System.out.println(ForeCastDiv.hasClass("wx-data-part wx-first"));
Elements todaysElements = ForeCastDiv.getElementsByClass("wx-data-part wx-first");
System.out.println(todaysElements.size());
}
}
This is the output:
<div id="wx-forecast-container">
<div class="wx-today wx-module wx-grid3of6">
<div class="wx-title-container">
<h2 class="wx-title"><img src="http://i.imwx.com/common/My.png" /> Forecast for Today</h2>
<div class="wx-updated">
Updated: Oct 28, 5:45pm Local Time
</div>
<div class="wx-promo-links wx-cond wx-severe wx-severe-0">
<ul class="wx-links">
<li class="wx-icon wx-cond wx-desktop"> <a class="wx-icon wx-cond wx-desktop" href="/apps/desktop-weather" location="" from="today_promo_1" title="Weather on my Desktop">Desktop App</a> </li>
</ul>
</div>
</div>
<div class="wx-weather-details">
<div class="wx-timepart-title wx-first">
Right Now
<div class="wx-module wx-grid1of6 wx-weather wx-love-module wx-cond-bg">
<div class="wx-module-inner">
<div class="wx-icon wx-social wx-balloon-wt-lt wx-clickable wx-love-ugh" data-good="true" data-share-trx="" data-share-icon="http://s.imwx.com/img/common/social/lmw-love.jpg" title="Love My Weather" data-share-desc="It's 55°F, Clear">
<div class="wx-icon wx-social wx-heart"></div>
<h4 data-share-title="Love! Right now in Brussels, Belgium"></h4>
</div>
<div class="wx-icon wx-social wx-balloon-wt-rt wx-clickable wx-love-ugh" data-good="false" data-share-trx="" data-share-icon="http://s.imwx.com/img/common/social/lmw-ugg.jpg" title="Don't Love My Weather" data-share-desc="It's 55°F, Clear">
<h4 data-share-title="Ugh! Right now in Brussels, Belgium"></h4>
</div>
</div>
</div>
</div>
<div class="wx-timepart-title">
Earlier Today
</div>
<div class="wx-timepart-title">
Tonight
</div>
<div class="wx-data-part wx-first">
<img src="http://s.imwx.com/v.20131006.214956/img/wxicon/120/31.png" height="120" width="120" alt="Clear" class="wx-weather-icon" />
</div>
<div class="wx-data-part">
<img src="http://s.imwx.com/v.20131006.214956/img/wxicon/120/34.png" height="120" width="120" alt="Fair / Windy" class="wx-weather-icon" />
</div>
<div class="wx-data-part">
<img src="http://s.imwx.com/v.20131006.214956/img/wxicon/120/29.png" height="120" width="120" alt="Partly Cloudy" class="wx-weather-icon" />
</div>
<div class="wx-data-part wx-first">
<div class="wx-temperature">
<span itemprop="temperature-fahrenheit">55</span>
<span class="wx-degrees">°<span class="wx-unit">F</span></span>
</div>
<div class="wx-temperature-label">
FEELS LIKE
<span itemprop="feels-like-temperature-fahrenheit">55</span>°
</div>
</div>
<div class="wx-data-part">
<div class="wx-temperature">
62
<span class="wx-degrees">°</span>
</div>
<div class="wx-temperature-label">
HIGH AT 11:45 AM
</div>
</div>
<div class="wx-data-part">
<div class="wx-temperature">
47
<span class="wx-degrees">°</span>
</div>
<div class="wx-temperature-label">
LOW
</div>
</div>
<div class="wx-data-part wx-first">
<div class="wx-phrase ">
Clear
</div>
<div class="wx-obs-qualifier ">
<span class="wx-hide" itemprop="observation-qualifier">OQ1190</span>
<span class="wx-hide" itemprop="observation-qualifier-severity">2</span>
<span itemprop="observation-qualifier-phrase">Locations nearby are reporting rain with wind.</span>
</div>
</div>
<div class="wx-data-part">
<div class="wx-phrase ">
Fair / Windy
</div>
</div>
<div class="wx-data-part">
<div class="wx-phrase ">
Partly Cloudy
</div>
</div>
<div class="wx-data-part wx-first">
<h6 class="wx-label">Past 24-hr Precip:</h6>
<div class="wx-data">
0.34 in
<span class="wx-estimated">(est.)</span>
</div>
</div>
<div class="wx-data-part">
<h6 class="wx-label"></h6>
<div class="wx-data"></div>
</div>
<div class="wx-data-part">
<h6 class="wx-label">Chance of <span class="wx-firstletter">rain</span></h6>
<div class="wx-data">
<span class="wx-icon wx-raindrop"></span>20%
</div>
</div>
<div class="wx-collapsible">
<div class="wx-data-part wx-first wx-wind">
<h6 class="wx-label">Wind:</h6>
<div class="wx-data">
<div class="wx-icon wx-dir-arrow-sm wind-dir-SW"></div>
<div class="wx-wind-label">
SW at 17 mph
</div>
</div>
</div>
<div class="wx-data-part wx-wind">
<h6 class="wx-label"></h6>
<div class="wx-data">
<div class="wx-wind-label"></div>
</div>
</div>
<div class="wx-data-part wx-wind">
<h6 class="wx-label">Wind:</h6>
<div class="wx-data">
<div class="wx-icon wx-dir-arrow-sm wind-dir-SW"></div>
<div class="wx-wind-label">
SW at 18 mph
</div>
</div>
</div>
<div class="wx-data-part wx-first">
<h6 class="wx-label">Humidity:</h6>
<div class="wx-data">
76%
</div>
</div>
<div class="wx-data-part">
<h6 class="wx-label"></h6>
<div class="wx-data"></div>
</div>
<div class="wx-data-part">
<h6 class="wx-label">Humidity:</h6>
<div class="wx-data">
82%
</div>
</div>
<div class="wx-data-part wx-first">
<h6 class="wx-label">UV Index:</h6>
<div class="wx-data">
0 - Low
</div>
</div>
<div class="wx-data-part">
<h6 class="wx-label"></h6>
<div class="wx-data"></div>
</div>
<div class="wx-data-part"></div>
<div class="wx-data-part wx-first ">
<h6 class="wx-label"></h6>
<p class="wx-text"></p>
</div>
<div class="wx-data-part ">
<h6 class="wx-label"></h6>
<p class="wx-text"></p>
</div>
<div class="wx-data-part ">
<h6 class="wx-label">Tonight:</h6>
<p class="wx-text">Partly cloudy skies. Low 47F. Winds SW at 15 to 25 mph.</p>
</div>
<div class="wx-astro-neighbor">
<div class="wx-data-part wx-first">
<h6 class="wx-label">Pressure:</h6>
<div class="wx-data">
<span itemprop="barometric-pressure-incheshg"> 29.59 in </span>
<span class="wx-icon wx-dir-arrow-sm wx-pressure-steady"></span>
</div>
</div>
<div class="wx-data-part wx-first wx-dewpoint">
<h6 class="wx-label">Dew Point: <span class="wx-icon wx-long wx-info"> <i>Humidity becomes more noticeable as the dew point rises above 60°F. Readings above 75°F can feel stifling.</i> </span> </h6>
<div class="wx-data">
47°
</div>
</div>
<div class="wx-data-part wx-first">
<h6 class="wx-label">Visibility:</h6>
<div class="wx-data">
6.0 mi
</div>
</div>
</div>
<div class="wx-astro-details">
<h3 class="wx-astro-title">Sun & Moon</h3>
<dl class="wx-first">
<dt>
Sunrise:
</dt>
<dd>
7:28 am
</dd>
<dt>
Sunset:
</dt>
<dd>
5:25 pm
</dd>
</dl>
<dl>
<dt>
Moonrise:
</dt>
<dd>
12:27 am
</dd>
<dt>
Moonset:
</dt>
<dd>
2:32 pm
</dd>
</dl>
<dl class="wx-moonphase-container">
<dt>
Moonphase:
</dt>
<dd>
<div class="wx-icon wx-moonphase wx-moon-23"></div>
<div class="wx-moonphase-label">
Waning Crescent
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="wx-toggle-collapsible-container">
<div class="wx-toggle-collapsible wx-clickable">
<div class="wx-control wx-expand-control" tracktype="action" trackstr="today_rightnow_showmore">
<span class="wx-icon wx-arrow wx-mb-lg-dn"></span>Open Weather Details
</div>
<div class="wx-control wx-collapse-control wx-hide" tracktype="action" trackstr="today_rightnow_showless">
<span class="wx-icon wx-arrow wx-mb-lg-up"></span>Close Weather Details
</div>
</div>
</div>
<div class="wx-pagination-linkers">
<div class="wx-next-linker">
<ul class="wx-links">
<li class=""> <a class="" href="/weather/hourbyhour/graph/Brussels+BEXX0005:1:BE" location="" from="today_rightnow-Today_tempGraph_1" title="">Hourly Forecast</a> </li>
</ul>
</div>
</div>
</div>
<script>$("#wx-icon wx-long wx-info").attr('title','This is the hover-over text');</script>
<div id="wunderground-lightbox" class="wx-dialog">
<div class="wx-close" title="Close">
<div class="wx-icon"></div>
</div>
</div>
<div class="wx-combinedPromo wx-module wx-grid3of6">
<div class="wx-commuter-promo" data-classname="wx-grid-2" from="today-commuterpromo" data-layers="traffic,weather" data-locationinus="false" data-backgroundimageurl="" data-location-zoom="10" data-location-latitude="50.85045" data-location-longitude="4.34878">
<div class="wx-commute-promo-callout-title">
<div class="wx-titleIconHolder">
<img class="wx-titleIcon" src="http://s.imwx.com/img/module/TrafficCams_16x16.png" />
</div>
<div class="wx-titleText">
NEW! Traffic & Commuter Forecast
</div>
</div>
</div>
</div>
<div class="wx-clear"></div>
<div class="wx-scroll-tracking wx-scroll-pres" data-modulecode="ScrollTracking1_Today" data-location="BEXX0005:1:BE" data-groupname="weblocal"></div>
<div class="wx-free-title ">
<h3>Latest Stories</h3>
</div>
<div id="wx-rightnowsecond-container">
<div id="wx-rightnow-container">
<div class="wx-module wx-mod1 wx-corsican wx-1x155M wx-render-mode" id="mod_4" data-vr-zone="today_beta_Media_top2">
<div class="wx-inner" data-vr-contentbox=""></div>
</div>
<div class="wx-module wx-mod1 wx-corsican wx-1x155M wx-render-mode" id="mod_5" data-vr-zone="today_beta_Media_top1">
<div class="wx-inner" data-vr-contentbox=""></div>
</div>
</div>
<div class="wx-module wx-trending-stories wx-tabbed-content wx-grid2of6">
<div class="wx-inner">
<h2 class="wx-title">Most Popular</h2>
<ul class="wx-tabs" data-vr-zone="Most Popular">
<li class="wx-tab wx-active" data-tab="today" data-vr-contentbox="">Today</li>
<li class="wx-tab wx-clickable" data-tab="this_week" data-vr-contentbox="">This Week</li>
</ul>
<ul class="wx-tab-content" data-tab="today" data-vr-zone="Most Popular">
<li data-vr-contentbox="">Superstorm Sandy: Then and Now (EXCLUSIVE PHOTOS)</li>
<li data-vr-contentbox="">Eerie Nighttime Shots of Abandoned America</li>
<li data-vr-contentbox="">Astounding Fall Photos That Will Make You Say 'Wow!'</li>
<li data-vr-contentbox="">Nightmares Fear Factory: Terrified Reactions at Haunted House (PHOTOS)</li>
<li data-vr-contentbox="">The 15 Worst U.S. Cities for Asthma</li>
<li data-vr-contentbox="">Shocking End to Shark Attack <span class="wx-icon wx-video wx-trending-video"></span></li>
<li data-vr-contentbox="">Gigantic Hornets Are Breeding <span class="wx-icon wx-video wx-trending-video"></span></li>
<li data-vr-contentbox="">18-Foot WHAT? <span class="wx-icon wx-video wx-trending-video"></span></li>
</ul>
<ul class="wx-tab-content" data-tab="this_week" style="display:none;" data-vr-zone="Most Popular">
<li data-vr-contentbox="">Superstorm Sandy: Then and Now (EXCLUSIVE PHOTOS)</li>
<li data-vr-contentbox="">Nightmares Fear Factory: Terrified Reactions at Haunted House (PHOTOS)</li>
<li data-vr-contentbox="">Eerie Nighttime Shots of Abandoned America</li>
<li data-vr-contentbox="">8 Deadly Venomous Creatures and Those Who've Survived (PHOTOS)</li>
<li data-vr-contentbox="">Astounding Fall Photos That Will Make You Say 'Wow!'</li>
</ul>
</div>
</div>
</div>
<div class="wx-map wx-cc-map wx-grid3of6 wx-module pagelet " data-severelocation="false" data-location="BEXX0005" data-location-type="1" data-overlay="" data-zoom="" data-tropical="" data-mapsize="3" data-fragid="frag_newccMap_166739" data-modulecode="beta_CCMap" data-pageid="62288">
</div>
</div>
false
0
The problem is getTodaysForeCast() keeps saying that the size of todaysElements is 0, which it shouldn't be. Could anyone explain me why this is happening or what I'm doing wrong?
thanks in advance.

Jsoup will not accept two combined classes in the getElementsByClass method. Try something like:
Elements todaysElements = ForeCastDiv.getElementsByAttributeValueContaining("class", "wx-data-part wx-first");

You're passing two separate class names (separated by a space) to both hasClass() and getElementsByClass(), both of which can only handle one class at a time.
Try using select() instead. It allows you to use complex CSS selectors to find elements, like this:
ForeCastDiv.select(".wx-data-part.wx-first")

How to select a <a href> javascript button using selenium java

I'm trying to click the "Add to Shopping Bag" button by utilising selenium (Java) interface on my AUT, but I'm unable to do so.
My script as follows:
public void addToBag()
{
WebElement AddToBag = null;
List<WebElement> SizeList = driver.findElement(By.className("selection-wrapper")).findElements(By.className("step-wrapper"));
for(WebElement e : SizeList)
{
if (e.getText() == " ")
{
if(e.findElement(By.tagName("span")).findElement(By.tagName("a")).getAttribute("href").contains("javascript:AddToCart()"))
{
AddToBag = e.findElement(By.tagName("span")).findElement(By.tagName("a"));
AddToBag.click();
break;
}
}
}
Thread.sleep(2000);
}
Source code:
<div class="subitem-steps span-12 last" style="z-index: 890;">`
<div class="item-styles span-12 last" style="z-index: 885;">`
<div class="selection-wrapper" style="z-index: 870;">`
<div class="step-wrapper" style="z-index: 869;">
<div class="step-wrapper" style="z-index: 863;">
<div class="step-wrapper" style="z-index: 857;">
<div class="step-wrapper" style="z-index: 851;">
<div class="step step4" style="z-index: 850;"/>
<span class="ui-btn-grey btn-add-to-cart btn-add-to-cart-sel">
<a href="javascript:AddToCart()" onclick="s_objectID="javascript:AddToCart()_1";return this.s_oc?this.s_oc(e):true"/>
</span>
<div class="external-links" style="z-index: 849;">
</div>
</div>
</div>`