stagas / dom-recorder

Record and replay DOM interactions for e2e frontend testing.

dom-recorder

Record and replay DOM interactions for e2e frontend testing.

npm i dom-recorder

pnpm add dom-recorder

yarn add dom-recorder

Examples

# web

Try it live

# view source

example/web.ts

import { DOMRecorder } from 'dom-recorder'

declare const window: any

window.recorder = new DOMRecorder()
document.body.appendChild(window.recorder.el)

const button = Object.assign(
  document.createElement('button'),
  { textContent: 'click me' }
)
const circle = document.createElement('div')
const textarea = Object.assign(
  document.createElement('textarea'),
  { rows: 10, spellcheck: false, value: 'click record & type in here\n' }
)

let val = 0
function onclick() {
  button.textContent = `clicks: ${val++}`
}

function onkeydown(ev: KeyboardEvent) {
  ev.preventDefault()
  textarea.value += ev.key
}

function onpointermove(ev: PointerEvent) {
  requestAnimationFrame(() => {
    circle.style.cssText = /*css*/`
      position: absolute;
      left: ${ev.pageX + 5}px;
      top: ${ev.pageY + 15}px;
      width: 30px;
      height: 30px;
      background: pink;
      border-radius: 100%;
    `
  })
}

button.addEventListener('click', onclick)
textarea.addEventListener('keydown', onkeydown)
window.addEventListener('pointermove', onpointermove)

document.body.appendChild(textarea)
document.body.appendChild(button)
document.body.appendChild(circle)

import { DOMRecorder } from 'dom-recorder'

declare const window: any

window.recorder = new DOMRecorder()
document.body.appendChild(window.recorder.el)

Server endpoints to implement are:

/store?key=recorder-actions

Method	Content-Type
POST	application/json
GET	application/json

API

# DOMRecorder

# constructor()

# new DOMRecorder()

DOMRecorder

# actions  =  ...

Action []

# actionsEl

HTMLDetailsElement

# autoplay  =  false

boolean

# controlsEl

HTMLDivElement

# dirtyActions  =  false

boolean

# el

HTMLDivElement

# enabledGroups  =  ...

string []

# eventTypes  =  ...

string []

# events  =  ''

string

# formEl

HTMLFormElement

# pointerEl

HTMLDivElement

# replayed  =  0

number

# replaying  =  false

boolean

# skipped  =  0

number

# status  =  ''

string

# statusEl

HTMLElement

# unsavedActions  =  false

boolean

# deselectAll(group)

# group

string

deselectAll(group)  =>

void

# getActions()

getActions()  =>

Promise<void>

# getFormData(form)

# form

HTMLFormElement

getFormData(form)  =>

void

# maybeAutoplay()

maybeAutoplay()  =>

Promise<void>

# onBeforeUnload(event)

# event

BeforeUnloadEvent

onBeforeUnload(event)  =>

undefined | "There are unsaved actions, are you sure you want to exit?"

# paintActions()

paintActions()  =>

void

# paintControls()

paintControls()  =>

void

# paintEl()

paintEl()  =>

void

# paintForm()

paintForm()  =>

void

# paintStatus(kind)

# kind

number

paintStatus(kind)  =>

void

# postActions()

postActions()  =>

Promise<void>

# render()

render()  =>

void

# replayServer()

replayServer()  =>

Promise<void>

# selectAll(group)

# group

string

selectAll(group)  =>

void

# showDetails(el)

# el

HTMLDivElement

showDetails(el)  =>

void

# startRecording()

startRecording()  =>

void

# startReplaying(n, actions)

# n

null | number

# actions

Action []

startReplaying(n, actions)  =>

Promise<void>

# stopRecording()

stopRecording()  =>

void

# stopReplaying()

stopReplaying()  =>

void

# trimActions()

trimActions()  =>

void

# waitUntilIdle()

waitUntilIdle()  =>

Promise<void>

# Action

# event

SavedEvent

# selectors

string []

# Events

InputEvent & KeyboardEvent & MouseEvent & PointerEvent & WheelEvent

# SavedEvent

Events & {

# capture

boolean | undefined

# is

StringKeys<typeof EventConstructorsMap>

}

Credits

• everyday-types by stagas – Everyday utility types
• everyday-utils by stagas – Everyday utilities

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas