We Keep Coding

Not possible to locate an element using selenium webdriver with java

I am automating an application using selenium webdriver with java. I'm facing the issue that cannot locate an element in a page.
HTML Code:
<main id="main-section">
<div class="main-content">
<div class="ng-scope" ng-controller="EventsController as eventcntrlr">
<div class="full-banner">
<section class="dashboard-tournaments">
<div class="" ng-show="eventcntrlr.noTournamentsFound==2" style="">
<div class="dt-title" ng-show="eventcntrlr.upcomingTournamentsCount !=0" style="">
<div class="dtslider" ng-show="eventcntrlr.upcomingTournamentsCount !=0" style="">
<div class="bx-wrapper" style="max-width: 810px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;">
<ul class="bxslider upcomingSliderClass no-slide" ng-class="{'no-slide':eventcntrlr.upcomingTournamentsCount<eventcntrlr.SlideCount}" style="display: block; width: 415%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<!-- ngRepeat: allupcoming in eventcntrlr.upcomingTournaments -->
<li class="upcomingSpanHeight ng-scope" ng-repeat="allupcoming in eventcntrlr.upcomingTournaments" style="float: left; list-style: outside none none; position: relative; width: 400px; margin-right: 10px;">
<span class="ratio-width upcoming-spanWidth" style="height: 205px;"/>
<div class="dtslider-block">
<div class`enter code here`="dtslider-content">
<img ng-src="../../category/music.jpg" alt="slienter code hereder" src="../../category/music.jpg"/>
<div class="hover-contents">
Code:
public void playTournament() throws InterruptedException, BiffException,IOException {
int successRowNumber = 7;
WebElement login = driver.findElement(By.xpath("//*[#id='main-section']/div/div/section[2]/div[1]/ul/li[1]"));
login.click();
Thread.sleep(1000);
WebElement username = driver.findElement(By.xpath("//*[#id='emailtxt']"));
username.clear();
username.sendKeys(getCellContent(0, successRowNumber));
Thread.sleep(1000);
WebElement password =driver.findElement(By.xpath("//*[#id='passwordtxt']");
password.clear();
password.sendKeys(getCellContent(1, successRowNumber));
Thread.sleep(1000);
WebElement continueButton = driver.findElement(By.xpath("//*[#id='main-section']/div/div/section[2]/div[3]/a/span ");
continueButton.click();
Thread.sleep(4000);
WebElement events = driver.findElement(By.xpath("//*[#id='events_li']/a");
events.click();
Thread.sleep(2000);
input(properties.getProperty("VAR_GROUPPINDETAILS"));
int successfulTournamentCreationRowNumber = 12;
WebElement tournamentSearch = driver.findElement(By.xpath("//*[#id='ContentPlaceHolder1_searchname']");
tournamentSearch.sendKeys(getCellContent(1, successfulTournamentCreationRowNumber));
Thread.sleep(2000);
WebElement findEvent = driver.findElement(By.xpath("//*[#id='main-section']/div/div/div/section[2]/div/div/div[5]/a");
findEvent.click();
Thread.sleep(2000);
WebElement Tournaments = driver.findElement(By.xpath("//*[#id='main-section']/div/div/section/div[1]/div[2]/div[1]/div[1]/ul/li[1]/div/div[1]/div");
Tournaments.click();
Got the error msg: org.openqa.selenium.ElementNotVisibleException: element not visible.
Issue is for the element "Tournaments "

Scrolling PDFs in iOS with iFrame

I'm trying to scroll this pdf: ifcharts.ml/KSAN.html
I've got this so far:
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<div>
<iframe class="js/scroll-wrapper.js" src="http://flightaware.com/resources/airport/SAN/APD/AIRPORT+DIAGRAM/pdf" width="600" height="700"></iframe>
<iframe class="js/scroll-wrapper.js" src="https://flightaware.com/resources/airport/KSAN/DP/all/pdf" width="600" height="700"></iframe>
</div>
<p>Approach</p>
<div>
<iframe class="js/scroll-wrapper.js" src="https://flightaware.com/resources/airport/KSAN/STAR/all/pdf" width="600" height="700"></iframe>
<iframe class="js/scroll-wrapper.js" src="https://flightaware.com/resources/airport/KSAN/IAP/all/pdf" width="600" height="700"></iframe>
</div>
</div>
</div>
</div>
</section>
The class="js/scroll-wrapper.js" leads to this:
.scroll-wrapper {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-wrapper iframe {
height: 100%;
width: 100%;
}
That is what the the script is meant to run, however it still is not scrolling on iOS.
I also have a problem where it is downloading the code on Android. How can I set it now to download?
Thanks

how to access static resources on Spring Security application using annotations?

I'm trying to access static content on a login page jsp and I'm failing to do so.
The security config method I'm using is:
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/admin/**","/images/**")
.access("hasRole('ADMIN')").and().formLogin()
.loginPage("/user/login").failureUrl("/login?error")
.usernameParameter("username")
.passwordParameter("password")
.and().logout().logoutSuccessUrl("/login?logout")
.and().csrf()
.and().exceptionHandling().accessDeniedPage("/403");
}
The login page that fails to load images and static resources is:
<%#include file="../include/include.jsp"%>
<%#include file="../decorators/tbs_imports.jsp"%>
<html>
<head>
<title><s:message code="title"></s:message></title>
<style>
html,body {
background-color: #eee;
}
body {
padding-top: 5px;
}
.content {
width: 300px;
}
/* The white background content wrapper */
.container>.content {
background-color: rgba(113, 121, 225, .15);
padding: 15px;
margin: 0 -20px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.login-form {
margin-left: 70px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.login.j_username.focus();
}
function changeFlag() {
var lang = $("#langDrop option:selected").text();
if (lang == 'Portugues') {
$('#flag').attr('src', '../images/br.png');
}
if (lang == 'English') {
$('#flag').attr('src', '../images/en.png');
}
if (lang == 'Espanol') {
$('#flag').attr('src', '../images/es.png');
}
}
</script>
</head>
<body>
<div style="display: block; margin-left: auto; margin-right: auto"
class="container">
<div style="padding-bottom: 5px">
<img
style="padding-top: 10px; display: block; margin-left: auto; margin-right: auto"
src="${pageContext.request.contextPath}/images/logo_pims_scf_grande.png" />
</div>
<c:if test="${not empty duplicated_user}">
<div
style="display: block; margin-left: auto; margin-right: auto; text-align: center"
class="content alert alert-error">
<strong><s:message code="login-duplicate-user" /></strong>
</div>
</c:if>
<br /> <br />
<c:if test="${not empty session}">
<div
style="display: block; margin-left: auto; margin-right: auto; text-align: center"
class="content alert alert-error">
<strong><s:message code="session-maxLimitReached" /></strong>
</div>
</c:if>
<c:if test="${not empty corrupted}">
<div
style="display: block; margin-left: auto; margin-right: auto; text-align: center"
class="content alert alert-error">
<strong><s:message
code="session-value-corrupted-in-the-database" /></strong>
</div>
</c:if>
<c:if test="${empty session}">
<c:if test="${empty corrupted}">
<div style="display: block; margin-left: auto; margin-right: auto"
class="content">
<div class="row">
<div class="login-form">
<h4 style="padding-bottom: 10px">Login</h4>
<form id="j_acegi_security_check" onsubmit="return true;"
name="login"
action="${pageContext.request.contextPath}/j_acegi_security_check"
method="POST">
<fieldset>
<div class="clearfix">
<input style="height: 25px;" id="username" name="j_username"
type="text" placeholder="Username">
</div>
<div class="clearfix">
<input style="height: 25px;" name="j_password" id="password"
type="password" placeholder="Password">
</div>
<br>
<button class="btn btn-primary" type="submit">
<s:message code="join" />
</button>
</fieldset>
</form>
</div>
</div>
</div>
</c:if>
</c:if>
</div>
</body>
</html>
The WebContent folder structure is:
WebContent
- css
- images
- js
- META-INF
- WEB-INF
- classes
- jsp
- lib
- tags
- index.jsp
- web.xml
Since this application is annotations driven, the web.xml file is blank. And index.jsp redirects to /jsp/user/login.jsp.
Any ideas how to solve this issue?
Thanks in advance.

Confusion with Remember username codes(javascript)?

I started learning javascript and i have a question with a webpage that i created. The webpage is a login page that shows some tableau reports when logged in. I need to create a remember me checkbox just like any other website like gmail or salesforce. I have copy pasted the codes below.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%
ServletContext context = getServletContext();
String app = context.getInitParameter("appName");
String errorMessage = "";
if ( session.getAttribute("error-message")!=null){
errorMessage = (String) session.getAttribute("error-message");
}
%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title><%=app%> - Please login</title>
<link href="styles/bootstrap-theme.min.css" rel="stylesheet">
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/sidebars.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<style type='text/css' media='screen'>
body {
font-family: Tahoma;
font-size: 12px !important;
padding-top: 40px;
padding-bottom: 40px;
background-color: #fff;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.navbar{
border-color: #ccc;
}
.alert-warning{
margin-top: 15px;
}
.validation-summary-errors{
font-family: Tahoma !important;
font-size: 12px !important;
color: #b94a48;
margin-top: 35px;
margin-bottom: -15px;
}
.col-md-8{
padding-left: 5px;
}
/* .navbar-inverse{
border-color: #ccc;
background: #ddf0f8; Old browsers
background: -moz-linear-gradient(top, #ddf0f8 0%, #ffffff 63%); FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddf0f8), color-stop(63%,#ffffff)); Chrome,Safari4+
background: -webkit-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Opera 11.10+
background: -ms-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); IE10+
background: linear-gradient(to bottom, #ddf0f8 0%,#ffffff 63%); W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddf0f8', endColorstr='#ffffff',GradientType=0 ); IE6-9
}*/
</style>
</head>
<body>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
<img class="logo" src="img/Nexius_logo.png"/>
</div>
</div>
<div class='inner col-md-8'>
<%=errorMessage%>
<form action='LoginServlet' method='POST' id='loginForm' class='form-horizontal' role='form' autocomplete='off'>
<h4 class="form-signin-heading"> </h4>
<div class="form-group">
<label for='username' class='col-md-2 control-label'>User name</label>
<div class="col-md-4">
<input type='text' class="form-control" name='user' id='username' />
</div>
</div>
<div class="form-group">
<label for='password' class='col-md-2 control-label'>Password</label>
<div class="col-md-4">
<input type='password' class="form-control" name='pwd' id='password' />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" type="submit">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10"><div style="position: absolute; top: -45px; left: 100px; width: 240px;">
<input onClick="checkCookie()" type="checkbox" value="Remember me">Remember username<br>
</div>
</div>
</form>
</div>
<script type='text/javascript'>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)===0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("user");
if (user!=="")
{
document.getElementById("username").value = user;
}
else
{
if (user!=="" && user!=null)
{
setCookie("user",user,30);
}
}
}
</script>
</body>
</html>
Mostly the upper part is just CSS. In the below part i have writtten the codes to get the username on the text box and pass it to the setcookie function below. So i need it like an usual page like when remember username check box was checked, the username should show up when the page is opened, but for me what it does is, when i open the webpage only when i click on the "remember username" checkbox the username pops up in the username textbox. Now sure what to do about this? Can someone please help me?

You're checking for cookies only when user clicks on the remember me button. You need to check for cookie on document load, for instance.
Add onload handler on body tag this way: <body onload=checkCookie()>. You need to also remove onClick="checkCookie()" from your remember me button.

How to reload a jsp from a servlet using Post?

Upload.jsp
<form id="upload" name="upload" method="post"
action="UploadServlet"enctype="multipart/form-data">
<br />
<div class="obrazek" id="img-4049424"
style="position: relative; z-index:0;">
<div>
<%=request.getAttribute("mensaje")%> <img src="img/upload/<%=request.getAttribute("logotipo")%>"
alt="" style="float: left;width: 120px; height: 120px;">
</div>
<span class="upload-wrapper">
<img src="img/up_16.gif" alt="" style="margin-top: 50px;">
<a href="javascript:doClick()" id="fileSelect" style="font-weight: bold;" >Cargar logotipo...</a>
</span>
</div>
<div id="uploadfile" style="position: absolute; background-color:transparent;
width: 210px; height: 215px;
overflow: hidden;
z-index: -1; opacity: 0;
top: 5px; left: 5px;
background-position: initial initial; background-repeat: initial initial;" >
<input id="file" name="file" type="file" accept="image/jpeg,image/png"
style="font-size: 15px; position: absolute; width: 100%;
height: 100%;" onchange="handleFiles(this.files)">
</div>
<input type="submit" value="Subir logotipo" />
</form>
UploadServlet.java
mensaje="successfully";
request.setAttribute("logotipo", fileName);
request.setAttribute("mensaje", mensaje);
request.getRequestDispatcher("vistas/Upload.jsp")
.forward(request, response);
What I need is reload to Upload.jsp to display the uploaded image, because now I no image appears on the jsp and the file is loaded successfully...