https://github.com/lifeart/dom-snapshot

JS methods to serialize HTML page to JSON and restore it
https://github.com/lifeart/dom-snapshot

css dom html javascript serialize-html-page snapshot testing-tools

Last synced: 3 months ago
JSON representation

JS methods to serialize HTML page to JSON and restore it

• Host: GitHub
• URL: https://github.com/lifeart/dom-snapshot
• Owner: lifeart
• License: mit
• Created: 2017-08-07T22:02:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-02T10:15:55.000Z (over 3 years ago)
• Last Synced: 2024-10-02T12:21:12.160Z (3 months ago)
• Topics: css, dom, html, javascript, serialize-html-page, snapshot, testing-tools
• Language: TypeScript
• Size: 417 KB
• Stars: 39
• Watchers: 5
• Forks: 2
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DomSnapshot

JS methods to serialize rendered HTML page to JSON and restore it.

JS library for browser-render HTML page serialization (with firebase support)

JS * deserialization supported.

# Use cases?

- Grab all CSS from page!

- Calc page diffs between renders!

# Usage

```html

  

  // or

  

  // or use this gh repo

```

By default DomSnapshot configured to use demo firebase api to manage snapshots

```javascript

	const snapshot = new DomSnapshot();

	// waiting for firebase initialization

	snapshot.loaded().then(()=>{

	        // saving current DOM as snapshot

		const id = snapshot.saveSnapshot();

		console.log('snapshotId', id);

		setTimeout(() => {

			console.log('restoring current snapshot');

			snapshot.showSnapshot(id)

		}, 3000);

	});

```

"Offline" usage example (without firebase sync)

```javascript

	

	var selector  = '#readme > article > pre';

	var s1 = snapshoter.takeSnapshot(selector);

	document.querySelector(selector).style['fontSize'] = '20px';

	document.querySelector(selector).setAttribute('foo', 'bar');

	var s2 = snapshoter.takeSnapshot(selector);

	var diff = snapshoter.getSnapshotsDiff(s1, s2);

	console.log(diff);

	// capture node and send it to server

	snapshoter.saveSnapshot(Date.now(), snapshoter.createSnapshot('body'))	

```

# Methods

`saveSnapshot()` - save current web-page as snapshot to firebase / _return snapshot id_

`showSnapshot(id)` - restore page snapshot by id from firebase / _return snapshot object_

# Viwer

An SPA for snapshots preview

[dom-snapshot-ui](https://github.com/lifeart/dom-snapshot-ui)