PhantomJS 2.1.1 not delegating click events from table row to table cell #14724

Open
yanekk opened this Issue Dec 29, 2016 · 4 comments

Projects

None yet

2 participants

@yanekk
yanekk commented Dec 29, 2016

PhantomJS 2.1.1, Windows 10, binary downloaded from website. Initialized with following built-in webdriver with --webdriver switch on port 8090.

  1. Prepare simple HTML page:
<!DOCTYPE html>
<html>
  <head>
    <title>Test Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('#clickme td').click(function() {
                $("body").append($("<h1>").text("Success"));
            });
        });
    </script>
  </head>
  <body>
    <table>
      <tr id='clickme'>
        <td>Test1</td>
        <td>Test2</td>
      </tr>
    </table>
  </body>
</html>
  1. Pay attention to event binding - click event is attached to each table cell, not table row.
  2. Prepare sample script:
var driver = new RemoteWebDriver(new Uri("http://localhost:8090"), new DesiredCapabilities());
driver.Navigate().GoToUrl(@"file:///C://<path-to-you>/test.html");

driver.FindElementById("clickme").Click();
Assert.AreEqual("Success", driver.FindElementByTagName("h1").Text); // will fail, because h1 is not created

driver.FindElementByCssSelector("#clickme td").Click();
Assert.AreEqual("Success", driver.FindElementByTagName("h1").Text); // will pass
  1. Generally, first try finds table row via id selector element and clicks it, failing with no header being created, even though it should be through event delegation (as it works in ChromeDriver, or Chrome in general). Second try attaches to table cell, therefore event is fired directly on bound element and h1 element is created and visible.
@twalpole
twalpole commented Jan 13, 2017 edited

I'm confused by why you think this should work? Events propagate up the DOM tree not down it so an event fired on the row is never going to be seen on the cells

@yanekk
yanekk commented Jan 14, 2017

As I mentioned above, the same code works on ChromeDriver, FirefoxDriver and naturally by clicking on the row by hand. I assume, that it is obvious that PhantomJS should work the same way as other drivers.

@twalpole

The reason the other drivers "work" (and manually) is that they ARE actually clicking one of the <td> elements, not because of event propagation (events propagate up the DOM not down). You can see this by adjusting the CSS of your example to create spacing between the two td elements and then running it again. This is happening because the two tds completely overlap the tr in your example. There's an argument that can be made saying that PhantomJS should just click the point on the screen that would be the middle of the tr (which is what is happening with the other drivers), or that it should warn that it can't actually click the element you're asking it to, and an even bigger argument that if you want it to click the td element you should just click the td.

@yanekk
yanekk commented Jan 14, 2017

I agree with you completely about event propagation - thanks for sorting it out. I raised this issue not because of pure curiosity and bug-hunting, but because of real life situation. In my application under test, click event is attached to each table cell, but not to table row. Previously, tests were running smoothly because of usage of ChromeDriver and clicking row was ultimately clicking cell that overlaps it. That works perfectly fine and with all benefits that headless browsers provides, I started with experiments leading to replace ChromeDriver by PhantomJS. After switching to PhantomJS, all of my tests started to fail because of different click handling between drivers. As you said - we may discuss if PhantomJS should handle element clicking identically to other popular drivers (requiring testers to make adjustments to their tests) or do proper way. Either way, my honest opinion is that drivers shouldn't work differently, at least in terms of event-handling.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment