nathanboktae / mocha-phantomjs-core

Easiest way to run client-side Mocha tests in PhantomJS or SlimerJS :ghost:
MIT License
34 stars 11 forks source link

Add sending events support #16

Closed antonfisher closed 8 years ago

antonfisher commented 8 years ago

Hello Nathan, I use your library for testings, but I have needed to call phantomjs sendEvent() function for better emulation and troubles with MouseEvents in the phatomjs. Solution is in PR, I think the addition could be useful. Thanks for your library!

nathanboktae commented 8 years ago

Why would you couple your code to running only in phantomjs? This is a bad idea. Just use dispatchEvent.

sendEvent is just as buggy too (ariya/phantomjs#11094).

If you want to test from the outside, try mocha-casperjs or a variety of Selenium/webdriver based frameworks.

Also you have no tests.

antonfisher commented 8 years ago

I use Mocha for UI testing, it includes unit testing and some simulation testing, for example clicks on page elements.

I inject Mocha and suites .js files directly to html page and open tests page in browser, this is simple for tests debugging. And this solution can include visualization of test actions (as makes Bryntum in Siesta testing tool).

So the aim is executing UI tests in browser with visualisation, direct access to page's js code for unit tests and abilities for simulate user actions. It works properly in browser.

But if you want to do it automatically you could use PhantomJs. The easiest way which I have found:

mocha-phantomjs --no-color --view 1000x500 http://localhost:8000/...

This works properly too, I get the same output and exit status for Jenkins. It works for nightly builds.

Why do I not use dispatchEvent? In my opinion, using direct method of target element is not correct way for simulate event. For example, I want to click on the button, I have the button's element object in code and I could call dispatchEvent. But actually button may be masked by other layer in UI. So, the more correct solution is (works in Chrome):

document.elementFromPoint(x, y).click();

But this is not supported in PhantomJs, what is why I use sendEvent. Final library code looks like:

if (window.callPhantom) {
    // for phantomjs
    window.callPhantom({
        sendEvent: ['click', x, y]
    });
} else {
    // for browsers
    document.elementFromPoint(x, y).click();
}

Yes, sendEvent is buggy, but new Events is buggy too (https://github.com/ariya/phantomjs/issues/11289). By the way I was surprised by the numbers of issues in PhantomJs :)

I use Mocha with ExtJs which has huge DOM structure and using CasperJs, Selenium framework requires writing additional code too (my experience with Selenium and ExtJs was a kind of painful). But if I need to write extra code for run my tests why don't doing this in pure PhantomJs.

Yes, I have not wrote tests for PR. But I tried to run. Maybe I'm doing something wrong. Some proposals for npm test section in README.md:

After these steps I still have fails for local run:

  42 passing (15s)
  2 failing

But it could be fixed, just need some time for debug. I can add test for the PR, if solution is reasonable for you.

Thank you!

antonfisher commented 8 years ago

I have added test for sendEvent function.

nathanboktae commented 8 years ago

Great test. Sure I'll take this in - since it has been asked before, I guess it's in demand.

nathanboktae commented 8 years ago

FYI I have a breaking change in master (#14) and I'm working on slimerjs support, so it'll be in the next major version, 2.0.

antonfisher commented 8 years ago

Thanks, Nathan!