macacajs / dom-event-simulate

simulate user interaction with DOM events.

dom-event-simulate

simulate user interaction with DOM events.

Contributors

xudafeng	paradite	yihuineng	elaine1234	cyjake	snapre

This project follows the git-contributor spec, auto updated at Sun Apr 24 2022 00:26:12 GMT+0800.

Installment

$ npm i dom-event-simulate --save-dev

CDN

https://unpkg.com/dom-event-simulate@latest/lib/dom-event-simulate.js

Usage

const { domEvent } = require('dom-event-simulate');
// input @
domEvent(element, 'keydown', {
  keyCode: 50,
  key: '@',
});
// start a drag
domEvent(dom, 'mousedown', {
  clientX: point.x,
  clientY: point.y,
});
domEvent(dom, 'mousemove', {
  clientX: point.x + 10,
  clientY: point.y + 10,
});
domEvent(dom, 'mouseup', {
  clientX: point.x + 10,
  clientY: point.y + 10,
});

var element = document.querySelector('#input');

element.addEventListener('change', function(e) {
  console.log(e.target.files);
}, false);

domEvent(element, 'change', {
  data: {
    target: {
      files: [
        {
          file: 'file1.png',
        },
        {
          file: 'file2.jpg',
        }
      ],
    },
  }
});

Use with macaca-wd

see: https://macacajs.github.io/macaca-wd/#domEvent

Support Events

type	name	args
mouseEvents	click
mouseEvents	dblclick
mouseEvents	mouseover
mouseEvents	mouseout
mouseEvents	mouseenter
mouseEvents	mouseleave
mouseEvents	mousedown
mouseEvents	mouseup
mouseEvents	mousemove
mouseEvents	dragstart
mouseEvents	dragenter
mouseEvents	dragover
mouseEvents	dragleave
mouseEvents	drag
mouseEvents	drop
mouseEvents	dragend
mouseEvents	wheel
keyboardEvent	keydown
keyboardEvent	keyup
keyboardEvent	keypress
UIEvents	submit
UIEvents	blur
UIEvents	change
UIEvents	focus
UIEvents	resize
UIEvents	scroll
UIEvents	select
bubbleEvents	scroll
bubbleEvents	resize
bubbleEvents	reset
bubbleEvents	change
bubbleEvents	select
bubbleEvents	error
bubbleEvents	abort
TouchEvent	touchstart
TouchEvent	touchmove
TouchEvent	touchend
TouchEvent	touchcancel
GestureEvent	gesturestart
GestureEvent	gesturechange
GestureEvent	gestureend

Helper Methods

const { helper: eventHelper } = require('dom-event-simulate');

// Type content to input element.
eventHelper.elementInput

// Type content to a contentEditable element.
eventHelper.formInput

License

The MIT License (MIT)