Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@medv/finder
Advanced tools
@medv/finder is an npm package that provides a utility for generating unique CSS selectors for DOM elements. This can be particularly useful for tasks such as automated testing, web scraping, and browser automation where you need to reliably identify and interact with specific elements on a web page.
Generate Unique CSS Selectors
This feature allows you to generate a unique CSS selector for a given DOM element. The generated selector can be used to reliably identify the element in various contexts such as automated tests or web scraping.
const finder = require('@medv/finder');
const element = document.querySelector('your-element-selector');
const selector = finder(element);
console.log(selector);
Customizable Options
This feature allows you to customize the options for generating the CSS selector. You can specify the root element, and control the inclusion of IDs, class names, tag names, and attributes in the generated selector.
const finder = require('@medv/finder');
const element = document.querySelector('your-element-selector');
const selector = finder(element, {
root: document.body,
idName: (name) => true,
className: (name) => true,
tagName: (name) => true,
attr: (name, value) => false,
seedMinLength: 1,
optimizedMinLength: 2,
});
console.log(selector);
css-selector-generator is another npm package that generates unique CSS selectors for DOM elements. It offers similar functionality to @medv/finder but with a different API and customization options. It allows for more granular control over the selector generation process, including options for ignoring certain elements and attributes.
unique-selector is a package that also generates unique CSS selectors for DOM elements. It focuses on simplicity and ease of use, providing a straightforward API for generating selectors. While it may not offer as many customization options as @medv/finder, it is a good alternative for simpler use cases.
CSS Selector Generator
npm install @medv/finder
import finder from '@medv/finder'
document.addEventListener('click', event => {
const selector = finder(event.target)
console.log(selector)
})
Example of generated selector:
.blog > article:nth-child(3) .add-comment
finder
takes configuration object as second parameters. Here is example of all params with default values:
const selector = finder(event.target, {
root: document.body,
className: (name) => true,
tagName: (name) => true,
attr: (name, value) => false,
seedMinLength: 1,
optimizedMinLength: 2,
threshold: 1000,
maxNumberOfTries: 10_000,
})
root: Element
Root of search, defaults to document.body
.
idName: (name: string) => boolean
Check if this ID can be used. For example you can restrict using framework specific IDs:
const selector = finder(event.target, {
idName: name => !name.startsWith('ember')
})
className: (name: string) => boolean
Check if this class name can be used. For example you can restrict using is-* class names:
const selector = finder(event.target, {
className: name => !name.startsWith('is-')
})
tagName: (name: string) => boolean
Check if tag name can be used, same as className
.
attr: (name: string, value: string) => boolean
Check if attr name can be used.
seedMinLength: number
Minimum length of levels in fining selector. Starts from 1
.
For more robust selectors give this param value around 4-5 depending on depth of you DOM tree.
If finder
hits root
this param is ignored.
optimizedMinLength: number
Minimum length for optimising selector. Starts from 2
.
For example selector body > div > div > p
can be optimized to body p
.
threshold: number
Max number of selectors to check before falling into nth-child
usage.
Checking for uniqueness of selector is very costs operation, if you have DOM tree depth of 5, with 5 classes on each level,
that gives you more than 3k selectors to check.
finder
uses two step approach so it's reaching this threshold in some cases twice.
Default 1000
is good enough in most cases.
maxNumberOfTries: number
Max number of tries when we do the optimization. It is a trade-off between optimization and efficiency.
Default 10_000
is good enough in most cases.
Generate the unique selectors in your browser by using Chrome Extension
MIT
FAQs
CSS Selector Generator
The npm package @medv/finder receives a total of 93,630 weekly downloads. As such, @medv/finder popularity was classified as popular.
We found that @medv/finder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.