Home

viddy 🍊 docs

import { viddy, viddyWell } from 'viddy'

Scroll down for:

• Query specification
• Installation / Imports

Query specification

viddy API methods accept objects in the following format:

Query {
  pattern: String|RegExp
  selector: CSSSelectorString
  pickParent: CSSSelectorString
  near: Query
  above: Query
  below: Query
  leftOf: Query
  rightOf: Query
  containedBy: Query
}

More detail in the index.d.ts file.

prop	used for
pattern	Visible innerText to search. If a string, the match will be case-insensitive
selector	A regular CSS selector. Can be used to refine a pattern, or used instead of one
near	Filter elements by how close they are to this one
above	Choose only elements above this one
below	Choose only elements below this one
leftOf	Choose only elements to the left of this one
rightOf	Choose only elements to the right of this one
containedBy	Choose only elements that are contained within this one
pickParent	Walk up the DOM tree from the result and return the parent that matches this selector

let sels = viddyWell.for({
  pattern: /open/,
  near: {
    pattern: 'your account',
    rightOf: 'blog title',
    near: 'settings'
  }
})

pattern is implicit if string/RegExp is the first argument:

let sels = viddyWell.for(/open/, {
  near: {
    pattern: 'your account',
    rightOf: 'blog title',
    near: 'settings'
  }
})

Same as above:

let sels = viddyWell.for(/open/, {
  near: ['your account', { rightOf: 'blog title', near: 'settings' }]
})

Notice that the array behaves the same as passing-in arguments to the API.

Installation / Imports

$ pnpm i viddy

// ESM:
import { viddy, viddyWell } from 'viddy'

// CJS:
const { viddy, viddyWell } = require('viddy')

<!-- Browser/UMD: -->
<script src="https://unpkg.com/viddy/dist/browser/viddy.browser.js"></script>
<script>
  const { viddy, viddyWell } = libViddy
</script>