We Keep Coding

WebdriverIO invalid selector: Unable to locate an element with the xpath expression

I am facing an issue selecting an element by going up the HTML dome with WebdriverIO. Note: It is easy to select the title by text and the h1 tag or by class name, but i don't want to do that.
Instead, i'd like the iframe tag to be my starting point and select it by partial src link text "nba-scores", then go back to the previous div with class="inner" OR to the div with class="main" without selecting it by class name and once i am on the previous div go to the h1 tag and get the text with pageTitle.getText().
When i use:
get pageTitle(){return $("//iframe[contains(#src, 'nba-scores')]/parent::div//h1)")}
I am getting a SyntaxError:
SyntaxError: Failed to execute 'evaluate' on 'Document': The string '//iframe[contains(#src, 'nba-scores')]/parent::div//h1)' is not a valid XPath expression.
Here is my HTML dome
<main>
<div class="main">
<div class="inner">
<h1 class="h1class">NBA Scores</h1>
</div>
<iframe src="https://xyz/#/nba-scores/view" class="viewscores">
</iframe>
</div>
</main>
Any help would be appreciated!

You indeed have a syntax error with a stray ) that is not opened and not necessary so change "//iframe[contains(#src, 'nba-scores')]/parent::div//h1)" to "//iframe[contains(#src, 'nba-scores')]/parent::div//h1"

How to get li from a href value containing string

I've got the following html
<ul id="navigationMenuTop" class="nav navbar-nav" data-bind="foreach: getRoutes">
<li data-bind="css: ..." >
<a data-bind="attr { href: ...">
This generates a nice top bar menu where users get to go to parts of the program where they have the rights for.
Now I need to get the li where the href in a contains 'registration'
I've tried several things, the latest being
$('.navigationMenuTop li a[href*="registration"]');
but no success yet, any ideas?

I think you are mixing few things here.
This is not a knockout question, more of a jQuery + CSS questions.
navigationMenuTop is ID - so you shouldn't access it with a dot which means class.
Try # instead:
$('#navigationMenuTop li a[href*="registration"]');

You can use the parent function to get the parent of the matched anchor
$('#navigationMenuTop a[href*="registration"]').parent();
you can check this out here

$("#navigationMenuTop").on('click','li',function (){
alert($(this).text());
});

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();

javascript does not want to parse text more than twice

So i have this function in my Js that gets called on a link onclick() event.
here is the HTML:
<li class="collapsed">
<span>
Directions
</span>
<p>ajajgajajys agajgjgtajgtdja ajdtajtjate ajgdjagjd ajt</p>
</li>
And here is the Javascript:
function expand(myElem)
{
if (myElem.parentNode.parentNode.style.height<100)
myElem.parentNode.parentNode.style.height="100px";
else
myElem.parentNode.parentNode.style.height="45px";
}
Obviosuly, the code expands the li parent tags that the links are in. Originally, the li tags are set as height:45px; in CSS. Then they change to 100px and back.
The problem im having is that the javascript only works twice.
I cna click on the links oncde and expand the li's. Then i can click on them and collapse the li's. Then it doesn't want to work again.
I was looking at my browsers errors and i found this:
"Error parsing value for 'height'. Declaration dropped.
After much trolling thru the interwebs I thought it might be because i'm not including the unit declarations in my js. But I am!
myElem.parentNode.parentNode.style.height="45px"; ---- as you can see.
****NOTES: MY SOLUTION*****
For future referance for whoever stumbles on this thread, here's my solution:
HTML --> I ened up doing somethin glike:
<span class="heading">
Link1
<span>
<span class="information">
Info about Link1
</span>
<span class="heading">
Link2
<span>
<span class="information">
Info about Link2
</span>
And the Jquery was super simple:
$(document).ready(function() {
$(".information").hide();
$(".heading").click(function(){
var item = $(this);
item.next().slideToggle(500);
});
});
...super simple, works like a charm

Try to use replace and parseInt functions like,
function expand(myElem)
{
if (parseInt(myElem.parentNode.parentNode.style.height.replace('px','')) < 100)
myElem.parentNode.parentNode.style.height="100px";
else
myElem.parentNode.parentNode.style.height="45px";
}
You can use Jquery for simplifying it like,
HTML
<li class="collapsed">
<span>
Directions
</span>
<p>ajajgajajys agajgjgtajgtdja ajdtajtjate ajgdjagjd ajt</p>
</li>
SCRIPT
$(function(){
$('.direction').on('click',function(e){
var ht= $('.collapsed').height()==100 ? 45 : 100;
$('.collapsed').height(ht);
});
});

Try
if (parseInt(myElem.parentNode.parentNode.style.height)<100)

Thank you everyone for your help.
I was able to figure out that, for some reason, after the height was set the second time around to 45px, it wasn't registering as a int anymore. idk y tho. Why would it accept a declaration of 100px the first time and register it as int but not the second time? wierd.
Anyway, i tried parseInt and it worked like a charm.
But I really like the jQuery solution that Jason P provided. the transition sold me. I'm gonna go with that.
So thanks again guys.