<head>
<body>
<div id="page" class="container">
<div id="header">
<div id="mainmenu">
<div class="breadcrumbs">
<div class="container">
<div id="content">
<h1>
<link type="text/css" rel="stylesheet" media="screen" href="css/dropdown/dropdown.css">
<link type="text/css" rel="stylesheet" media="screen" href="css/dropdown/themes/default/default.css">
<ul id="nav" class="dropdown dropdown-horizontal">
<li class="dir">
<li class="dir">
<li class="dir">
<font color="black">Retrieve</font>
<ul>
<li>
wa1i-AFU R1S1
</li>
<li>
I am using selenium to automate testing but got stuck in generating xpath of one auto drop down select element.
This is a auto drop down and select element in webpage. Can anyone help what should be xpath of wa1i-AFU R1S1 for this to use in selenium webdriver ?
I would suggest to go for css instead since css is better in terms of performance.
a[href$='default/retrieveWa1ir1s1service']
Translation: Finds the anchor where href ends with default/retrieveWa1ir1s1service
The possible xpath for this is: //a[text()='wa1i-AFU R1S1']
and the corresponding cssSelector/csspath is: a:contains(^wa1i-AFU R1S1$)
Sometimes, you can use absolute xpath which you can get by using Firebug and Firepath
I would suggest you to read this post:
XPath Tutorial
It had solved many of my xpaths issues
Related
Context: We can't use the full semantic ui library due to security reason. So I want to try the individual semantic ui dropdown module, because it is very good solution for a lot of data entry scenarios.
The following code works when I reference the full library, but doesn't work when I reference the individual module.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>
<select class="ui dropdown">
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I dug into the problem, and find the generated html is like the following:
<div class="ui dropdown selection" tabindex="0">
<select>
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>
The result is a big UI box like control showing "Email" and when you click on it, nothing happens.
I think the problem maybe the "selection" class added to the end of the top level div. Just my guess.
Could anyone point out where I did wrong? Really want to get this working. Love the semantic ui dropdown solution.
found the cause of this problem.
semantic-ui-dropdown has an dependency on semantic-ui-transition...
just reference semantic-ui-transition before semantic-ui-dropdown will do.
just add this to the end script in your index.html
<script>
function callDropdown(){
$('.ui.dropdown')
.dropdown();
}
setTimeout(callDropdown, 3000);
Is it allowed if tooltip is not having an href component?
Here is my code :
<a data-toggle="tooltip" title="Please click on map of your precise location"><i class="fi flaticon-question"></i></a>
I removed the href because if I click on the tooltip, the web goes to top of the page (on mobile screen). Is there any other best practice for this?
Does it have to be an anchor at all? You should be able to just do something along the lines of.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<i class="glyphicon glyphicon-question-sign"
data-toggle="tooltip"
data-placement="bottom"
title="Contextual help for mouse/touch users">
</i>
<span class="sr-only">Contextual Help for Screen Readers</span>
Unless you're help icon should go somewhere it probably shouldn't be an anchor. The only thing I've added is the sr-only block which will allow screen readers to read out your contextual help.
Alternatively you can make sure that the anchor doesn't move the page by attaching an event to it and preventing the default behaviour.
//untested!
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
//comment the following line out to see page move on click
$('a[data-toggle="tooltip"]').click(function(e){e.preventDefault()})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/><br/><br/>Your icon is below here to show the lack of scrolling<br/><br/><br/><br/><br/><br/><br/>Keep going...<br/><br/><br/><br/><br/><br/><br/><br/><br/>Just a little more<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#" data-toggle="tooltip"
title="Please click on map of your precise location">
<i class="glyphicon glyphicon-question-sign"></i>
</a>
I have used Bootstrap 3 to create a page with a fixed nav bar top. In the body I have elements with #anchor tags. When I click from the nav bar, the element position is displayed but there seems to be a misalignment of the row (approximately the height of the nav bar) - BS3.0 docs say you need to put the padding-top of the body to the height of the nav bar (50px in this case) and have the body position relative. There have been posts about the docs not being correct and I can't seem to fix this...
here is a fiddle: http://jsfiddle.net/richnasser/fkLh9sf4/1/ and the full screen http://jsfiddle.net/richnasser/fkLh9sf4/1/embedded/result/
Click on 'about' and the scrolling should stop at the top of the Santa Claus header. In my browser (Chrome) it goes well beyond that, hiding the headline. Any insights would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>North Pole Industries</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNavBar">
<div class="container-fluid">
<div class="navbar-header">
<button class ="navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse">
<span class = "glyphicon glyphicon-list-alt"></span>
</button>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li class="active">home</li>
<li>capabilities</li>
<li>client list</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class = "row" id="home">
<div><img src= "http://placekitten.com/1200/600" class="img-responsive" alt="kitty"></div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive" alt="grey"></div>
</div>
<div class = "row">
<div class="col-md-3" id="about"><h3>Santa Claus <small>chief</h3></small><p class="text-justify">Santa brings over fifteen years of experience in the auto industry through a combination of roles in marketing, field work and wind tunnel studies. His success is derived from innovative thinking and a keen ability to solve complicated problems. Santa has worked in both US and International markets doing both strategic and tactical marketing.</p>
Read More</div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="santa"></div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="rudolf"></div>
<div class="col-md-3"><h3>Rudolf <small>dog</h3></small><p class="text-justify">Rudolf counts on over fifteen years experience delivering leadership and marketing capabilities to auto and technology companies, creating profitable and sustainable business growth. He built his reputation on a solid commitment to customers, passion for marketing excellence, and a strong climate of teamwork.</p>
Read More</div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive"></div>
</div>
</div>
and the css
body {
position: relative;
padding: 50px;
}
You can achieve this using simple JavaScript. Below Fiddle will help you to figure it out.
http://jsfiddle.net/ianclark001/aShQL/
In the above fiddle code, update the fromTop height as per your fixed header height.
var fromTop = 50; // Give Your fixed header height
And also you can find more information at:
offsetting an html anchor to adjust for fixed header
I have used this solution, with no javascript, only css, and worked for me:
Give your anchor a class:
<a class="anchor" id="top"></a>
You can then position the anchor an offset higher or lower than where
it actually appears on the page, by making it a block element and
relatively positioning it. -250px will position the anchor up 250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
You can adjust the top to the size of you navbar.
I am trying to provide my users with 2 ways to filter a list; either by a data-filter and by a couple of buttons.
The buttons use class attributes to remove groups of list items. In my real application, there are about 8 categories that I need to switch between; or show them all.
So I wrote the routine 'filterCategories' which .hide() all of the items, then .show() just the category that I want to display. This works fine. (I can't use nested lists because the items are arranged in a specific order - not in category order)
However, after I .hide() and .show(), the data-filter no longer works on the items that were hidden. The .hide() seems to remove the items from the listview-filter.
I have tried a listview('refresh') and that does not help.
Is there some other way to do this?
Thanks,
Jeff
(cut down version below... click on "Remove 10s" then type 22 in the search bar. Only "Item 22" should appear. )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<script type="text/javascript" >
function filterCategories(showme){
if (showme == 'all') {
$('li.all').show();
} else {
$('li.all').hide();
$('li.'+showme).show();
}
$('#itemResults').listview('refresh');
}
$( '#Page1' ).live( 'pageinit',function(event){
});
</script>
<body>
<div data-role="page" id="Page1">
<div data-role="content">
<ul data-role="listview" id="itemResults" data-filter="true">
<li class="" onclick="filterCategories( '20s' );">Remove 10s</li>
<li class="" onclick="filterCategories( '10s' );">Remove 20s</li>
<li class="all 10s" >Item 11</li>
<li class="all 20s" >Item 22</li>
<li class="all 10s" >Item 13</li>
<li class="all 20s" >Item 24</li>
<li class="all 10s" >Item 15</li>
<li class="all 20s" >Item 26</li>
</ul>
</div>
</div>
</body>
</html>
I had the exact same problem and after much troubleshooting I found the solution:
Rather than using $('li-element').hide() or .show(), you must add or remove class "ui-screen-hidden".
$('li-element').removeClass("ui-screen-hidden");
OR
$('li-element').addClass("ui-screen-hidden");
I found this page on SO ( Dojo: Select a tab on load depending on url parameter ) but I'm still not very clear on how this opens a tab from a URL call.
Here's my HTML.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" >
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top">
HEADER
</div>
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="tab1">
<A NAME="tab1help">TAB 1 HELP</A>
</div>
<div dojoType="dijit.layout.ContentPane" title="tab2">
<A NAME="tab1help">TAB 2 HELP</A>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom">
FOOTER
</div>
</div>
<script language="Javascript1.2" type="text/javascript">
SCRIPT HERE TO GENERATE DIV CONTENT
</script>
</body>
</html>
The javascript at the bottom generates DIV content that has anchors in it. The way to get to this page is by simply specifying "help.html".
Question is how do I specify in the URL (help.html) to open this page and open tab 2 (or tab 1, or tab 5?) depending on the URL. Is it even possible to do this?
As background, this is a help page that has about 10 topics (each with a tab) and it opens as a satellite window. I need to be able to open a particular tab and go to the anchor depending on what help function the surfer needs help with in the main web app window.
Many thanks!
Janie
First of all, you need to add query parameter or use hash to specify the topic number to display, for example, you can use help.html?topic=1 or help.html#1. When the page is loaded, you can get the topic number from the URL.
Then get the reference of the tab container and select the corresponding tab according to the topic number. For example:
var tabContainer = dijit.byId("myTab");
var topicNumber = 5; // Get from URL
tabContainer.selectChild(tabContainer.getChildren()[topicNumber - 1]); // Assume that to the topic number starts from 1
You can also try to assign the id to each tab, for example, topic1 for topic number 1. Then
tabContainer.selectChild(dijit.byId("topic" + topicNumber));
You can use php include.
<div dojoType="dijit.layout.ContentPane" title="tab1">
<?php include 'help.php';?>
</div>
All research I have done indicates that this can't be done from a URL call. Turns out that you open a selected tab by adding the parameter selected... example below......
<div dojoType="dijit.layout.ContentPane" title="HELP" selected="true">
Thankfully I don't have static pages (they are generated via Catalyst ) so I can generate the true condition dynamically.
Hopefully this will help if someone else has the same question. JW