Unable to identify a layered element in selenium - selenium

I am new to selenium and I have got this problem
This is the code
<document>
<html lang="en">
<head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0; background-color: #003e7e" role="navigation">
<div id="page-wrapper" style="min-height: 163px;">
<div id="content">
<div id="workArea">
<script type="text/javascript"> $(document).ready(function () { $('.linkdisabled').click(function (e) { e.preventDefault(); }); }); </script>
<div class="simpleForm">
<div>
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">TimeSheet</h3>
<h3>
<span class="link_button btn btn-primary" onclick="location.href= '/TimeSheet/Create'">Click to Add Sheet</span>
</h3>
</div>
</div>
<div class="row show-grid">
</div>
</div>
</div>
</div>
</div>
<div id="footer"/>
</body>
</html>
</document>
================================
And I want to click on this
Click to Add Sheet
Have tired almost all that is there in selenium to identify and click it but it didnt worked... please help


Does it work manually? are you able to click on the text??
Reference -> onclick="location.href='link.html'" does not load page in Safari

Related

Selenium web driver: unable to locate element

I am New to selenium: I have this source and am trying click on a button using xpath with selenium webdriver. This is the button(last line in the html) that am trying to click on:
I use this xpath: "//div[#id='innerBody']/div[4]/div/div/ul/li[3]/button"
and it gives me unable to locate element.
Any idea why and how I should go about it.
<document>
<html class="FullPage" xmlns="http://www.w3.org/1999/xhtml" style="">
<head>
<body class="brand brand-mastwide FullPage no-footer width-hd" style="">
<div id="cboxOverlay" style="display: none;"/>
<div id="colorbox" class="" style="padding-bottom: 2px; padding-right: 2px; display: none;">
<div id="masthead" class="masthead full-width">
<div id="toast-absolute" class="full-width">
<!-- Content -->
<div id="outer-outer" class="with-nav">
<div id="outer-wrapper" class="full-width">
<a name="pageTop"/>
<div class="main-wrapper">
<div class="inner">
<div id="applicationHost">
<div data-bind="router: router" data-view="_App/AppShell" style="" data-active-view="true">
<div class="durandal-wrapper" data-view="_App/Home/HomeShell" style="" data-active-view="true">
<link rel="stylesheet" href="/cache/sf/_App/Home/HomeShell.css"/>
<link rel="stylesheet" href="/cache/sf/css/lib/joyride-2.1.css"/>
<div id="regionMain" class="clear-block with-side with-side-left" data-bind="css:{'clear-block with-side with-side-left': ShowLeftNavigation()}">
<div class="content-pane main">
<div class="inner-content-pane main">
<div data-bind="compose: Message"/>
<div class="router" data-bind="router: router">
<div class="durandal-wrapper" data-view="_App/Home/Filebox/Filebox" style="" data-active-view="true">
<h1 data-bind="text: Title">Bestandsvak voor satish vanahalli</h1>
<link href="/cache/f69bb3f534fb459062226526576bc4dea7e8fe7e/css/lib/jqui/jquery-ui-1.10.0.sf.css" type="text/css" rel="stylesheet"/>
<br/>
<div id="innerBody" class="file-box-container">
<div class="errortip" data-bind="text: ErrorMessage, visible: ErrorMessage" style="display: none;"/>
<div class="clear-block">
<div class="upload-button">
<div data-bind="compose: FileList">
<div class="c-content" data-view="_App/Home/Common/FileList/FileList" style="" data-active-view="true">
<div class="secondary-ctrl btnl-row title-noborder clear-block" data-bind="css: { hidden: !ShowSecondary }">
<ul class="context-actions" data-bind="visible: Capabilities.AllowCheckboxes, foreach: CurrentActions">
<li class="hover-list">
<li class="hover-list">
<li class="hover-list">
***<button class="txt context-action" data-bind="click: Click">***

Try this xpath:
//ul[#class='context-actions']/li[3]/button[#class='txt context-action][3]

