JSPM

pull-dom-driver

2.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q15587F
  • License MIT

A pullstream "webdriver" for interacting with changes to the dom.

Package Exports

  • pull-dom-driver

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pull-dom-driver) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Build Status

pull-dom-driver

A pullstream "webdriver" for interacting with changes to the dom.

When you're testing client side apps like react or inu, finding and interacting with elements that appear dynamically is painful. pull-dom-driver uses a pull-stream source of dom mutations from pull-dom-mutants to find(".list") and click("#go-button") on elements once they're actually in the dom.

Usage

Let's find an element that isn't in the dom yet but will be:

//in the browser
var createDomStream = require('pull-dom-driver')
var pull = require('pull-stream')

var domStream = createDomStream(document, window)
pull(
  domStream.find('#mutant')
  pull.drain((elem) => console.log(`I found this: ${elem}`))
)

var myDiv = document.createElement('div')
myDiv.id = "mutant" 
document.body.appendChild(myDiv)

This will output

"I found this: [object HTMLDivElement]"

API

var createDomStream = require('pull-dom-driver')

createDomStream(rootElement)

Takes the rootElement on which you'd like to obseve changes.

var domStream = createDomStream(el)

Returns an object with the following keys:

  • subscribe
  • find
  • click

domStream.find(cssSelectorString)

Takes a cssSelectorString for the element(s) you'd like to find. Returns a pull-stream source of elements that have been found in the dom. Note that if there is an element that matches the selector when the stream is created it will be emitted by the stream first.

domStream.click(cssSelectorString)

Takes a cssSelectorString for the element(s) you'd like to click on. Returns a pull-stream source of elements that have been clicked in the dom. Note that if there is an element(s) that matches the selector when the stream is created it will be emitted by the stream first.

domStream.subscribe()

Returns a pull-stream source of dom mutations from pull-dom-mutants

Install

With npm installed, run

$ npm install pull-dom-driver

Acknowledgments

pull-dom-driver was inspired by..

See Also

License

MIT