We Keep Coding

Getting HREF of an html node

I have a page at http://www.entrepreneuronfire.com/podcast/edwinhavens/
With an image at http://i.imgur.com/u59IAXB.png
I need to get the download link (i.e. hxxp://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3) of the MP3 file at class named spp-dloada(as web inspector detects) but all my 48 hours attempt ended in smoke.
That download link shows well in chrome (as
<a href="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" download="Edwin_Havens.mp3">
<span class="spp-dloada"></span>
</a>
) but not in FireFox 38 and IE11 but i need them in these two browser.
For FireFox and IE11 HTML Snippet is
<div class="spp-controls">
<span class="spp-speed"/>
<span class="spp-share">
<div class="spp-share-options" style="display: none;">
<a class="spp-share-icon spp-twitter-btn" href="">Share</a>
<a class="spp-share-icon spp-fb-btn" href="">Share</a>
<a class="spp-share-icon spp-gplus-btn" href="">Share</a>
<!--Share-->
</div>
</span>
<span class="spp-dload"/>
<span class="spp-play"/>
Oddest thing is when i click on the download button (as shown in the above image)
iframe changes into
<iframe class="spp-downloader" style="display:none" src="http://www.entrepreneuronfire.com?spp_download=http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3"/>
What have tried so far are-
Software:firebug, temper data,modifyheaders
Language:XPATH, CCS Selector, Jquery
EDIT ---- Sorry for belated adjunct
I need pure XPATH expression too SINCE DIFFERENT BROWSER BEHAVES DIFFERENTLY
N.B. HTML SNIPPET IS FOR CHROME ONLY

The span inside of the link has a class, so you can just grab the parents 'href' attribute using jQuery like so:
$('.spp-dloada').parent().attr('href');
Fiddle
(This is of course assuming you have access to modify the code on this website.)
RE: Edit
It doesn't look like IE supports XPath, according to the answers here: jquery select element by xpath

If you view the source of the page, you can see that the source is different from the generated source you see when you inspect the element.
The link you are trying to fetch is not in the actual page source, however, this is:
<div class="smart-track-player stp-color-ff6100" data-url="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" data-download="true"data-color="ff6100" data-title="Edwin Havens" data-artist="John Lee Dumas chats with" data-uid="IU5Uvc7G" ></div>
I'm guessing the page then has some Javascript functionality which generates a clickable link from this markup.
Try using this jQuery code to access the download url:
$('.smart-track-player').attr('data-url');
An XPath expression to fetch this node would be something like this:
//div[#class='smart-track-player stp-color-ff6100']

How to handle Javascript click by using selenium Webdriver?

Am using Selenium Webdiver. My test-case is.
Login to site.
click on Notifications link.
am facing issue while clicking on notification link, having the HTML code as follows :-
<ul class="rghtSec fr menu logged"><li><a href="javascript:;">
<div class="topIcon notify"><span> </span></div>
<div class="mTxt">Notifications<span id="rJobCntr" class="rJobCntr"></span></div></a>
<div class="subMenu recommendTT">
<ul>
<li><a target="_blank" class="blob" id="blobId" href="http://jobsearch.naukri.com/notifications">
Fetching jobs you may apply for</a></li>
</ul>
I have tried by following 5 different ways:
/*1*/ driver.findElement(By.xpath("//a[#class='mTxt']")).click();
/*2*/ driver.findElement(By.cssSelector("div[class='topIcon notify']")).click();
/*3*/ driver.findElement(By.linkText("Notifications")).click();
/*4*/ driver.findElement(By.xpath("//div[#class='pNotifyCont dspN']")).click();
/*5*/ Actions mouse=new Actions(driver);
WebElement element=driver.findElement(By.xpath("//div[#class='pNotifyCont dspN']"));
mouse.moveToElement(element).click().build().perform();
Error :
Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"xpath","selector":"//a[#class='mTxt']"}
Command duration or timeout: 7.56 seconds
But none of these ways are resolving the problem :(, Can anyone please help me to solve this?

You can directly click on the link based on the value of href attribute:
driver.findElement(By.cssSelector("a[href*='notifications']")).click();
OR
driver.findElement(By.cssSelector("a[href=\"http://jobsearch.naukri.com/notifications\"]")).click();

Please replace your xpath expression as
driver.findElement(By.xpath("//div[contains(text(),'Notifications')]")).click();
The Notifications is in div tag.
If you want to select the element under this Notifications link, you can by following xpath:
driver.findElement(By.xpath("//div[contains(text(),'Notifications')]/following::a[1]")).click();

How to remove AddThis fragment identifiers (hash) from Facebook button? (Twitter's worked)

I'm trying to use Twitter and Facebook AddThis buttons in my Web app, and don't like to use those redundant fragment identifiers. However, for some reasons when I disable its tracking functionality in my app, it works only on Twitter button and not on Facebook button. I don't see any differences between the two buttons code...
Anyway, here's my code snippet:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_2 btn-addthis" addthis:url="path/to/my/url"></a>
<a class="addthis_button_preferred_1 btn-addthis" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
I implemented the second <script> in order to disable the fragment identifiers. However, when I tapped the Twitter button, the hash was successfully removed completely and just the url was there. However, the Facebook button didn't work, and the hash remained to be there for some reasons.
Why does this occur? I tried to move the second <script> tag before the first <script> but it didn't change at all (by the way which <script> should I write the first?)
And also, the reason I swapped the button with .addthis_button_preferred_1 with the one with .addthis_button_preferred_2 is that I want to display the twitter button before the Facebook button, but for some reasons, it's not swapped properly at times (about 15 ~ 20 % of the time) and the Facebook button is displayed first for some reasons... Maybe the whole AddThis functionality doesn't work...?

You should not use preferred if you want facebook and twitter only. Because if you use preferred it will set the share buttons to that users preferred social community. addthis_button_facebook for facebook and addthis_button_twitter for twitter.
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" addthis:url="path/to/my/url"></a>
<a class="addthis_button_twitter" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
I don't think you need the script, but if you do try instead to remove the class addthis_toolbox.

batman.js data-route adding characters to url

I have a html template doing this.
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing].new" data-bind="thing.id"></a>
</li>
</ul>
The data-route attribute is returning a url like this:
http://localhost:3000/#!/things/new
I don't know why it is adding the #!
I'm using batman.js 0.9 with rails 3.1
Any help figuring this out is be appreciated, thanks.

Here's a good description of hash bang urls hash bang urls. This is normal for batman to do this (pretty much all javascript frameworks do this). You can enable "pushstate:true" which will disable it (however it will fall back to hash bang if you're on a legacy browser).
Regarding your batman.js view not being rendered, I ran into a similar issue. I didn't have an error in my chrome console, however the view wasn't being rendered. You need to make sure you have a data-yield attribute for your view to attach to.
For example:
<div id="container" data-yield="main">
</div>
Excerpt from batman.js github:
Now when you navigate to /#!/faq/what-is-art, the dispatcher runs this
faq action with {questionID: "what-is-art"}. It also makes an implicit
call to #render, which by default will look for a view at
/views/app/faq.html. The view is rendered within the main content
container of the page, which is designated by setting
data-yield="main" on some tag in the layout's HTML. You can prevent
this implicit rendering by calling #render false in your action.
Are you trying to show a link to the show action for the thing? It should look like this if you are:
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing]" data-bind="thing.id"></a>
</li>
</ul>
Here's an example of some code I'm using (the order of the data- attributes doesn't matter):
<div data-foreach-section="sections" data-mixin="animation">
<a data-bind="section.SectionId" data-route="routes.sections[section]"></a>
<p data-bind="section.Name"></p>
</div>

Cannot a Back button to nested list (Latest Version)

I'm having problems trying to get the back button to show in a nexted list. I can see that the same is happening to your demo's here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
You can see the problem here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html&ui-page=Animals-8
or just click any list.
Here is my actually issue:
<ul data-role="listview" data-inset="true">';
<li data-icon="info">
<h3 class="ui-li-heading">Heading here</h3>
<p class="ui-li-desc">Author: <strong>some author</strong></p>
<p class="ui-li-desc">Description: <strong>some description</strong></p>
<ul data-role="listview" data-inset="true" data-add-back-btn="true">
<li>sometthing here</li>
</ul>
</li>
</ul>
Is this a bug or I'm I forgetting something?
Thanks
UPDATE: Another example:
<ul data-role='listview'>
<li>
<li><div>Some Text</div><p>ddd</p>
<ul data-role='listview'>
<li>
some text here
</li>
</ul>
</li>
</li>
</ul>
No back button. How do I make the back button appear?

To reenable the back button simply add data-add-back-btn="true" to the page container:
Related: JQuery Mobile Latest 03 June 2011 Version - No back button
You are using the tests and not the demo, so I guess this would be the latest (or close to) build.
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/index.html
UPDATE:
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Adding Back buttons
jQuery Mobile has a feature to automatically
create and append "back" buttons to any header, though it is disabled
by default. This is primarily useful in chromeless installed
applications, such as those running in a native app web view. The
framework automatically generates a "back" button on a header when the
page plugin's addBackBtn option is true. This can also be set via
markup if the page div has a data-add-back-btn="true" attribute.
If you use the attribute data-rel="back" on an anchor, any clicks on
that anchor will mimic the back button, going back one history entry
and ignoring the anchor's default href. This is particularly useful
when linking back to a named page, such as a link that says "home", or
when generating "back" buttons with JavaScript, such as a button to
close a dialog. When using this feature in your source markup, be sure
to provide a meaningful href that actually points to the URL of the
referring page (this will allow the feature to work for users in
C-Grade browsers. Also, please keep in mind that if you just want a
reverse transition without actually going back in history, you should
use the data-direction="reverse" attribute instead.
Maybe try:
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = true;
});