PhantomJSDriver failing to select a jQuery ui tab

Question

I'm seeing a strange failure with not being able to select the second tab of a pair of jQuery ui tabs. This works perfectly fine with ChromeDriver but fails with PhantomJSDriver.

My PhantomJS version: 1.9.8

jQuery version: 1.10.2

jQuery ui version: 1.10.3

IDE: VS2012

You can find a copy of my page here: http://jsfiddle.net/anjw2gnr/1/

This is the relevant part of the page:

<div id="tabs">
    <ul>
        <li>
            <a href="#tabs-1">Tab 1</a>
        </li>
        <li>
            <a href="#tabs-2">Tab 2</a>
        </li>
    </ul>
    <div id="tabs-1">
        <button id="tabOneBtn">I'm in tab one</button>
        <p id="tabOneCount"></p>
    </div>
    <div id="tabs-2">
        <button id="tabTwoBtn">I'm in tab two</button>
        <P id="tabTwoCount"></P>
    </div>
</div>

This is what my unit test looks like:

[TestMethod, TestCategory("SampleTest")]
public void SampleJQueryTabsTest()
{
    driver.FindElement(By.XPath("//div[@id='tabs']/ul/li[1]")).Click();

    driver.FindElement(By.Id("tabOneBtn")).Click();

    // assert that count is now 1
    Assert.AreEqual("1", driver.FindElement(By.Id("tabOneCount")).Text);

    // Click the second tab
    driver.FindElement(By.XPath("//div[@id='tabs']/ul/li[2]")).Click();

    driver.FindElement(By.Id("tabTwoBtn")).Click();

    // assert that count is now 1
    Assert.AreEqual("1", driver.FindElement(By.Id("tabTwoCount")).Text);
}

Running with the ChromeDriver, everything passes. However, when I run with the PhantomJSDriver, it fails on the following line:

driver.FindElement(By.Id("tabTwoBtn")).Click();

Result Message:

Test method MyProject.WebDriverDemo.SampleJQueryTabsTest threw exception: OpenQA.Selenium.ElementNotVisibleException: {"errorMessage":"Element is not currently visible and may not be manipulated","request":{"headers":{"Accept":"application/json, image/png","Connection":"Close","Content-Length":"0","Content-Type":"application/json;charset=utf-8","Host":"localhost:49593"},"httpVersion":"1.1","method":"POST","post":"","url":"/click","urlParsed":{"anchor":"","query":"","file":"click","directory":"/","path":"/click","relative":"/click","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/click","queryKey":{},"chunks":["click"]},"urlOriginal":"/session/e22c43f0-7c05-11e4-9c9e-6191347cc85b/element/%3Awdc%3A1417732544176/click"}}

The element in question that is not visible is the button under tab 2, however the only reason that the button would be not visible is if tab 2 was never clicked. So that means the following line failed, but only using PhantomJSDriver:

driver.FindElement(By.XPath("//div[@id='tabs']/ul/li[2]")).Click();

Any ideas on why this would only fail for PhantomJSDriver and not ChromeDriver? Is this a possible bug in PhantomJS?

Additional Notes:

When I put the following line into Quick Watch in VS2012:

driver.FindElement(By.XPath("//div[@id='tabs']/ul/li[2]"))

I see the following for the Selected property:

driver.FindElement(By.XPath("//div[@id='tabs']/ul/li[2]")).Selected' threw an exception of type 'OpenQA.Selenium.InvalidElementStateException' bool {OpenQA.Selenium.InvalidElementStateException}

However, when running with ChromeDriver, the Selected property simply shows value of false and not an InvalidElementStateException.

Answer 1

The problem is that you click on the list element and not on the accompanying link (a). PhantomJS' element.click function doesn't always work which is probably the reason why ghostdriver cannot click on a non-clickable element. But an a element is clickable.

So you need to click on .../li[2]/a instead of .../li[2].