chrome-dompath

Chrome DevTools DOMPath implementation

Usage no npm install needed!

<script type="module">
  import chromeDompath from 'https://cdn.skypack.dev/chrome-dompath';
</script>

README

This package is a little piece of Google's Chromium DevTools project which modified to make it work on JSDOM.

The DOMPath is responsible for generating a selector given an element in a particular DOM hierarchy. Its methods can be accessed via the following menu:
Open DevTools -> Navigate to Elements tab -> Right click on selected Element -> Copy DOMPath-use

Installation

NPM Version NPM DownloadsLicense

npm i -S chrome-dompath

DOMPath

Get selector, JS Path and XPath of a DOM element.

const DOMPath = require('chrome-dompath');

// Node
const dom = new JSDOM('<root><a><b>T1</b><c>T2</c></a></root>').window.document;
const element = dom.querySelector('b');

// Browser
const element = window.document.querySelector('b');

DOMPath.fullQualifiedSelector(element, true);
DOMPath.jsPath(element, true);
DOMPath.xPath(element, true);

API

DOMPath.fullQualifiedSelector(node: DOMNode | optimized: boolean)

Returns the full qualified selector (string) for the node supplied.

DOMPath.fullQualifiedSelector(element);
DOMPath.fullQualifiedSelector(element, true);

DOMPath.jsPath(node: DOMNode | optimized: boolean)

Returns the JS path (string) for the node supplied.

DOMPath.jsPath(element);
DOMPath.jsPath(element, true);

DOMPath.xPath(node: DOMNode | optimized: boolean)

Returns the xpath (string) for the node supplied.

DOMPath.xpath(element);
DOMPath.xpath(element, true);