As per your comments for question, if you want to click on the 3rd button in the list, please try below xpath; I have just tweaked #Saritha's :
(//button[#class='txt context-action'])[3]
This will click on the 3rd button in the page (in the chronological order of DOM representation) with class as txt context-action.

Try this xpath:
//*[#id="innerBody"]/div/div/div/div/div/div/ul/li[3]/button

Divs in Twitter Bootstrap Carousel appear on top of each other

I have an issue with my Twitter Bootstrat Carousel. The 4 DIV elements which are supposed to appear one after the other all appear together, on top of each other.
I followed CreativityTuts.org tutorial and cannot see where I am wrong...
Here is the HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval:2000
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<center>
<div class="item active"><img src="bkk.png"></div>
<div class="item"><img src="brr.png"></div>
<div class="item"><img src="buu.png"></div>
<div class="item"><img src="btt.png"></div>
</center>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
</body>
</html>
My file structure is the following:
- bkk.png (and the 3 other images)
- css (file)
- fonts (file)
- js (file)
- carousel.js
- bootstrap.js
- bootstrap.min.js
- testcarousel.html
Can anyone help?
Thanks a lot in advance,
Paul

OK guys,
Thanks for your answers, it made me realize that I used code for Bootstrap 2, but actually using Bootstrap 3.
I found needed syntax here:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php

dojox.mobile.Heading fixed bottom does not work

Can anybody construct a jsfiddle where a dojox.mobile.Heading is positioned with fixed="bottom"?
If I write the following Code (example from here), the bottom Heading is not positioned bottom.
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">View Header Bar</h1>
<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">View Footer Bar</h1>
</div>

This one is working for me (http://jsfiddle.net/G8QkC/53/):
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/mobile/deviceTheme.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dojox/mobile/ScrollableView",
"dojox/mobile/Heading"], null);
</script>
</head>
<body>
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">View Header Bar</h1>
<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">View Footer Bar</h1>
</div>
</body>

Dojo Mobile 522.remove is not a function - SpinWheelDatePicker locks on release event

I am very new to dojo (And this is my first question on stackoverflow so go easy :) ). I am working on a new project at work and was asked to investigate dojo mobile. The purpose of the following code is just to test the different available widgets that dojo mobile provides in a simple html page.
I have come across the following issue, when i run this code in a browser or deploy it to a mobile device there seems to be an issue with the release event that should fire after clicking the mouse or releasing on a touch screen, important to note is that this only happens with widgets that involve dragging an object. For example, the buttons and the tab bar works fine. This is only with SpinWheelDatePicker/SpinWheelTimePicker, slider, switch etc. In the developer console i get the following error
In Chrome:
Uncaught TypeError: Object #<klass> has no method 'remove' dojo.js:17
_51d.disconnect dojo.js:17
_a.onTouchEnd libs/dojo/dojox/mobile/scrollable.js:401
_3e6 dojo.js:17
Event.Handler.Class.create.handleEvent prototype.js:5767
__method prototype.js:396
responder
In Firefox:
522.remove is not a function
[Break On This Error]
... function(){return _2f4.apply(window,arguments)&&_2f5.apply(window,arguments);};...
dojo.js (line 17)(
I am using 1.7.2 toolkit, and the project is deployed onto a worklight server.
Here is the code:
<!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Android DOJO Test</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link type="text/css" rel="Stylesheet" href="css/blackbird/blackbird.css" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/common/SpinWheel.css" >
<!-- <link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/iphone/iphone.css" type="text/css" media="screen" title="no title" /> -->
<script type="text/javascript" src="libs/blackbird/blackbird.js"></script>
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, mblAlwaysHideAddressBar:true"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
<script type="text/javascript">
var jsonData = {
items:[
{ src: "images/4242373_460s.jpg"},
{ src: "images/4242618_460s.jpg"},
{ src: "images/4242864_460s.jpg"},
{ src: "images/icon.png"},
{ src: "images/thumbnail.png"}
]
};
log.info('Attempting to load dojo libraries');
require(["dojox/mobile/parser",
"dojo/data/ItemFileReadStore",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/Carousel",
"dojox/mobile/Button",
"dojox/mobile/TabBar",
"dojox/mobile/ScrollableView",
"dojox/mobile/PageIndicator",
"dojox/mobile/SwapView",
"dojox/mobile/CheckBox",
"dojox/mobile/ToggleButton",
"dojox/mobile/TextBox",
"dojox/mobile/Switch",
"dojox/mobile/Slider",
"dojox/mobile/RadioButton",
"dojox/mobile/SpinWheelDatePicker",
"dojox/mobile/SpinWheelTimePicker",
"dojox/mobile/Overlay",
"dojox/gauges/GlossyCircularGauge",
"dojox/gauges/GlossyHorizontalGauge",
"dojox/gauges/GlossySemiCircularGauge",
"dojo/on",
"dojo/domReady!"
],
function(store, mobile, parser) {
log.info('Dojo libraries loaded succesfully');
});
function setTabBar(to){
if(to!=null){
var selectedTab = dijit.byId(to);
selectedTab.select();
}
else{
log.error('From or To parameter/s are empty or not a string value');
return;
}
}
</script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
<h1 data-dojo-type="dojox.mobile.Heading">DOJO TEST APP</h1>
<ul data-dojo-type="dojox.mobile.TabBar" id="mainTabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" id="homeBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="mainView" >Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="fadeBar" icon1="images/Button-Blank-Green-icon.png" moveTo="fadeView" >Fade</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="slideBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="slideView" >Slide</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="swapBar" icon1="images/Button-Blank-Green-icon.png" moveTo="swapViewExample" >Swap View</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="formBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="formButtons" >Form Buttons</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="carouselBar" icon1="images/Button-Blank-Green-icon.png" moveTo="carouselView" >Carousel</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="pickerBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="pickerView" >Picker</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="overlayBar" icon1="images/Button-Blank-Green-icon.png" moveTo="overlayView" >Overlay</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="gaugesBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="gaugeView" >Gauges</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="mainView" selected ="true">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" moveTo="fadeView" transition="fade" onClick = "setTabBar('fadeBar');" >Fade</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="slideView" transition="slide" onClick = "setTabBar('slideBar');" >Slide</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="swapViewExample" transition="scaleIn" onClick = "setTabBar('swapBar');" >Swap View</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="formButtons" transition="scaleOut" onClick = "setTabBar('formBar');" >Form Buttons</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="carouselView" transition="swirl" onClick = "setTabBar('carouselBar');" >Carousel</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="pickerView" transition="flip" onClick = "setTabBar('pickerBar');" >Picker Examples</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="overlayView" transition="zoomOut" onClick = "setTabBar('overlayBar');" >Overlay Eaxmples</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="gaugeView" transition="zoomOut" onClick = "setTabBar('gaugesBar');" >Gauges</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="fadeView">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Fade View</h2>
</div>
<div data-dojo-type="dojox.mobile.View" id="slideView">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Slide View</h2>
</div>
<div data-dojo-type="dojox.mobile.View" id="swapViewExample">
<div data-dojo-type="dojox.mobile.View" selected="true">
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 1</h2>
<img src="images/4242373_460s.jpg">
</div>
</div>
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 2</h2>
<img src="images/4242618_460s.jpg">
</div>
</div>
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 3</h2>
<img src="images/4242864_460s.jpg">
</div>
</div>
</div>
<div data-dojo-type="dojox.mobile.PageIndicator" fixed="bottom"></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="formButtons">
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Button</span><br>
<div align="right"><button data-dojo-type="dojox.mobile.Button" data-dojo-props='label:"Click me!", onClick:function(e){ alert("button clicked");return true; }'></button></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>CheckBox</span><br>
<div align="right"><input data-dojo-type="dojox.mobile.CheckBox" type="checkbox" data-dojo-props='onChange:function(checked){ alert("checked state changed to " + checked); },checked:true' /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Radio Button</span><br>
<div align="right"><input type="radio" data-dojo-type="dojox.mobile.RadioButton" checked="true" name="radioGroup" value="yes" /><input type="radio" data-dojo-type="dojox.mobile.RadioButton" checked="false" name="radioGroup" value="no" /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Slider</span><br>
<div align="right"><input type="range" style="width:200px;" data-dojo-type="dojox.mobile.Slider" value="10" max="20" /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Switch</span><br>
<div align="right"><div data-dojo-type="dojox.mobile.Switch" align="right"></div></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Toggle Button</span><br>
<div align="right"><button data-dojo-type="dojox.mobile.ToggleButton" checked="true">Toggle me</button></div>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="carouselView">
<div data-dojo-type="dojox.mobile.ScrollableView" >
<span data-dojo-type="dojo.data.ItemFileReadStore" id="store1" data-dojo-props="data:jsonData"></span>
<div id="carousel1" data-dojo-type="dojox.mobile.Carousel" store = "dijit.registry.byId('store1')" data-dojo-props="height:'500px', navButton:'true' , numVisible:2, title:'Photo Gallery'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.View" id="pickerView">
<h2 data-dojo-type="dojox.mobile.Heading">Date Picker</h2>
<div align="center"><div id="spin1" data-dojo-type="dojox.mobile.SpinWheelDatePicker" align="center"></div></div>
<h2 data-dojo-type="dojox.mobile.Heading">Time Picker</h2>
<div align="center"><div id="spin2" data-dojo-type="dojox.mobile.SpinWheelTimePicker" align="center"></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="overlayView">
<div align="center"><button data-dojo-type="dojox.mobile.Button" onClick="dijit.registry.byId('customPicker').show()" data-dojo-props='label:"Select date"'></button></div>
<div id="customPicker" data-dojo-type="dojox.mobile.Overlay">
<h1 data-dojo-type="dojox.mobile.Heading" label="Custom Picker">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="width:45px;float:right;" onClick="dijit.registry.byId('customPicker').hide()"></div>
</h1>
<div id="spin3" data-dojo-type="dojox.mobile.SpinWheelDatePicker"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.View" id="gaugeView">
<div data-dojo-type="dojox.mobile.View" id="gaugeMainView">
<div align="center"><h2 data-dojo-type="dojox.mobile.Heading">Guages</h2></div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossyCircView" transition="fade" onClick = >Glossy Circular</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossySemiView" transition="slide" onClick = >Glossy Semi Circular</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossyHorView" transition="scaleIn" onClick = >Glossy Horizontal</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="simpleAnalog" transition="scaleOut" onClick = >Simple Analog Gauges</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossyCircView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Circular</h1>
<div align="center"><div id="CircularGauge" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossyCircularGauge' width='200' height='200' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossySemiView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Semi Circular</h1>
<div align="center"><div id="CircularGauge1" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossySemiCircularGauge' width='200' height='200' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossyHorView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Horizontal</h1>
<div align="center"><div id="CircularGauge2" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossyHorizontalGauge' width='400' height='30' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="simpleAnalog">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Simple Analog Gauges</h1>
</div>
</div>
</body>
</html>

I think you hit a known incompatibility between the Worklight JavaScript libraries (more specifically prototype.js) and Dojo.
Your precise problem is that prototype.js adds an "on" method to all Elements, but unfortunately this method is not compatible with what Dojo expects (Dojo wants 'on' to return an object with a remove() method, whereas prototype.js returns an object with a stop() method).
As a workaround, try to add the following script to your page:
<script type="text/javascript">
// Fix incompatibility between Prototype and Dojo
Event.Handler.prototype.remove = function(){
this.stop();
};
</script>
You must add this after the place where Worklight will insert prototype.js, in your page I would say between auth.js and your main script should be the right place.

Dojo tabContainer.selectChild not working in IE

I have something like this on my HTML page.
<html>
<body>
<div dojoType="dijit.layout.TabContainer" id="allTabContainer" style="width: 1150px; height: 490px" tabPosition="left-h" persist="true">
<div dojoType="dijit.layout.ContentPane" id="firstTab_id" title="firstTab" >Content 1</div>
<div dojoType="dijit.layout.ContentPane" id="secondTab_id" title="secondTab" >Content 2</div>
<div dojoType="dijit.layout.ContentPane" id="thirdTab_id" title="thirdTab" ><jsp:include flush="true" page="thirdTab_page.jsp"></jsp:include></div>
</div>
</body>
</html>
I have 3 buttons on the thirdTab_page.jsp which on clicking would call the below selectTab javascript function. Please check the code for the same.
<html>
<body>
<div dojoType="dijit.layout.BorderContainer" style="padding:10px; width: 50%;" id="borderCont">
<button dojoType="dijit.form.Button" type="submit" id="firstTab" onclick="selectTab(this.id);">Tab1</button>
<button dojoType="dijit.form.Button" type="submit" id="secondTab" onclick="selectTab(this.id);">Tab2</button>
<button dojoType="dijit.form.Button" type="submit" id="thirdTab" onclick="selectTab(this.id);">Tab3</button>
</div>
</body>
</html>
And then I have the javascript function which goes on like this.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
function selectTab(tabId){
var correctTabId = tabId+"_id";
dijit.byId("allTabContainer").selectChild(correctTabId);
}
</script>
The tabContainer.selectChild doesn't seem to work in IE, but works perfect in Firefox. Please suggest if I have missed out something.
Thanks in advance.