Syn JS
134 views
Skip to first unread message
Justin Meyer
Jul 11, 2010, 12:41:03 AM7/11/10
to JavaScriptMVC
I've got Syn, our synthetic event library, pretty much cleaned up and
read to go. I'm really excited about it. It can be used
independently of jQuery, JavaScriptMVC, and even FuncUnit.
It's almost an instant drop in replacement for Selenium. And Selenium
should definitely consider replacing their core library right away
with Syn. The following details the reasons why.
If you are unfamiliar with Selenium, it's by far the best open-source
tool for testing. But it has serious limitations when you are trying
to test things that approach the edges of what the browser can do. I
haven't use Selenium without our custom Syn version for a while, but I
remember lots of issues like:
Problems with typing in inputs and textareas that use text ranges.
For example, if you call .select() on focus.
Clicking a checkbox, then clicking away does not focus and then
trigger change on blur.
Typing a key does not issue the right keyCode and charCodes for the
particular key and browser.
Clicking doesn't cause a mousedown / focus / mouseup / click. And
preventDefault of a mousedown doesn't prevent the default behavior.
There's a host of problems, but I've forgotten many.
So, with Syn, we've tried to handle all default events and event
sequences exactly how that browser handles them with no browser
sniffing.
Well, we had to sniff in one place b/c safari crashes :-), but only
one.
The result is Syn, pretty much handles typing, clicking, moving, and
dragging, exactly how a real user would perform those actions. Here's
a sampling of some of the supported events and features.
TYPING
-Run keydown / keypress / keyup with correct char/keyCode and other
values.
-Some keys, like shift don't trigger keypress. The print key only
triggers a keyup event. And, these happen differently for every
browser. Syn gets this all right.
-Handles text ranges in inputs and textareas. For example, you can
Syn.type('12[shift][left][left][shift-up]') and that will type 12 and
then select that text.
-Handles copy and paste from anywhere and to inputs and textareas
-Handles select all: Syn.type('[ctrl]a[ctrl-up]'_
-Handles direction keys like up, down, home, end, page-up, page-down,
left, right. These will move the cursor or scroll a window.
-Handles backspace and delete keys.
-Carriage return submits forms, adds a new line to textareas, or
triggers a click on anchors. Syn.type('\r').
-Handles tab characters, tabing in a form. Syn.type('Justin\tMeyer
\t27')
-Prevent default actions on key events can happen on different events
in different browsers. Syn acts accordingly.
Clicking
-A click is a mousedown, a possible focus, a mouseup, and a click.
Syn triggers all these events (just like a user). It also handles all
default events such as:
->mousedown causes a focus
->clicking a link runs that link's href JavaScript
->clicking a button submits a forum.
->clicking a checkbox, radio or select element focuses the input and
calls change on blur.
Drag
-If jQuery is present, uses jQuery's more accurate offset method to
calculate starting position of an element.
-Uses elementFromPoint to trigger mouseover / mouseout events.
Move
- can be used to test hovering, mouseover / out behavior.
I'm going to write all this up this week. But I wanted to give some
Selenium people heads up of Syn before we make an official release.
You can find syn's code:
http://github.com/pinhook/funcunit/tree/master/synthetic/
The most important files are:
synthetic.js
key.js
mouse.js
drag/drag.js
When the blog-post comes out it will include instructions on how to
build the combined syn.js file. Also, the demo is pretty cool. It
records your clicks and keys like Selenium IDE.
read to go. I'm really excited about it. It can be used
independently of jQuery, JavaScriptMVC, and even FuncUnit.
It's almost an instant drop in replacement for Selenium. And Selenium
should definitely consider replacing their core library right away
with Syn. The following details the reasons why.
If you are unfamiliar with Selenium, it's by far the best open-source
tool for testing. But it has serious limitations when you are trying
to test things that approach the edges of what the browser can do. I
haven't use Selenium without our custom Syn version for a while, but I
remember lots of issues like:
Problems with typing in inputs and textareas that use text ranges.
For example, if you call .select() on focus.
Clicking a checkbox, then clicking away does not focus and then
trigger change on blur.
Typing a key does not issue the right keyCode and charCodes for the
particular key and browser.
Clicking doesn't cause a mousedown / focus / mouseup / click. And
preventDefault of a mousedown doesn't prevent the default behavior.
There's a host of problems, but I've forgotten many.
So, with Syn, we've tried to handle all default events and event
sequences exactly how that browser handles them with no browser
sniffing.
Well, we had to sniff in one place b/c safari crashes :-), but only
one.
The result is Syn, pretty much handles typing, clicking, moving, and
dragging, exactly how a real user would perform those actions. Here's
a sampling of some of the supported events and features.
TYPING
-Run keydown / keypress / keyup with correct char/keyCode and other
values.
-Some keys, like shift don't trigger keypress. The print key only
triggers a keyup event. And, these happen differently for every
browser. Syn gets this all right.
-Handles text ranges in inputs and textareas. For example, you can
Syn.type('12[shift][left][left][shift-up]') and that will type 12 and
then select that text.
-Handles copy and paste from anywhere and to inputs and textareas
-Handles select all: Syn.type('[ctrl]a[ctrl-up]'_
-Handles direction keys like up, down, home, end, page-up, page-down,
left, right. These will move the cursor or scroll a window.
-Handles backspace and delete keys.
-Carriage return submits forms, adds a new line to textareas, or
triggers a click on anchors. Syn.type('\r').
-Handles tab characters, tabing in a form. Syn.type('Justin\tMeyer
\t27')
-Prevent default actions on key events can happen on different events
in different browsers. Syn acts accordingly.
Clicking
-A click is a mousedown, a possible focus, a mouseup, and a click.
Syn triggers all these events (just like a user). It also handles all
default events such as:
->mousedown causes a focus
->clicking a link runs that link's href JavaScript
->clicking a button submits a forum.
->clicking a checkbox, radio or select element focuses the input and
calls change on blur.
Drag
-If jQuery is present, uses jQuery's more accurate offset method to
calculate starting position of an element.
-Uses elementFromPoint to trigger mouseover / mouseout events.
Move
- can be used to test hovering, mouseover / out behavior.
I'm going to write all this up this week. But I wanted to give some
Selenium people heads up of Syn before we make an official release.
You can find syn's code:
http://github.com/pinhook/funcunit/tree/master/synthetic/
The most important files are:
synthetic.js
key.js
mouse.js
drag/drag.js
When the blog-post comes out it will include instructions on how to
build the combined syn.js file. Also, the demo is pretty cool. It
records your clicks and keys like Selenium IDE.
Justin Meyer
Jul 11, 2010, 12:46:19 AM7/11/10
to JavaScriptMVC
When I say drop in replacement for Selenium, I mean it can replace
selenium's core synthetic event JS functionality pretty easily.
Also, sorry about my spelling and grammar. Re-reading it makes me
want to barf. But it's late.
selenium's core synthetic event JS functionality pretty easily.
Also, sorry about my spelling and grammar. Re-reading it makes me
want to barf. But it's late.
Justin Meyer
Jul 12, 2010, 12:32:09 AM7/12/10
to JavaScriptMVC
Here's the Syn demo page: http://v3.javascriptmvc.com/funcunit/synthetic/synthetic.html
--
You received this message because you are subscribed to the Google Groups "JavaScriptMVC" group.
To post to this group, send email to javasc...@googlegroups.com.
To unsubscribe from this group, send email to javascriptmv...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascriptmvc?hl=en.
Justin Meyer
Jul 13, 2010, 3:19:19 AM7/13/10
to JavaScriptMVC
The Syn article: http://jupiterjs.com/news/syn-a-standalone-synthetic-event-library
And if you haven't check out the demo: http://v3.javascriptmvc.com/funcunit/synthetic/synthetic.html
DFX
Jul 13, 2010, 9:49:12 PM7/13/10
to JavaScriptMVC
So...how does one replace Selenium's event handling with Syn?
Justin Meyer
Jul 13, 2010, 10:04:41 PM7/13/10
to javasc...@googlegroups.com
I'm hoping to work with the folks who develop selenium to make a Syn release.
However, if you aren't using selenium's API with existing tests and can wait a few more days, we are releasing FuncUnit which has selenium and Syn packaged together (but does not modify selenium's API and instead provides its own).
You can find our custom selenium build (with Syn) here: http://github.com/pinhook/selenium
Reply all
Reply to author
Forward
0 new messages