Complex CSS selectors for integration testing using webdriverjs

Complex CSS selectors for integration testing using webdriverjs

I'm trying to write some integration tests using selenium + webdriverjs +
mocha + chai. I am essentially trying to follow this article, which for
some reason suggested using webdriverjs as opposed to the "official"
selenium JS bindings.
I want to set up a simple script to navigate to our homepage, and click on
the link that leads to the About page. The HTML is as follows:
<ul id="nav">
...
<li>
<a href="/about/">
<span>About</span>
</a>
</li>
...
</ul>
Now, I wrote this code to click on this link:
client
.url(my_url)
.getTitle (err, title) ->
expect(err).to.be.null
.click 'a:has(span:contains("About"))', (err) ->
expect(err).to.be.null
But the last line always throws an error! I realize I am using nested CSS
selectors, which may be tough to parse. But when I try to access this
element using jQuery from the browser, I do get the object with the exact
same line!
Any ideas as to what the problem may be in this case? The documentation of
webdriverjs is extremely poor, and click function essentially has only two
lines of explanation. Is this the proper way of doing integration testing
in Javascript and Selenium?
We do all our backend coding in Python, and at some point I was very
tempted to use the Python bindings of Selenium. However, I somehow
convinced myself that doing the frontend integration tests using
Javascript would be more appropriate. I am having doubts as to whether
this is true though. Maybe I should stick to Python?