Git Product home page Git Product logo

dom-event-simulate's Introduction

dom-event-simulate

NPM version Package quality CI Test coverage node version npm download

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)

dom-event-simulate's People

Contributors

cyjake avatar elaine1234 avatar paradite avatar snapre avatar xudafeng avatar yihuineng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

cyjake turnsgreen

dom-event-simulate's Issues

element input breaks UI

I try this library on bing by following steps

  1. open https://bing.com
  2. load script by pasting following code snippet in chrome's console
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/dom-event-simulate@latest/lib/dom-event-simulate.js';
document.head.appendChild(script);
  1. execute
_macaca_simulate.helper.elementInput(document.querySelector('div.b_searchboxForm'), 'hello world')

And it becomes what you see in the screenshot.
微软_Bing_搜索_-_国内版

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.