kldavis4 / syn

Standalone Synthetic Event Library

For questions or discussion checkout our forums.

If you are looking for the Synergy project, you can find it here. Thanks postquagga for letting us use the name!

Syn lets you simulate user behavior like typing, clicking, moving, and dragging exactly how a real user would perform those actions.

Syn.click( 'hello' )
   .type( 'Hello World' )
   .drag( 'trash' ); 

Install

Install Syn via the command line with npm:

> npm install syn

or bower:

> bower install syn

Or by downloading it here.

Inside the download, npm package and bower package, there are the following folders:

• dist/global/syn.js - A standalone file that can be used with a <script> tag.
• dist/amd - An AMD build that can be used with RequireJS and other AMD loaders.
• dist/cjs - A CommonJS build that is used by node or browserify.
• src - The source files that can be loaded by StealJS, SystemJS, and eventually JSPM.

Setup

The following walk you through how to load Syn into various environments.

Node / Browserify

Assuming you installed with npm, simply require("syn") like the following:

var syn = require("syn");
syn.click(document.getElementById('hello'));

StealJS

If you installed via NPM or Bower and are using the npm or bower module for configuration, you can use import, require, or define to load the syn module without any configuration.

import syn from "syn";
syn.click(document.getElementById('hello'));

AMD / RequireJS

Add the following package configuration:

require.config({
    packages: [{
        name: 'syn',
        location: 'PATH/TO/syn/dist/amd',
        main: 'syn'
    }]
});

PATH/TO should be the path from your baseUrl to the location of the syn folder. Once this is properly configured, you should be able to write:

define(['syn'], function(syn){
  syn.click(document.getElementById('hello'));
});

Script Tag / Standalone

If you don't use a module loader, you can simply add the following to your page:

<script src='PATH/TO/dist/syn.js'></script>

PATH/TO should be the path to the installed syn folder.

Use

syn.click( element [, options][, callback] )

syn.dblclick( element [, options][, callback] )

syn.type( element, text [, callback] )

syn.key( element, key [, callback] )

syn.delay( time=600 )

syn.drag( element, optionsOrTarget [, callback])

Contributing

To fix a bug, fork and clone bitovi/syn to your computer. Next, install its npm dependencies with:

npm install

Please add a test within the tests folder and make your changes to syn.js source files in the src folder. For a quick check that everything is working, open test/test.html.

To make sure all the distributables are working, run:

npm test

Code Organization

All source files are in the src folder. Here's what each files does:

• browsers.js - Contains the output of utils/recorder.html data.
• drag.js - Drag / drop utility.
• key.js - Typing and key event simulation.
• key.support.js - Feature detection of key event behavior.
• mouse.js - Click and mouse event simulation.
• mouse.support.js - Feature detection of mouse event behavior.
• syn.js - Main entrypoint that loads all other modules.
• synthtic.js - Creates the syn object and adds helpers used by other modules.
• typeable.js - Used to test if an element can be typed into.

Tests are in the test folder.

utils/recorder.html is used to record behaviors of the browser that can not be feature detected. Those behaviors are added to src/browser.js.

Relevant Links

1. http://bitovi.com/blog/2010/07/syn-a-standalone-synthetic-event-library.html
2. Full Syn docs coming soon!