🔍 selector-generalization

JavaScript utils to generalize a set of CSS selectors to a single selector that matches them all. Useful for mapping the structure of web apps.

I developed this algorithm in 2013 but only recently open sourced it. It's based on using a sequence alignment algorithm from bioinformatics or string processing on sequences of objects (CSS selectors), with a "fuzzy" matching (set similarity instead of exact string matching).

Live demo: https://i5ik.github.io/selector-generalization/

running the test

If you haven't install beefy and browserify ( just for convenience, to serve the test page )

npm install -g browserify beefy

Then go to the directory where you checked out this code and run it

beefy test.js 8080

You can then visit http://<your ip | localhost>:8080 in your browser ( the page was tested in Chrome )

Open console / devtools on that page to get a view of what's happening.

Then to add some elements to the set of examples, just click on them ( don't worry, links won't navigate ). When you want to see the generalized selector, click 'generalize' When you want to clear the example set, click 'clear'

If you notice something weird, open an issue! 👍

Dev Notes

Thursday August 27 2020
Updated packaging and test scripts
Pushed live test demo to a github site
Wednesday August 16 2017
All the current open issues are improvements. Some of improvements to :any and others are just improvements.
None of these currently can be done because:

I need to think more about :any and
The other improvements either need to be thought more about as well, or depend on some human interface element being made, (for example), the composition issue