Complex CSS selectors for integration testing using webdriverjs

Question

I'm trying to write some integration tests using the following tech-stack: Selenium(JavaScript bindings), WebdriverJS, Mocha & Chai.

I am essentially trying to follow this article , which for some reason suggested using WebdriverJS as opposed to the "official" SeleniumJS 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[href*="about"]', (err) ->
    expect(err).to.be.null

Unfortunately, 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?

Note (personal): The documentation of WebdriverJS is extremely poor, and the .click() function essentially has only two lines of explanation.

Answer 1

Webdriverjs supports selecting an element with xpath, you could use that. My initial impression is it's harder than to work with jquery-style selector, but eventually it turns out not so shabby.

For your selector above, one could rewrite that in xpath as below:

//a/span[text()="About"]

Be warned that the selector above is actually selecting the span inside the link as opposed to selecting the link which contains this span. I'm not too sure how to select the link itself like in your case, but I think xpath also supports something like that. For your test, the above selector still may work...