I have following xpath in a frame.
<td width="20%" class="datawatchvalue">
<span data-bind="text: iTotal" onclick="window.parent.dashBoardIndexClick( DASH_BOARD_INDEX_TOTAL, 'All' );">6017</span></td>
where 6017 represent the LINK, and it' dynamic,
I have tried multiple method to click the link using xpath method but none of them are working.
Frame html.
<div class="middle-north ui-layout-pane ui-layout-pane-north" style="position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; z-index: 0; height: 208px; display: block; visibility: visible;">
<div class="ui-widget-header ui-corner-top">Data Watch</div>
<div class="ui-widget-content">
<div class="dwtable" id="dwtableid" style="width: 75%">
<div class="dwrow" style="width: 75%">
<div class="cell border-right-dashboard" id="topleftid">
<div class="cell">
Here are my tries.
Select Frame middle-north ui-layout-pane ui-layout-pane-north
Click Element xpath=//[#data-bind="text: iTotal"]
click link xpath=//*[#data-bind="text: iTotal"]
Click Element xpath=//*[#title="Open a new Index Window"]
Click Link xpath=//*[#id="researchtoolbarcolumn"][#title="Open a new Index Window"][#onclick="createAssetWindow('Index')"]
click link xpath=/html/body/div[1]/div[1]/div/div[1]/table/tbody/tr/td[1]
Click Link xpath=//*[#id="researchtoolbarcolumn"]
Try to do it with
Click Element xpath=//span[#data-bind="text: iTotal"]
Not Click Link, but Click Element - the Link keyword limits the scope to only <a> elements, while Element executes it on whatever.
And the data-bind value looks the most solid one in the sample html.
Related
I have a php page which displays a company telephone list. With option buttons to add and remove on the top of the page and the data below it.
Now when the user scrolls then of course the buttons move and then cant be clicked as they cant be seen.
Is there a way to make items stay on top of the page even when the user scrolls?
EDIT: I tried using position fixed but it overlaps my database displaying the information. Is there something im doing wrong?
my code:
<center>
<html>
<head>
<style>
.menu {
position: fixed;
height: 0px;
top: 0;
left: 0;
width: 100%;
}
</style>
<title>Extension List</title></head><body>
<br>
<div class="menu">
<h1> Alpine Motors VW Extension List</h1>
<h2> Tel: 031 717 7800</h2>
<h2>Add Extension
<br>
<br>
<form action="AlpineExtensionList.php" method='post'>
<input type="submit" value="Print PDF"/>
<br>
<br>
Delete Extension</h2>
</div>
<br>
<br>
<?php
The rest of the code is my database linking and displaying the data.
but the part above between the div i tried to create is what i need to be on top as the user scrolls.
You just set the css position of the button to be fixed. This is just example:
#button
{
position: fixed;
top: 30px;
right: 20px;
}
I am having difficulty clicking on a link. I can click the link but nothing happening basically not going to next page.
Steps I am following:
log in to www.jetstar.com.au
click on Travel agents link (I need to click on this link)
Please find web elements from the site
<span class="text">
<cufon class="cufon cufon-canvas" style="width: 34px; height: 12px;" alt="Travel">
<canvas width="42" height="13" style="left: 0px; top: -1px; width: 42px; height: 13px;">
</canvas>
<cufontext>Travel</cufontext>.
<cufon class="cufon cufon-canvas" style="width: 44px; height: 12px;" alt=" agents">
<canvas width="50" height="13" style="left: 0px; top: -1px; width: 50px; height: 13px;">
</canvas>
<cufontext>
agents
</cufontext>
</cufon>
</span>
and my code is to generate the link
#ie.link(:id, "ctl04_ctl07_rptGlobalNavigation_hypGlobalNav_0").span(:alt, "Travel").click
and also i tried fire_event didn't worked.
What am I doing wrong?
Assuming that the Travel Agents link on the home page when not signed in is the same as after signing in, the line:
#ie.link(:id, "ctl04_ctl07_rptGlobalNavigation_hypGlobalNav_0").span(:alt, "Travel").click
Will not work because:
There is no span with alt attribute of "Travel". It is a cufon element instead.
The Travel Agents link ID seems dynamic and so might change. For example, when not signed in the id is showing as "ctl02_ctl07_rptGlobalNavigation_hypGlobalNav_0".
I would try locating the link with something that is less likely to change - eg the href attribute. Try:
#ie.link(:href => /agenthub\.jetstar\.com/).click
I'm trying to find the element "BANK STATEMENT - Company" through xpath by selenium in my code.
<div class="form-group">
<label style="margin-left: 20px;">Please upload relevant documents</label>
<br>
<label class="checkbox-inline">
<div class="icheckbox_minimal" style="position: relative;" aria-checked="false" aria-disabled="false">
<input id="document_type_id1" type="checkbox" value="1" name="document_type_id[]" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins>
</div>
BANK STATEMENT - Company
</label>
The closest that i reached is this by writing the below xpath. But its not helpful
//form[#id='w1']/descendant::label[#class='checkbox-inline']
Any suggestions would help.
You are looking for the text content of an element node, which can be selected with text(). Using the HTML snippet you show,
//label[#class='checkbox-inline']/text()
will return all text nodes of that label element (individual results separated by -------):
[EMPTY LINE]
-----------------------
BANK STATEMENT - Company
As you can see, the first text node is a whitespace-only text node and it is the second node you'd like to retrieve from the document.
//label[#class='checkbox-inline']/text()[2]
results in
[EMPTY LINE]
BANK STATEMENT - Company
[EMPTY LINE]
because newline characters are also part of a text node. To get rid of the extra whitespace, use
normalize-space(//label[#class='checkbox-inline']/text()[2])
which, finally, will only yield
BANK STATEMENT - Company
Taking your whole document as input, the expression should be
normalize-space(//form[#id='w1']//label[#class='checkbox-inline']/text()[2])
I suppose, but we cannot check if that's correct.
I'm trying to edit a DotNetNuke webpage and I have an image that I need to display. On TOP of the image, I'd like to place an anchor. The trouble is that I don't want the entire image to be clickable, JUST the anchor, and I can't seem to get it to work.
Additionally, because it's a DNN site I'm not sure if I can edit the CSS, so I'm hoping for a solution that's pure html. I've tried all sorts of combinations but none of them seemed to work. Thanks
Below is my test html:
<div class="c_head h2_title_container">
<img alt="" width="600" height="151" style="width: 356px; height: 101px;" src="/portals/224/img/blue-arrow-small.png"></img><span style="font-size: 18px;"><strong>Name Goes Here</strong></span>
<br></br>
<p class="team_bio" style="text-align: justify;"><span style="font-size: 16px;">Here is my test text.</span>
</p>
</div>
You should be able to set the parent element to position: relative, then add your anchor's parent element positioned absolutely:
<div class="c_head h2_title_container" style="position: relative;">
<img ...></img>
<div style="... position: absolute; top: 20px; left: 30px;">
...
</div>
...
</div>
I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.