Skip to main content

​
Signature

snapshot(options?: SnapshotOptions): Promise<string>
Return a cleaned HTML snapshot of the current page. Elements are annotated with c="..." counter attributes that can be referenced in subsequent actions or extractions. Counters are reassigned on each snapshot and synced to the live DOM.

​
Parameters

​
options
SnapshotOptions
Optional snapshot configuration

​
Returns

​
html
string
Cleaned HTML string with counter annotations. Scripts, styles, and irrelevant elements are removed. Element counters are added as c="N" attributes.

​
Examples

​
Basic snapshot for extraction

import { Opensteer } from 'opensteer'

const opensteer = new Opensteer()
await opensteer.launch()
await opensteer.goto('https://example.com')

const html = await opensteer.snapshot({ mode: 'extraction' })

console.log(html)
// <html>
//   <body>
//     <h1 c="1">Welcome</h1>
//     <p c="2">This is example content</p>
//     <a href="/about" c="3">Learn more</a>
//   </body>
// </html>

​
Snapshot for action planning

// Default mode includes interactive elements
const actionHtml = await opensteer.snapshot()
// or explicitly:
const actionHtml = await opensteer.snapshot({ mode: 'action' })

// Use counters to reference elements
await opensteer.click({ element: 3 })

​
Clickable elements only

const clickableHtml = await opensteer.snapshot({ mode: 'clickable' })

// Result includes only links, buttons, and clickable elements
// <button c="1">Submit</button>
// <a href="/next" c="2">Next</a>

​
Full page snapshot

const fullHtml = await opensteer.snapshot({ mode: 'full' })

// Includes all content, tables, lists, divs, spans, etc.
// Useful for comprehensive content extraction

​
Snapshot without counters

const rawHtml = await opensteer.snapshot({ withCounters: false })

// Clean HTML without c="..." attributes
// Useful for content analysis or debugging

​
Debug interactive elements

// Add visual markers to see what elements are detected
await opensteer.snapshot({ 
  mode: 'action',
  markInteractive: true 
})

// Interactive elements in the browser will be visually highlighted
// Take a screenshot to see the markers
const screenshot = await opensteer.screenshot()

​
Using snapshot with AI extraction

const html = await opensteer.snapshot({ 
  mode: 'extraction',
  withCounters: true 
})

// Pass to AI for analysis
const analysis = await analyzeWithAI(html)

// Use counter references from AI response
await opensteer.extract({
  schema: {
    title: { element: analysis.titleCounter },
    price: { element: analysis.priceCounter },
  },
})

​
Snapshot for debugging

import fs from 'fs'

const html = await opensteer.snapshot({ mode: 'full' })
fs.writeFileSync('debug-snapshot.html', html, 'utf-8')

// Open debug-snapshot.html to inspect cleaned page structure

​
Snapshot Modes

​
mode
SnapshotMode
The mode controls which elements are included in the snapshot:

​
Counter Attributes

When withCounters: true (default), elements receive c="N" attributes: 
<button c="1">Submit</button>
<input c="2" type="text" />
<a href="/next" c="3">Next page</a>
Counter values:
  • Are sequential integers starting from 1
  • Are reassigned on each snapshot
  • Are synced to the live DOM (not just the HTML string)
  • Can be used in actions: { element: 3 }
  • Are unique per snapshot but not stable across page changes

​
Caching

Snapshot results are internally cached until the next mutating action (click, input, goto, etc.). Calling snapshot() multiple times without navigation returns the cached HTML. 
const html1 = await opensteer.snapshot() // Generates snapshot
const html2 = await opensteer.snapshot() // Returns cached

await opensteer.click({ element: 1 }) // Invalidates cache

const html3 = await opensteer.snapshot() // Generates new snapshot
To force a new snapshot, perform a mutating action or call: 
opensteer.clearCache()
const html = await opensteer.snapshot() // Fresh snapshot

​
Performance

Snapshot generation involves:
  1. DOM traversal and filtering
  2. Counter assignment and injection
  3. HTML serialization and cleaning
Typical snapshot time: 50-200ms depending on page complexity. For large pages (1000+ elements), prefer narrower modes (clickable, action) over full.

​
Cloud Mode

In cloud mode, snapshots are generated remotely and returned as strings. Counter attributes are synced to the cloud browser’s DOM. 
const opensteer = new Opensteer({ cloud: true })
await opensteer.launch()

const html = await opensteer.snapshot({ mode: 'extraction' })
// Snapshot generated on cloud browser

type SnapshotMode =
  | 'action'
  | 'extraction'
  | 'clickable'
  | 'scrollable'
  | 'full'

interface SnapshotOptions {
  mode?: SnapshotMode
  withCounters?: boolean
  markInteractive?: boolean
}

​
See Also

  • extract() - Extract structured data using element counters
  • state() - Get URL, title, and snapshot together
  • Schema reference - Use counters in extraction schemas