@nichoth/dom

dom

Helpers for working with the DOM, useful for tests.

install

npm i -D @nichoth/dom

use

import

import { dom } from '@nichoth/dom'

// or import individual functions
import { waitFor } from '@nichoth/dom'

require

const dom = require('@nichoth/dom').dom

API

convenient shortcuts

dom.qs points to document.querySelector

dom.qsa is equal to document.querySelectorAll

dom.waitFor

Look for a DOM element by slector. Default timeout is 5 seconds. Throws if the element is not found.

function waitFor (args:{
    selector?:string,
    visible?:boolean,
    timeout?:number
}|string, lambda?:() => Element|null):Promise<Element>

example

import { waitFor } from '@nichoth/dom'

const foundElement = await waitFor({
    selector: 'p'
})

// or pass in a string to use as a query selector
const el = await waitFor('#my-element')

dom.waitForText

Look for an element containing the given text, or that matches a given regex. Return the element if found. Default timeout is 5 seconds. Throws if the element is not found.

function waitForText (args:{
    text?:string,
    timeout?:number,
    element:Element,
    multipleTags?:boolean,
    regex?:RegExp
}):Promise<Element>

example

import { waitForText } from '@nichoth/dom'

const el = await waitForText({
    element: document.body,
    regex: /bar/
})

Pass in a parent element and timeout.

const found = await waitForText({
    element: dom.qs('#test-two'),
    multipleTags: true,
    text: 'bbb',
    timeout: 10000  // 10 seconds
})

click

Dispatch a click event from the given element.

import { dom } from '@nichoth/dom'
// or import { click } from '@nichoth/dom'

dom.click(dom.qs('#my-element'))

event

Dispatch an event from an element.

function event (args:{
    event:string|Event;
    element?:HTMLElement|Element|typeof window
}):void

event example

import { dom } from '@nichoth/dom'

dom.event({ event: 'hello', element: dom.qs('#example') })

sleep

Wait for the given milliseconds.

async function sleep (ms:number):Promise<void>

sleep example

import { sleep } from '@nichoth/dom'

await sleep(3000)  // wait 3 seconds

credits

Thanks Jake Verbaten for writing this originally.