Source

snap / docs / index.rst

Full commit

Snap

What is Snap

Snap is a regression testing framework that compares snapshots of the browsers DOM tree.

Ideal for: * Refactoring CSS * Identifying cross-browser rendering issues * Functional/system testing

Configuring Snap

  • Specify root node
  • Specify white or blacklist of styles you want to compare
  • ...

Using Snap

Creating a snapshot

var snapshot = snap.createSnapshot()

Saving a snapshot

snap.saveSnapshot(snapshot)

Comparing against latest snapshot

snap.compare()

Reporting

inBrowserReport

snap.showDifferences()

Roadmap

  • Automated comparison test

  • Scenario Automation
    • Using other test frameworks (Selenium etc?)
    • Using custom Scenario recorder/player
  • Reporting
    • Screenshot reporting
    • Reporting to backend
  • Multiple backends
    • Python backend

Technical Documentation

Snapshot Structure:

snapshot = {
    date: 'yyyy/mm/dd',
    version: 1.2
    type: 'xml',
    selectorType: 'CSS',
    elements: [
        {
            selector: '.module .myComponent',
            name: 'myComponent',
            styleExcludes: [/_moz/],
            content: {
                computedStyle: {
                    // ...
                },
                textContent: 'foo'
            }
        },
        {
            selector: '.module .myComponent',
            name: 'myComponent',
            styleIncludes: [/height/, /width/],
            content: {
                computedStyle: {
                    // ...
                },
                textContent: 'bar'
            }
        },

    ]
}

Configuration Example:

{
    selectorType: 'CSS',
    root: document.getElementById('root'),
    elements: [
        {
            selector: '.module .myComponent',
            name: 'myComponent'
        }
    ]
}