Data Tree Snapshot 🌳🤳
Intro
Create the smallest possible representation of the tree structure of the values of any attribute or property contained in a DOM element. data-tree-snapshot
only preserves ancestor/descendant relationships because it is used to assert that a given element contains a certain structure. This compacted tree structure is created recursively for the entire DOM tree within the given DOM element.
Installation
npm install data-tree-snapshot -D
API
getTextTree
(Text Snapshotting, named export)
Implementation
// 👆The default export of data-tree-snapshot, used to create data tree getters propertyName: 'textContent' typeof t === 'string' && tlength > 0
getTestIdTree
(Test Id Tree Snapshotting, named export)
configure
(see below)
Note: You can change the test id attribute that is used by default by using (Lots more good info about this helper on the wiki page!)
Implementation
// 👆The default export of data-tree-snapshot, used to create data tree geters // If you use an attribute, the default string selector will be for that attribute// e.g. document.querySelector('[data-testid="your-test-id-name"]') will be used for getTestIdTree attributeName: 'data-testid' typeof t === 'string' && tlength > 0
makeGetDataTree
This is a function that creates a custom getDataTree function based on the following options object, represented here as a TypeScript interface:
The only requirement is that either attributeName
or propertyName
are passed (but not both).
The type of the returned get function is as follows elementOrString => string
, where elementOrString
is either an HTML element or a string value to be used as a selector for the given attributeName
(passing a string selector for property tree geters is currently unsupported).
For example, when calling getTestIdTree('root')
, document.querySelector('[data-testid="root"]')
will be called to get the root element for which to get the test id tree.
Full example:
const getLabelTree = // document.querySelector(`[label="some-label-value"]`) will be called to get the root element
configure
Configure a custom test id attribute to be used by getTestIdTree
instead of data-testid
.
Upcoming Features
- Include multiple pieces of data per element
- Configure selectors for property getters