Socket
Socket
Sign inDemoInstall

keysim

Package Overview
Dependencies
0
Maintainers
2
Versions
12
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

keysim

Keyboard simulator for JavaScript.


Version published
Maintainers
2
Weekly downloads
42
decreased by-39.13%

Weekly downloads

Readme

Source

keysim.js

Simulate typing into DOM elements. This can be used anywhere you need to simulate user keystrokes, but is particularly useful in testing environments.

build status

Installation

# Install via yarn.
$ yarn add [--dev] keysim
# Install via npm.
$ npm install [--save-dev] keysim
# Install by copying the dist file.
$ curl -o path/to/vendor/keysim.js https://unpkg.com/keysim@latest/dist/keysim.js

Usage

There are two high-level methods for simulating keystrokes on a DOM element, one for typing input into an element and one for typing non-input "action" keystrokes. Note that none of the methods provided by keysim will trigger the browser's default behavior, such as inserting text or moving the cursor. It only allows you to test your event handling code by sending the correct DOM events.

Entering Text

Get a standard keyboard and use it to fire events onto a DOM element:

let input = document.getElementById("name");
let keyboard = Keysim.Keyboard.US_ENGLISH;
keyboard.dispatchEventsForInput("hello!", input);

This will fire events keydown, keypress, keyup, and textInput events for each typed character in the input string. In addition, some characters may require modifier keys in order to type. The keydown and keyup events will be fired for these modifier keys (e.g. the SHIFT key) as appropriate. 1

Triggering Special Actions

It is also sometimes useful to simulate special keys, or actions that do not cause input. For example, here's how to simulate backward deleting a word and selecting all text in the input:

let input = document.getElementById("name");
let keyboard = Keysim.Keyboard.US_ENGLISH;
keyboard.dispatchEventsForAction("alt+backspace", input);
keyboard.dispatchEventsForAction(`${osx ? "meta" : "ctrl"}+a`, input);

Raw Keystroke Dispatch

If you need to dispatch events for an exact sequence of keystrokes you may use Keyboard#dispatchEventsForKeystroke, which is used by both Keyboard#dispatchEventsForInput and Keyboard#dispatchEventsForAction.

let input = document.getElementById("name");
let keyboard = Keysim.Keyboard.US_ENGLISH;
let ctrl_shift_enter = new Keysim.Keystroke(
  Keysim.Keystroke.CTRL | Keysim.Keystroke.SHIFT,
  13
);
keyboard.dispatchEventsForKeystroke(ctrl_shift_enter, input);

1 Here is the complete set of events fired (as reported by this page):

keydown  keyCode=72  (H)   which=72  (H)   charCode=0
keypress keyCode=104 (h)   which=104 (h)   charCode=104 (h)  
textInput data=h
keyup    keyCode=72  (H)   which=72  (H)   charCode=0
keydown  keyCode=69  (E)   which=69  (E)   charCode=0
keypress keyCode=101 (e)   which=101 (e)   charCode=101 (e)  
textInput data=e
keyup    keyCode=69  (E)   which=69  (E)   charCode=0
keydown  keyCode=76  (L)   which=76  (L)   charCode=0
keypress keyCode=108 (l)   which=108 (l)   charCode=108 (l)  
textInput data=l
keyup    keyCode=76  (L)   which=76  (L)   charCode=0
keydown  keyCode=76  (L)   which=76  (L)   charCode=0
keypress keyCode=108 (l)   which=108 (l)   charCode=108 (l)  
textInput data=l
keyup    keyCode=76  (L)   which=76  (L)   charCode=0
keydown  keyCode=79  (O)   which=79  (O)   charCode=0
keypress keyCode=111 (o)   which=111 (o)   charCode=111 (o)  
textInput data=o
keyup    keyCode=79  (O)   which=79  (O)   charCode=0
keydown  keyCode=16        which=16        charCode=0
keydown  keyCode=49  (1)   which=49  (1)   charCode=0
keypress keyCode=33  (!)   which=33  (!)   charCode=33  (!)  
textInput data=!
keyup    keyCode=49  (1)   which=49  (1)   charCode=0
keyup    keyCode=16        which=16        charCode=0
keydown  keyCode=91  ([)   which=91  ([)   charCode=0

Building

Ensure that the keysim dependencies are installed (yarn install). Then run yarn build to re-create dist/keysim.js.

Testing

To run the tests in Chrome, run yarn test:browser. To run the tests in node, run yarn test:node. Running yarn test will run both.

Contributing

Fork the project, create a branch, and fix your bug or add your feature on that branch. Be sure to add tests for your bug fix or feature.

Keywords

FAQs

Last updated on 13 Jun 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc