Home - shuckster/viddy GitHub Wiki

viddy 🍊 docs

import { viddy, viddyWell } from 'viddy'

Scroll down for:

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>

viddy 🍊 | on npm | docs home | top of page

⚠️ **GitHub.com Fallback** ⚠️