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.

possible duplicate of [Element.Click not executed when using PhantomJS selenium webdriver in .Net](http://stackoverflow.com/questions/19663963/element-click-not-executed-when-using-phantomjs-selenium-webdriver-in-net) — Artjom B., Dec 04 '14 at 23:46
Hi, I tried to change the window size but that didn't fix the issue. I think the root cause of this issue is that for some reason, PhantomJSDriver will not let me click the tab because of the element is in an invalid state. However, this invalid state only occurs in PhantomJSDriver. — SpartaSixZero, Dec 05 '14 at 14:32
Can you separate the `FindElement` from the `Click` to be sure which operation actually causes it? Have you tried to click on `.../li[2]/a` instead of `.../li[2]`? — Artjom B., Dec 05 '14 at 14:57
Yep. That was it! I can't believe it failed just because I didn't add the "/a" at the end of my XPath. Wow. Thanks for your help! But still its a VERY strange kink that ChromeDriver accepts the XPath without the "/a" but PhantomJSDriver is just picky. — SpartaSixZero, Dec 05 '14 at 15:48

score 0 · Accepted Answer · answered Dec 05 '14 at 15:52

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].

PhantomJSDriver failing to select a jQuery ui tab

1 Answers1