How to write the good xpath? - xpath

How to write the good xpath? I want to get the text 'Test Employee'
<div class="rowData">
<img width="40" height="40"/>
<b class="initials">TE</b>
<div>Test Employee</div>
</div>

Use like below:
//*[#class='rowData']//div

Tell your devs to use ids and make everyone's life easier :-)
Then
<div id="employee_name">Test Employee</div>
Can be found with
//div[#id="employee_name"]

try the xpath below:
//div[#class='rowData']/div/text()

Related

Trouble grabbing background image url with importxml / xpath

I'm trying to scrape some background image urls into a google sheet. Here is an example of the container-
<div class="_rs9 _1xcn">
<div class="_1ue-">
<section class="_4gsw _7of _1ue_" style="background-image: url(https://scontent.x.com/v/t64.5771-25/38974906_464042117451453_1752137156853235712_n.png?_nc_cat=100&_nc_ht=scontent.x.com&oh=c19f15536205be2e1eedb7f7fc7cb61b&oe=5C4442FD)">
<div class="_7p2">
</div>
</section>
I need to get from the https to the question mark after png. I know there's a way to use substring-before/-after but I am having a tough time, particular with escaping quotes.
Here is my attempt. This just gets me an "#N/A":
=IMPORTXML(B2,"substring-before(substring-after(//section[#class='_4gsw _7of _1ue_']/#style, """"background-image: url(""""), """")"""")")
Could anyone help with the full importxml statement? Much appreciated, thanks.
Your approach was close. Try the following XPath expression:
substring-before(substring-after(//section[#class='_4gsw _7of _1ue_']/#style, 'background-image: url('),'?')
The whole expression could look like this:
=IMPORTXML(B2,"substring-before(substring-after(//section[#class='_4gsw _7of _1ue_']/#style, 'background-image: url('),'?')")

Need help finding an element in selenium

Can some one help me to locate an element (without using xpath) which is displayed using : <i id="ext-gen759" class="icon-tool"></i> under a <div> tag. The HTML is as follows:
<div id="ext-comp-1089" class=" MiniTbar">
<a href="javascript:void(0);" id="ext-gen760" class=" active">
<i id="ext-gen759" class="icon-tool"></i> -->> need to locate this.
</a>
</div>
I don't want to use:
By.Id --> id is dynamic
By.XPath --> not stable
I have tried the following without getting a result:
By.className("icon-tool") -- > not working
By.partialLinkText("icon-tool") --> not working
Any solution?
You can rely on the part of the id using, for example, starts-with():
//div[starts-with(#id, "ext-comp-")]/a[starts-with(#id, "ext-gen")]/i[#class="icon-tool"]
Or a CSS selector:
div[id^=ext-comp-] a.active[id^=ext-gen] i.icon-tool[id^=ext-gen]
using xpath should do this. You may need to make sure that's the only element i with same criteria on the page
//i[contains(#id,'ext-gen')]
Give a chance to the find element by css selector ?
driver.find_element_by_css_selector('i.icon-tool')
The python documentation is here http://selenium-python.readthedocs.org/en/latest/locating-elements.html
You can find it using css selector:
driver.findElement(By.cssSelector("i[class='icon-tool']"));

Use MapHilight Jquery plug-in to highlight in different colors

I'm trying to figure out how to use MapHilight but not having much luck. The only "documentation" on it seems to just be some working examples. This might be because the site hosting the plugin, seems to be down. I've also just learned JQuery yesterday so I don't know if that's impeding my progress. What I'd like to do is specify the look and feel of my image map hilighting on an area by area basis. David Lynch's Simple Demo shows this, but I'm not sure how it's working. I don't understand why he uses the image has the background for the containing div and what purposes the canvases are serving. Here's what I have so far:
...
<script type="text/javascript">
$(function () {
$('#ImageMap1').maphilight();
});
</script>
</head>
...
<div style="float: left">
<img id="ImageMap1" src="solar_system.jpg" usemap="#ImageMapmapAreas" />
<map id="ImageMapmapAreas" name="ImageMapmapAreas">
<area alt="" title="" href="#Jupiter" coords="222,186,28" shape="circle"/>
<area alt="" title="" href="#Earth" coords="135,194,13" shape="circle"
data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'ff0000','fillOpacity':0.6}"/>
</map>
</div>
This gives me, I guess, default highlighting of a solid red line. The data-maphilight metadata is not being used. An explanation of how to get this working would be great, but directing me to a resource explaining how to use maphilight overall would be even better because I ultimately want to make use of almost everything in this demo.
I see that you decided to switch to Silverlight but since I'm fiddling with maphighlight now I decided to look at this.
The thing is that the sample you posted works fine after switching " with ' and vice versa.
<div style="float: left">
<img id="ImageMap1" src="http://geographyandhistory.wikispaces.com/file/view/solar_system.jpg/43347125/283x202/solar_system.jpg" usemap="#ImageMapmapAreas" />
<map id="ImageMapmapAreas" name="ImageMapmapAreas">
<area alt="" title="" href="#Earth" coords="228,151,53" shape="circle" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"00ff00","fillOpacity":0.6}'/>
<area alt="" title="" href="#Sun" coords="68,54,44" shape="circle" data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'00ff00','fillOpacity':0.6}"/>
</map>
</div>​
Here's a fiddle - http://jsfiddle.net/k67gq/6/
See how the 'Earth' and 'Sun' areas have the same 'data-maphilight' attributes except quotation marks.
Instead of " or ', using " in data-maphilight worked for me.
Ex: data-maphilight="{"strokeColor":"0000ff",...
I guess there's nothing available. Strange when I saw so many references to this plugin when searching for how to do custom hilighting. I ended up having to use Silverlight.

Is it possible to make a marquee using picture?

Im trying to make a layout with a picture which appears to be moving like a marquee? Is it possible? Please help.. thanks...
Yes, you can:
<marquee scrolldelay="100" bgcolor="grey">
<img src="img.png"/>
</marquee>
jsFiddle here
Edit: it works in all modern browers, and even in ie6,7,8
if you just want a moving image....this should suffice :
<marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100" alt="smile" /></marquee>
Useful link

Trying to create XPath from this HTML snippet

I have played for a while writing XPath but am unable to come up with exactly what I want.
I'm trying to write XPath for link(click1 and click2 in code snippet below) based on known text(myidentity in code snippet below). Can someone take a look into and suggest possible solution?
HTML code snippet:
<div class="abc">
<a onclick="mycontroller.goto('xx','yy'); return false;" href="#">
<img src="images/controls/inheritance.gif"/>
</a>
myidentity
<span>
<a onclick="mycontroller.goto('xx','yy'); return false;" href="#">click1</a>
<a onclick="mycontroller.goto('xx','yy'); return false;" href="#">click2</a>
</span>
</div>
You don't need to use XPath here, you could use a CSS locator. These are often faster and more compatible across different browsers.
css=div:contains(myidentity) > span a:nth-child(1) //click1
css=div:contains(myidentity) > span a:nth-child(2) //click2
Note that the > is only required to workaround a bug in the CSS locator library used by Selenium.
Hard to say without seeing the rest of the HTML but the following should work:
//div[text()[contains(., "myidentity")]]/span/a
See Macro's answer - this form should be used.
//div[text()[contains(., "myidentity")]]/span/a[2]
The following only works with one section of text in the containing div.
You'll need to select based on the text containing your identity text.
Xpath for click1
//div[contains(text(),"myidentity")]/span/a[1]
Xpath for click2
//div[contains(text(),"myidentity")]/span/a[2]

Resources