├── .gitignore
├── .gitmodules
├── README.md
├── config
    └── webpack.medv.finder.js
├── index.html
├── package-lock.json
├── package.json
├── test.js
└── vendor
    └── snowflake
        └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /.idea/
3 | /temp/
4 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
 1 | [submodule "vendor/requirejs"]
 2 | 	path = vendor/requirejs
 3 | 	url = git@github.com:jrburke/requirejs.git
 4 | [submodule "vendor/selector-generator"]
 5 | 	path = vendor/selector-generator
 6 | 	url = git@github.com:tildeio/selector-generator.git
 7 | [submodule "vendor/dompath"]
 8 | 	path = vendor/dompath
 9 | 	url = git@github.com:jhartikainen/dompath.git
10 | [submodule "vendor/CSSelector.js"]
11 | 	path = vendor/CSSelector.js
12 | 	url = git@github.com:stevoland/CSSelector.js.git
13 | [submodule "vendor/ellocate.js"]
14 | 	path = vendor/ellocate.js
15 | 	url = git@github.com:bimech/ellocate.js.git
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CSS Selector Generator Benchmark
  2 | 
  3 | This is an attempt to create a benchmark for various JavaScript libraries for generating CSS selectors. It is inspired by @dandv's [question](https://github.com/fczbkk/css-selector-generator/issues/2).
  4 | 
  5 | ## Usage
  6 | 
  7 | ```sh
  8 | npm install
  9 | npm test
 10 | ```
 11 | 
 12 | `index.html` should open in a browser tab with further instructions.
 13 | 
 14 | ## Results
 15 | 
 16 | ### @antonmedv [finder](https://github.com/antonmedv/finder)
 17 | 
 18 | * NPM package, written in TypeScript
 19 | * no dependencies
 20 | * has tests
 21 | * has documentation
 22 | * MIT license
 23 | * slower speed than other libraries (still fast enough for regular use)
 24 | * creates efficient and robust selectors using ID, class, tags and child marker
 25 |     * does not seem to support attribute selectors
 26 | * generates **shortest selectors** among all tested libraries
 27 | 
 28 | Longest selector:
 29 | 
 30 | ```
 31 | .block:nth-child(3) li:nth-child(2) > .icon-eye-open
 32 | ```
 33 | 
 34 | ### @autarc [optimal-select](https://github.com/autarc/optimal-select)
 35 | 
 36 | * supports UMD (Browser & Node)
 37 | * no dependencies
 38 | * no tests
 39 | * MIT license
 40 | * allows single and multiple input elements
 41 | * separate handling of selection and optimization (export ES2015 Modules)
 42 | * creates efficient and robust selectors using ID, class, attributes, tags and child marker
 43 | 
 44 | Longest selector:
 45 | 
 46 | ```
 47 | .clearfix:nth-of-type(3) li:nth-of-type(2) .icon-eye-open
 48 | ```
 49 | 
 50 | 
 51 | ### @bimech [ellocate.js](https://github.com/bimech/ellocate.js)
 52 | 
 53 | * supports Bower
 54 | * depends on Jquery
 55 | * has tests
 56 | * has documentation
 57 | * no license
 58 | * average speed
 59 | * uses ID, class and tag selectors
 60 | * **WARNING:** doesn't use `nth-child` selectors, so it **produces a lot of non-unique selectors**
 61 | 
 62 | Longest selector:
 63 | 
 64 | ```
 65 | html > body > div > div#wrap > div#main > div.container > div.main-content > div.row > div.span12 > div.row > div.span4.sidebar > div.block.clearfix > div.block-header.clearfix > div.block-action > a.btn.btn-success.btn-small > i.icon-plus.icon-white
 66 | ```
 67 | 
 68 | ### Chromium's [DOMPresentationUtils](https://chromium.googlesource.com/chromium/blink/+/master/Source/devtools/front_end/components/DOMPresentationUtils.js)
 69 | 
 70 | NOTE: Used [version on NPM](https://www.npmjs.com/package/cssman) adapted for use in browser.
 71 | 
 72 | * supports NPM
 73 | * no dependencies
 74 | * no tests
 75 | * has documentation
 76 | * see source code for license
 77 | * average speed
 78 | * uses ID, class, tag, attribute (for inputs) and `nth-child` child selectors
 79 | * **WARNING: produces a lot of non-unique selectors** in both optimized and non-optimized version
 80 | 
 81 | Example of non-unique selector:
 82 | 
 83 | ```
 84 | div#main > div > div > div > div > div > div.span4.sidebar > div.block.clearfix > div.block-content > ul > li.show-all > a
 85 | 
 86 | [
 87 |   <a href=​"/​organizations">​Show all​</a>​,
 88 |   <a href=​"/​topics">​Show all​</a>​,
 89 |   <a href=​"/​topics?scope=starred">​Show all​</a>​,
 90 |   <a href=​"/​topics?scope=public">​Show all​</a>​
 91 | ]
 92 | ```
 93 | 
 94 | Longest selector:
 95 | 
 96 | ```
 97 | div#main > div > div > div > div > div > div.span4.sidebar > div.block.clearfix > div.block-content > ul > li:nth-child(1) > a
 98 | ```
 99 | 
100 | ### @desmondw [snowflake](https://github.com/desmondw/snowflake)
101 | 
102 | This is a Chrome extension, not a stand-alone library.
103 | 
104 | * average speed
105 | * uses combination of tag and class or `nth-child`
106 | 
107 | Longest selector:
108 | 
109 | ```
110 | div.span12 > div:nth-of-type(1) > div:nth-of-type(1) > ul:nth-of-type(1) > li:nth-of-type(10) > div:nth-of-type(1) > div:nth-of-type(2) > span:nth-of-type(1)
111 | ```
112 | 
113 | ### @fczbkk [css-selector-generator](https://github.com/fczbkk/css-selector-generator)
114 | 
115 | * supports Bower and NPM
116 | * no dependencies
117 | * has tests
118 | * has documentation
119 | * Unlicense license
120 | * tries to use optimized ID, class, tag child selectors or their combination, uses `nth-child` as fallback
121 | 
122 | Longest selector:
123 | 
124 | ```
125 | .span12 > :nth-child(1) > .span8 > ul > :nth-child(1) > :nth-child(1)
126 | ```
127 | 
128 | ### @jhartikainen [dompath](https://github.com/jhartikainen/dompath)
129 | 
130 | * no support for Bower or NPM
131 | * no dependencies
132 | * has tests
133 | * has documentation
134 | * no license
135 | * very fast
136 | * uses ID or tagg + `nth-child` child selector, so the selectors tend to become quite long
137 | 
138 | Longest selector:
139 | 
140 | ```
141 | #main > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > ul:nth-child(2) > li:nth-child(10) > div:nth-child(2) > div:nth-child(2) > span:nth-child(4)
142 | ```
143 | 
144 | ### @martinsbalodis [css-selector](https://github.com/martinsbalodis/css-selector)
145 | 
146 | Sorry, I wasn't able to make it work.
147 | 
148 | 
149 | ### @ngs [jquery-selectorator](https://github.com/ngs/jquery-selectorator)
150 | 
151 | * supports NPM and Bower
152 | * depends on Jquery
153 | * has tests
154 | * has documentation
155 | * MIT license
156 | * **very slow**
157 | * generates selectors using Jquery's `:eq()` selector, so most of the results are not valid CSS selectors and are only usable within Jquery
158 | 
159 | Longest selector: n/a
160 | 
161 | 
162 | ### @olivierrr [selector-query](https://github.com/olivierrr/selector-query)
163 | 
164 | * supports NPM only
165 | * no dependencies
166 | * no tests
167 | * has documentation
168 | * MIT license
169 | * quite fast
170 | * generates the [most complex descendant selector](https://github.com/olivierrr/selector-query/issues/1#issuecomment-133116659) for each element (ID, class, tag, `nth-child`), so it produces the **longest selectors** among tested libraries
171 | * **WARNING:** uses descendant selectors instead of child selectors, so it sometimes **produces non-unique selectors**
172 | 
173 | Longest selector:
174 | 
175 | ```
176 | #main div.container:nth-child(1) div.main-content:nth-child(1) div.row:nth-child(1) div.span12:nth-child(1) div.row:nth-child(1) div.span4.sidebar:nth-child(2) div.block.clearfix:nth-child(2) div.block-header.clearfix:nth-child(1) div.block-action:nth-child(2) a.btn.btn-success.btn-small:nth-child(1) i.icon-plus.icon-white:nth-child(1)
177 | ```
178 | 
179 | ### @rishihahs [domtalk](https://github.com/rishihahs/domtalk)
180 | 
181 | * supports NPM only
182 | * no dependencies
183 | * has tests
184 | * has documentation
185 | * MIT license
186 | * very fast
187 | * uses ID or `nth-child` descendant selector, selectors are of average length
188 | * **WARNING:** uses descendant selectors instead of child selectors, so it **produces a lot of non-unique selectors**
189 | 
190 | Longest selector:
191 | 
192 | ```
193 | #wrap *:nth-child(1) *:nth-child(1) *:nth-child(1) *:nth-child(3) *:nth-child(1) *:nth-child(1) *:nth-child(1) *:nth-child(3) *:nth-child(11) *:nth-child(1) *:nth-child(1)
194 | ```
195 | 
196 | ### @stevoland [CSSelector.js](https://github.com/stevoland/CSSelector.js)
197 | 
198 | * supports NPM (claims to support Bower, but I could not find it in the registry)
199 | * supports AMD
200 | * no dependencies
201 | * no tests
202 | * has documentation
203 | * MIT license
204 | * very fast
205 | * uses ID or tag + `nth-child` child selectors, selectors are quite long
206 | 
207 | Longest selector:
208 | 
209 | ```
210 | #main > DIV:nth-child(1) > DIV:nth-child(1) > DIV:nth-child(1) > DIV:nth-child(1) > DIV:nth-child(1) > DIV:nth-child(1) > UL:nth-child(2) > LI:nth-child(10) > DIV:nth-child(2) > DIV:nth-child(2) > SPAN:nth-child(4)
211 | ```
212 | 
213 | ### @thomaspeklak [get-query-selector](https://github.com/thomaspeklak/get-query-selector)
214 | 
215 | * supports NPM only
216 | * no dependencies
217 | * no tests
218 | * has documentation
219 | * looks like BSD license
220 | * very fast
221 | * uses ID or `nth-child` child selector, selectors are of average length
222 | 
223 | Longest selector:
224 | 
225 | ```
226 | #wrap>:nth-child(1)>:nth-child(1)>:nth-child(1)>:nth-child(3)>:nth-child(1)>:nth-child(1)>:nth-child(1)>:nth-child(3)>:nth-child(11)>:nth-child(1)>:nth-child(1)
227 | ```
228 | 
229 | ### @tildeio [selector-generator](https://github.com/tildeio/selector-generator)
230 | 
231 | * no NPM or Bower
232 | * requires RequireJS
233 | * has tests
234 | * no documentation
235 | * looks like MIT license
236 | * very fast
237 | * uses tag or tag + `nth-child` child selectors
238 | * **WARNING: produces a lot of non-unique selectors**
239 | 
240 | Longest selector:
241 | 
242 | ```
243 | html > body > div > div > div > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > ul > li:nth-of-type(2) > a
244 | ```
245 | 
246 | 
247 | ## TODO
248 | 
249 | It would be nice to automate the process, run the tests in PhantomJS, etc. Pull requests are welcome.
250 | 
251 | ## Bug reports, feature requests and contact
252 | 
253 | If you found any bugs, if you have feature requests or any questions, please, either [file an issue at GitHub](https://github.com/fczbkk/css-selector-generator-benchmark/issues) or send me an e-mail at [riki@fczbkk.com](mailto:riki@fczbkk.com?subject=CSSSelectorGeneratorBenchmark)
254 | 


--------------------------------------------------------------------------------
/config/webpack.medv.finder.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   mode: 'production',
 5 |   entry: './node_modules/@medv/finder/dist/index.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, '../temp/finder/'),
 8 |     filename: 'index.js',
 9 |     library: 'finder',
10 |     libraryTarget: 'var'
11 |   }
12 | };


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <title>CSS Selector Generators Benchmark</title>
  7 | 
  8 |   <style>
  9 |     body {font-family: sans-serif; font-size: 14px; color: #333; padding: 3em; line-height: 175%;}
 10 |     table {border-collapse: collapse;}
 11 |     th, td {text-align: left; padding: 0.25em 0.5em; border: 1px solid #ccc;}
 12 |   </style>
 13 | 
 14 |   <script src="node_modules/jquery/dist/jquery.js"></script>
 15 | 
 16 |   <script src="vendor/requirejs/require.js"></script>
 17 |   <script>
 18 |     require.config({
 19 |       paths: {
 20 |         'selector-generator': 'vendor/selector-generator/lib/selector-generator',
 21 |         'CSSelector': 'vendor/CSSelector.js/dist/CSSelector',
 22 |         'OptimalSelect': 'node_modules/optimal-select/dist/optimal-select',
 23 |         'css-selector-generator': 'node_modules/css-selector-generator/build/css-selector-generator'
 24 |       }
 25 |     });
 26 |   </script>
 27 | 
 28 | 
 29 |   <script src="test.js"></script>
 30 | 
 31 |   <!-- https://github.com/fczbkk/css-selector-generator -->
 32 |   <script>
 33 |     (function() {
 34 |       require(['css-selector-generator'], function (CssSelectorGenerator) {
 35 |         addLibrary('fczbkk/css-selector-generator', function (element) {
 36 |           var generator = new CssSelectorGenerator;
 37 |           return generator.getSelector(element)
 38 |         });
 39 |       });
 40 |     })();
 41 |   </script>
 42 | 
 43 |   <!-- https://github.com/martinsbalodis/css-selector -->
 44 |   <script src="node_modules/css-selector/lib/CssSelector.js"></script>
 45 |   <script>
 46 |     (function() {
 47 |       window.addEventListener('load', function () {
 48 | 
 49 |         // Lib has to be initialized after page is loaded, otherwise it throws errors.
 50 |         lib = new CssSelector({
 51 |           parent: document.body
 52 |         });
 53 | 
 54 |         // TODO I can't get this to work. I'll try to ask author for help.
 55 |         addLibrary('martinsbalodis/css-selector', function (element) {
 56 |           lib.getCssSelector([element]);
 57 |         });
 58 | 
 59 |       });
 60 |     })();
 61 |   </script>
 62 | 
 63 |   <!-- https://github.com/tildeio/selector-generator -->
 64 |   <script>
 65 |     (function() {
 66 |       require(['selector-generator'], function(sg) {
 67 |         addLibrary('tildeio/selector-generator', function (element) {
 68 |           return sg.generate(element).selector;
 69 |         });
 70 |       });
 71 |     })();
 72 |   </script>
 73 | 
 74 |   <!-- https://github.com/jhartikainen/dompath -->
 75 |   <script src="vendor/dompath/src/dompath.js"></script>
 76 |   <script>
 77 |     (function() {
 78 |       addLibrary('jhartikainen/dompath', function (element) {
 79 |         return dompath(element).toCSS();
 80 |       });
 81 |     })();
 82 |   </script>
 83 | 
 84 |   <!-- https://github.com/olivierrr/selector-query -->
 85 |   <script>var module = {};</script>
 86 |   <script src="node_modules/selector-query/index.js"></script>
 87 |   <script>
 88 |     (function() {
 89 |       var selectorQuery = module.exports;
 90 |       addLibrary('olivierrr/selector-query', selectorQuery);
 91 |     })();
 92 |   </script>
 93 | 
 94 |   <!-- https://github.com/rishihahs/domtalk -->
 95 |   <script>var module = {};</script>
 96 |   <script src="node_modules/domtalk/index.js"></script>
 97 |   <script>
 98 |     (function() {
 99 |       var domtalk = module.exports;
100 |       addLibrary('rishihahs/domtalk', domtalk.getSelectorFromElement.bind(domtalk));
101 |     })();
102 |   </script>
103 | 
104 |   <!-- https://github.com/thomaspeklak/get-query-selector -->
105 |   <script>var module = {};</script>
106 |   <script src="node_modules/get-query-selector/index.js"></script>
107 |   <script>
108 |     (function() {
109 |       var getQuerySelector = module.exports;
110 |       addLibrary('thomaspeklak/get-query-selector', getQuerySelector);
111 |     })();
112 |   </script>
113 | 
114 |   <!-- https://github.com/stevoland/CSSelector.js -->
115 |   <script>
116 |     (function() {
117 |       require(['CSSelector'], function(CSSelector) {
118 |         addLibrary('stevoland/CSSelector.js', CSSelector);
119 |       });
120 |     })();
121 |   </script>
122 | 
123 |   <!-- https://github.com/ngs/jquery-selectorator -->
124 |   <script src="node_modules/jquery-selectorator/dist/selectorator.js"></script>
125 |   <script>
126 |     (function() {
127 |       addLibrary('ngs/jquery-selectorator', function (element) {
128 |         return $(element).getSelector();
129 |       });
130 |     })();
131 |   </script>
132 | 
133 |   <!-- https://github.com/bimech/ellocate.js -->
134 |   <script src="vendor/ellocate.js/jquery.ellocate.js"></script>
135 |   <script>
136 |     (function() {
137 |       addLibrary('bimech/ellocate.js', function (element) {
138 |         return $(element).ellocate().css;
139 |       });
140 |     })();
141 |   </script>
142 | 
143 |   <!-- https://github.com/desmondw/snowflake -->
144 |   <script src="vendor/snowflake/index.js"></script>
145 |   <script>
146 |     (function() {
147 |       addLibrary('desmondw/snowflake', generateSelector);
148 |     })();
149 |   </script>
150 | 
151 |   <!--
152 |   https://chromium.googlesource.com/chromium/blink/+/master/Source/devtools/front_end/components/DOMPresentationUtils.js
153 |   https://gist.github.com/asfaltboy/8aea7435b888164e8563
154 |   -->
155 |   <script>var module = {};</script>
156 |   <script src="node_modules/cssman/main.js"></script>
157 |   <script>
158 |     (function() {
159 |       addLibrary('chromium/DOMPresentationUtils', function (element) {
160 |         return module.exports(element, false);
161 |       });
162 |     })();
163 |   </script>
164 | 
165 |   <!-- https://github.com/Autarc/optimal-select -->
166 |   <script>
167 |     (function() {
168 |       require(['OptimalSelect'], function (OptimalSelect) {
169 |         addLibrary('autarc/optimal-select', function (element) {
170 |           return OptimalSelect.select(element)
171 |         });
172 |       });
173 |     })();
174 |   </script>
175 | 
176 |   <!-- https://github.com/antonmedv/finder -->
177 |   <script src="temp/finder/index.js"></script>
178 |   <script>
179 |     (function () {
180 |       addLibrary('antonmedv/finder', function (element) {
181 |         return finder.default(element);
182 |       });
183 |     })();
184 |   </script>
185 | 
186 | </head>
187 | 
188 | <body>
189 | 
190 |   <h1>CSS Selector Generators Benchmark</h1>
191 | 
192 |   <p>This test attempts to compare various JS libraries for generating CSS selectors of HTML elements. Each library is optimized for something else, e.g. speed, browser compatibility, selector length, etc. If some library does not have good score in some
193 |     category, it does not mean that the library is rubbish.</p>
194 | 
195 |   <h2>How it works</h2>
196 | 
197 |   <ul>
198 |     <li>There's some complex HTML code below.</li>
199 |     <li>Each library has to go through all elements and make a unique CSS selector for it.</li>
200 |   </ul>
201 | 
202 |   <h2>Results</h2>
203 | 
204 |   <button onclick="runTests();">Run tests</button>
205 | 
206 |   <table>
207 |     <thead>
208 |       <tr>
209 |         <th>Library</th>
210 |         <th>Valid</th>
211 |         <th>Invalid</th>
212 |         <th>Not found</th>
213 |         <th>Non unique</th>
214 |         <th>Not matching</th>
215 |         <th>Longest selector</th>
216 |         <th>Duration</th>
217 |       </tr>
218 |     </thead>
219 |     <tbody id="results"></tbody>
220 |   </table>
221 | 
222 | 
223 |   <div style="display: none;">
224 |     <h2>Testing HTML code</h2>
225 | 
226 |     <div id="wrap">
227 | 
228 |       <header class="navbar navbar-static-top">
229 | 
230 |         <nav class="navbar-inner">
231 |           <div class="container">
232 | 
233 |             <a href="/" class="brand">Inline<strong>Manual</strong></a>
234 | 
235 |             <ul class="nav main-nav">
236 |               <li class="divider-vertical"></li>
237 |               <li class="active"><a class="" href="/dashboard" title="dashboard"><i class="icon-th"></i></a></li>
238 |               <li class="divider-vertical"></li>
239 |               <li class="" id="nav-topics"><a href="/topics" title="topics"><i class="icon-book"></i> Topics</a></li>
240 |               <li class="divider-vertical"></li>
241 |               <li class="" id="nav-sites"><a class="" href="/sites" title="sites"><i class="icon-globe"></i> Sites</a></li>
242 |               <li class="divider-vertical"></li>
243 |               <li class="" id="nav-search"><a class="" href="/search" title="search"><i class="icon-search"></i> Search</a></li>
244 |               <li class="divider-vertical"></li>
245 |               <li class="" id="nav-support"><a class="" href="/support" title="support"><i class="icon-info-sign"></i> Getting started</a></li>
246 |               <li class="divider-vertical"></li>
247 |             </ul>
248 | 
249 |             <div class="nav-account pull-right">
250 |               <ul class="nav">
251 |                 <li>
252 |                   <div class="btn-group">
253 |                     <a class="btn" href="/admin"><i class="icon-wrench"></i> Administration</a>
254 |                     <button class="btn dropdown-toggle" data-toggle="dropdown">
255 |                       <span class="caret"></span>
256 |                     </button>
257 |                     <ul class="dropdown-menu">
258 |                       <li>
259 |                         <a href="/admin">
260 |                           <i class="icon-th-large"></i> Dashboard
261 |                         </a>
262 |                       </li>
263 |                       <li class="divider"></li>
264 |                       <li>
265 |                         <a href="/admin/topics">
266 |                           <i class="icon-book"></i> Manage topics
267 |                         </a>
268 |                       </li>
269 |                       <li>
270 |                         <a href="/admin/invitations">
271 |                           <i class="icon-envelope"></i> Manage invitations
272 |                         </a>
273 |                       </li>
274 |                       <li class="divider"></li>
275 |                       <li>
276 |                         <a href="/admin/users">
277 |                           <i class="icon-user"></i> Manage users
278 |                         </a>
279 |                       </li>
280 |                       <li>
281 |                         <a href="/admin/activities">
282 |                           <i class="icon-road"></i> Users activities
283 |                         </a>
284 |                       </li>
285 |                       <li class="divider"></li>
286 |                       <li>
287 |                         <a href="/admin/organizations">
288 |                           <i class="icon-group"></i> Manage organizations
289 |                         </a>
290 |                       </li>
291 |                       <li class="divider"></li>
292 |                       <li>
293 |                         <a href="/admin/sidekiq" target="_blank">
294 |                           <i class="icon-spinner"></i> Manage background jobs
295 |                         </a>
296 |                       </li>
297 |                     </ul>
298 |                   </div>
299 |                 </li>
300 |                 <li>
301 |                   <a href="/profile" class="user-avatar-link">
302 |                     <img src="https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=30" class="user-avatar" />
303 |                   </a>
304 |                 </li>
305 |                 <li class="account-li">
306 |                   <a href="/profile" title="my account">marek</a>
307 |                 </li>
308 |                 <li class="account-li">
309 |                   <a href="/users/logout" data-method="delete" title="sign-out"><i class="icon-off"></i></a>
310 |                 </li>
311 |               </ul>
312 |             </div>
313 | 
314 | 
315 |           </div>
316 |         </nav>
317 |       </header>
318 | 
319 | 
320 |       <div id="main" role="main">
321 |         <div class="container">
322 |           <div class="main-content">
323 | 
324 |             <div class="row">
325 |               <div class="span12">
326 | 
327 | 
328 |                 <div class="row">
329 |                   <div class="span8">
330 | 
331 |                     <h2>What's happening</h2>
332 |                     <ul class="unstyled">
333 |                       <li>
334 |                         <p>
335 |                           <div class='row'>
336 |                             <div class='span1' style='width: 42px'>
337 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
338 |                             </div>
339 | 
340 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="30">
341 |                               <a href="/profile/marek">marek</a> committed 3 times to
342 |                               <a href="/topics/22">Out of the box file handling</a>
343 |                               <br />
344 |                               <span class='muted' title="2014-02-07 13:12">4 days ago</span>
345 |                             </div>
346 |                           </div>
347 |                         </p>
348 |                       </li>
349 |                       <li>
350 |                         <p>
351 |                           <div class='row'>
352 |                             <div class='span1' style='width: 42px'>
353 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
354 |                             </div>
355 | 
356 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="18">
357 |                               <a href="/profile/marek">marek</a> committed 12 times to
358 |                               <a href="/topics/21">test 2</a>
359 |                               <br />
360 |                               <span class='muted' title="2014-02-05 10:07">6 days ago</span>
361 |                             </div>
362 |                           </div>
363 |                         </p>
364 |                       </li>
365 |                       <li>
366 |                         <p>
367 |                           <div class='row'>
368 |                             <div class='span1' style='width: 42px'>
369 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
370 |                             </div>
371 | 
372 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="16">
373 |                               <a href="/profile/marek">marek</a> committed 2 times to
374 |                               <a href="/topics/22">Out of the box file handling</a>
375 |                               <br />
376 |                               <span class='muted' title="2013-10-04 19:20">4 months ago</span>
377 |                             </div>
378 |                           </div>
379 |                         </p>
380 |                       </li>
381 |                       <li>
382 |                         <p>
383 |                           <div class='row'>
384 |                             <div class='span1' style='width: 42px'>
385 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
386 |                             </div>
387 | 
388 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="15">
389 |                               <a href="/profile/marek">marek</a> committed to
390 |                               <a href="/topics/27">test moodle</a>
391 |                               <br />
392 |                               <span class='muted' title="2013-10-04 18:16">4 months ago</span>
393 |                             </div>
394 |                           </div>
395 |                         </p>
396 |                       </li>
397 |                       <li>
398 |                         <p>
399 |                           <div class='row'>
400 |                             <div class='span1' style='width: 42px'>
401 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
402 |                             </div>
403 | 
404 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="12">
405 |                               <a href="/profile/marek">marek</a> committed 3 times to
406 |                               <a href="/topics/22">Out of the box file handling</a>
407 |                               <br />
408 |                               <span class='muted' title="2013-09-16 07:31">5 months ago</span>
409 |                             </div>
410 |                           </div>
411 |                         </p>
412 |                       </li>
413 |                       <li>
414 |                         <p>
415 |                           <div class='row'>
416 |                             <div class='span1' style='width: 42px'>
417 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
418 |                             </div>
419 | 
420 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="11">
421 |                               <a href="/profile/marek">marek</a> cloned topic from
422 |                               <a href="/topics/27">test moodle</a>
423 |                               <br />
424 |                               <span class='muted' title="2013-09-14 23:52">5 months ago</span>
425 |                             </div>
426 |                           </div>
427 |                         </p>
428 |                       </li>
429 |                       <li>
430 |                         <p>
431 |                           <div class='row'>
432 |                             <div class='span1' style='width: 42px'>
433 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
434 |                             </div>
435 | 
436 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="10">
437 |                               <a href="/profile/marek">marek</a> created new topic
438 |                               <a href="/topics/23">test moodle</a>
439 |                               <br />
440 |                               <span class='muted' title="2013-09-13 17:51">5 months ago</span>
441 |                             </div>
442 |                           </div>
443 |                         </p>
444 |                       </li>
445 |                       <li>
446 |                         <p>
447 |                           <div class='row'>
448 |                             <div class='span1' style='width: 42px'>
449 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
450 |                             </div>
451 | 
452 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="5">
453 |                               <a href="/profile/marek">marek</a> committed 5 times to
454 |                               <a href="/topics/22">Out of the box file handling</a>
455 |                               <br />
456 |                               <span class='muted' title="2013-09-13 10:14">5 months ago</span>
457 |                             </div>
458 |                           </div>
459 |                         </p>
460 |                       </li>
461 |                       <li>
462 |                         <p>
463 |                           <div class='row'>
464 |                             <div class='span1' style='width: 42px'>
465 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
466 |                             </div>
467 | 
468 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="4">
469 |                               <a href="/profile/marek">marek</a> created new topic
470 |                               <a href="/topics/22">Out of the box file handling</a>
471 |                               <br />
472 |                               <span class='muted' title="2013-08-09 10:55">6 months ago</span>
473 |                             </div>
474 |                           </div>
475 |                         </p>
476 |                       </li>
477 |                       <li>
478 |                         <p>
479 |                           <div class='row'>
480 |                             <div class='span1' style='width: 42px'>
481 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
482 |                             </div>
483 | 
484 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="3">
485 |                               <a href="/profile/marek">marek</a> created new topic
486 |                               <a href="/topics/21">test 2</a>
487 |                               <br />
488 |                               <span class='muted' title="2013-08-09 10:51">6 months ago</span>
489 |                             </div>
490 |                           </div>
491 |                         </p>
492 |                       </li>
493 |                       <li>
494 |                         <p>
495 |                           <div class='row'>
496 |                             <div class='span1' style='width: 42px'>
497 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
498 |                             </div>
499 | 
500 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="2">
501 |                               <a href="/profile/marek">marek</a> created new topic
502 |                               <a href="/topics/19">test</a>
503 |                               <br />
504 |                               <span class='muted' title="2013-05-08 14:16">9 months ago</span>
505 |                             </div>
506 |                           </div>
507 |                         </p>
508 |                       </li>
509 |                       <li>
510 |                         <p>
511 |                           <div class='row'>
512 |                             <div class='span1' style='width: 42px'>
513 |                               <img class='img-rounded' src='https://secure.gravatar.com/avatar/c52fd12777c01fb592572644cfe091a4?s=36' />
514 |                             </div>
515 | 
516 |                             <div style='margin-top: -2px; margin-left: 5px' data-activity-id="1">
517 |                               <a href="/profile/marek">marek</a> created new topic test
518 |                               <br />
519 |                               <span class='muted' title="2013-05-08 06:08">9 months ago</span>
520 |                             </div>
521 |                           </div>
522 |                         </p>
523 |                       </li>
524 | 
525 |                     </ul>
526 | 
527 | 
528 | 
529 |                   </div>
530 | 
531 |                   <div class="span4 sidebar">
532 | 
533 |                     <div class="well">
534 |                       Read our latest <a href="/blog">blog</a>.
535 |                     </div>
536 | 
537 | 
538 |                     <!-- Organizations -->
539 |                     <div class="block clearfix">
540 |                       <div class="block-header clearfix">
541 |                         <h3 class="block-title"><i class="icon-group"></i> Organizations</h3>
542 |                         <div class="block-action"><a href="/organizations/new" class="btn btn-success btn-small"><i class="icon-plus icon-white"></i> Create organization</a></div>
543 |                       </div>
544 |                       <div class="block-content">
545 |                         <ul class="listing unstyled">
546 |                           <li>
547 |                             <a href="/profile/atomicant2">atomicant2</a>
548 |                           </li>
549 |                           <li class="show-all"><a href="/organizations">Show all</a></li>
550 |                         </ul>
551 |                       </div>
552 |                     </div>
553 |                     <!-- /Organizations -->
554 | 
555 |                     <!-- Your topics -->
556 |                     <div class="block clearfix">
557 |                       <div class="block-header clearfix">
558 |                         <h3 class="block-title"><i class="icon-book"></i> Your topics</h3>
559 |                         <div class="block-action"><a href="/topics/new" class="btn btn-success btn-small"><i class="icon-plus icon-white"></i> Create topic</a></div>
560 |                       </div>
561 |                       <div class="block-content">
562 |                         <ul class="listing unstyled">
563 |                           <li>
564 |                             <i class="icon-lock"></i>
565 |                             <a href="/topics/22">Out of the box file handling</a>
566 |                           </li>
567 |                           <li>
568 |                             <i class="icon-eye-open"></i>
569 |                             <a href="/topics/27">test moodle</a>
570 |                           </li>
571 |                           <li>
572 |                             <i class="icon-eye-open"></i>
573 |                             <a href="/topics/26">test</a>
574 |                           </li>
575 |                           <li>
576 |                             <i class="icon-eye-open"></i>
577 |                             <a href="/topics/25">test</a>
578 |                           </li>
579 |                           <li>
580 |                             <i class="icon-eye-open"></i>
581 |                             <a href="/topics/19">test</a>
582 |                           </li>
583 |                           <li class="show-all"><a href="/topics">Show all</a></li>
584 |                         </ul>
585 |                       </div>
586 |                     </div>
587 |                     <!-- /Your topics -->
588 | 
589 |                     <!-- Starred topics -->
590 |                     <div class="block clearfix">
591 |                       <div class="block-header clearfix">
592 |                         <h3 class="block-title"><i class="icon-star"></i> Starred topics</h3>
593 |                       </div>
594 |                       <div class="block-content">
595 |                         <ul class="listing unstyled">
596 |                           <li>
597 |                             <i class="icon-eye-open"></i>
598 |                             <a href="/topics/4">Officia Esse Et Ea Velit</a>
599 |                           </li>
600 |                           <li class="show-all"><a href="/topics?scope=starred">Show all</a></li>
601 |                         </ul>
602 |                       </div>
603 |                     </div>
604 |                     <!-- /Starred topics -->
605 | 
606 |                     <!-- Recently created public topics -->
607 |                     <div class="block clearfix">
608 |                       <div class="block-header clearfix">
609 |                         <h3 class="block-title"><i class="icon-asterisk"></i> Recently created public topics</h3>
610 |                       </div>
611 |                       <div class="block-content">
612 |                         <ul class="listing unstyled">
613 |                           <li>
614 |                             <i class="icon-eye-open"></i>
615 |                             <a href="/topics/29">Drupal topic</a>
616 |                           </li>
617 |                           <li>
618 |                             <i class="icon-eye-open"></i>
619 |                             <a href="/topics/28">How to create an Article With a longer title</a>
620 |                           </li>
621 |                           <li>
622 |                             <i class="icon-eye-open"></i>
623 |                             <a href="/topics/27">test moodle</a>
624 |                           </li>
625 |                           <li>
626 |                             <i class="icon-eye-open"></i>
627 |                             <a href="/topics/26">test</a>
628 |                           </li>
629 |                           <li>
630 |                             <i class="icon-eye-open"></i>
631 |                             <a href="/topics/25">test</a>
632 |                           </li>
633 |                           <li class="show-all"><a href="/topics?scope=public">Show all</a></li>
634 |                         </ul>
635 |                       </div>
636 |                     </div>
637 |                     <!-- /Recently created public topics -->
638 | 
639 |                   </div>
640 |                   <!-- /sidebar -->
641 |                 </div>
642 | 
643 |                 <!-- main content -->
644 |               </div>
645 |             </div>
646 |           </div>
647 |           <!-- end of .main-content -->
648 |         </div>
649 |         <!-- end of .container -->
650 |       </div>
651 |       <!-- end of #main -->
652 |       <div id="push"></div>
653 |     </div>
654 |     <!-- end of #wrap -->
655 | 
656 |     <div id="footer">
657 |       <div class="container">
658 |         <div class="row">
659 |           <div class="span4">
660 |             <p class="muted credit">&copy; Inline Manual 2014.</p>
661 |           </div>
662 |           <div class="span8 footer-nav">
663 |             <ul class="nav nav-pills">
664 |               <li><a href="/">Home</a></li>
665 |               <li class=""><a href="/features">Features</a></li>
666 |               <li class=""><a href="/pricing">Pricing</a></li>
667 |               <li class=""><a href="/blog">Blog</a></li>
668 |               <!--               <li class=""><a href="/faq">FAQ</a></li>
669 |     -->
670 |               <li class=""><a href="/about_us">About Us</a></li>
671 |               <li class=""><a href="/jobs">Jobs</a></li>
672 |               <li class=""><a href="/contact">Contact</a></li>
673 |             </ul>
674 |           </div>
675 |         </div>
676 |       </div>
677 |     </div>
678 | 
679 |   </div>
680 | 
681 | 
682 | </body>
683 | 
684 | </html>
685 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-selector-generator-benchmark",
 3 |   "version": "1.0.0",
 4 |   "description": "Benchmark for various JS libraries that generate unique CSS selectors.",
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "pretest": "git submodule update --init && npm run compile",
 8 |     "test": "index.html",
 9 |     "compile": "npm run compile:finder",
10 |     "compile:finder": "webpack --config ./config/webpack.medv.finder.js"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/css-selector-generator-benchmark"
15 |   },
16 |   "keywords": [
17 |     "javascript",
18 |     "css",
19 |     "benchmark"
20 |   ],
21 |   "author": "Riki Fridrich <riki@fczbkk.com> (http://fczbkk.com/)",
22 |   "license": "MIT",
23 |   "dependencies": {
24 |     "@medv/finder": "^1.1.2",
25 |     "css-selector": "^0.1.0",
26 |     "css-selector-generator": "^1.2.0",
27 |     "cssman": "0.0.2",
28 |     "domtalk": "0.0.2",
29 |     "get-query-selector": "0.0.1",
30 |     "jquery": "^3.5.0",
31 |     "jquery-selectorator": "^0.1.3",
32 |     "optimal-select": "^4.0.1",
33 |     "selector-query": "^1.0.1"
34 |   },
35 |   "devDependencies": {
36 |     "webpack": "^4.4.1",
37 |     "webpack-cli": "^2.0.13"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
  1 | var libraries = {}
  2 | 
  3 | 
  4 | function addLibrary(name, callback) {
  5 |   libraries[name] = callback;
  6 | }
  7 | 
  8 | 
  9 | function runTests() {
 10 | 
 11 |   results = {};
 12 | 
 13 |   for (key in libraries) {
 14 |     var testFunction = libraries[key];
 15 |     results[key] = getResults(testFunction);
 16 |   }
 17 | 
 18 |   drawResults(results);
 19 | }
 20 | 
 21 | 
 22 | function drawResults(results) {
 23 |   var wrapper = document.querySelector('#results');
 24 |   wrapper.innerHTML = '';
 25 | 
 26 |   var output = document.createDocumentFragment()
 27 | 
 28 |   var resultsList = Object.keys(results).map(function (key) {
 29 |     var result = results[key]
 30 |     result.key = key
 31 |     return result
 32 |   })
 33 |   // priority: Valid (v), Longest (^), Duration (^)
 34 |   .sort(function(curr, next) {
 35 |     return next.validSelectors.length - curr.validSelectors.length ||
 36 |            curr.longestSelector.length - next.longestSelector.length ||
 37 |            curr.duration - next.duration
 38 |   })
 39 | 
 40 |   resultsList.forEach(function(data) {
 41 |     var row = output.appendChild(document.createElement('tr'));
 42 |     addCell(row, data.key);
 43 |     addCell(row, data.validSelectors.length);
 44 |     addCell(row, data.invalidSelectors.length);
 45 |     addCell(row, data.notFoundSelectors);
 46 |     addCell(row, data.nonUniqueSelectors.length);
 47 |     addCell(row, data.nonMatchingSelectors.length);
 48 |     addCell(row, "(" + data.longestSelector.length + ") " + data.longestSelector);
 49 |     addCell(row, data.duration + "ms");
 50 |   })
 51 | 
 52 |   wrapper.appendChild(output);
 53 | 
 54 |   console.log(resultsList);
 55 | }
 56 | 
 57 | function hasInvalidSelectors (data) {
 58 |   return data.invalidSelectors.length || data.notFoundSelectors.length ||
 59 |          data.nonUniqueSelectors.length || data.nonMatchingSelectors.length
 60 | }
 61 | 
 62 | function addCell(row, content) {
 63 |   var cell = row.appendChild(document.createElement('td'));
 64 |   cell.appendChild(document.createTextNode(content));
 65 |   return cell;
 66 | }
 67 | 
 68 | 
 69 | function getResults(testFunction) {
 70 | 
 71 |   var elements = document.querySelector('#wrap').querySelectorAll('*');
 72 | 
 73 |   var result = {
 74 |     duration: -1,
 75 |     validSelectors: [],
 76 |     invalidSelectors: [],
 77 |     nonUniqueSelectors: [],
 78 |     nonMatchingSelectors: [],
 79 |     notFoundSelectors: 0,
 80 |     longestSelector: ''
 81 |   };
 82 |   var outputs = [];
 83 | 
 84 |   var timeStart = (new Date).getTime();
 85 | 
 86 |   for (var i = 0, j = elements.length; i < j; i++) {
 87 |     var element = elements[i];
 88 |     var selector = testFunction(element);
 89 |     outputs.push({
 90 |       element: element,
 91 |       selector: selector
 92 |     });
 93 |   }
 94 | 
 95 |   var timeEnd = (new Date).getTime();
 96 |   result.duration = timeEnd - timeStart
 97 | 
 98 |   for (i = 0, j = outputs.length; i < j; i++) {
 99 |     var selector = outputs[i].selector;
100 |     var element = outputs[i].element;
101 | 
102 |     if (selector) {
103 | 
104 |       var foundElements = []
105 | 
106 |       try {
107 |         foundElements = document.querySelectorAll(selector);
108 |       } catch (e) {
109 |         result.invalidSelectors.push(selector);
110 |       }
111 | 
112 | 
113 |       if (foundElements.length > 1) {
114 |         result.nonUniqueSelectors.push(selector);
115 |       } else {
116 |         if (foundElements[0] === element) {
117 |           result.validSelectors.push(selector);
118 |         } else {
119 |           result.nonMatchingSelectors.push(selector);
120 |         }
121 |       }
122 | 
123 |       if (selector.length > result.longestSelector.length) {
124 |         result.longestSelector = selector;
125 |       }
126 | 
127 |     } else {
128 |       result.notFoundSelectors++;
129 |     }
130 | 
131 |   }
132 | 
133 |   return result;
134 | }
135 | 


--------------------------------------------------------------------------------
/vendor/snowflake/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | code extracted from:
 3 | https://github.com/desmondw/snowflake/blob/master/js/inject.js#L55
 4 | */
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | // creates a unique css selector for the given element
11 | function generateSelector(el){
12 |   var selector = "";
13 |   var tree = $(el).parentsUntil(document);
14 | 
15 |   // generate full selector by traversing DOM from bottom-up
16 |   for (var i = -1; i < tree.length; i++){
17 |     var e = i < 0 ? el : tree[i];
18 | 
19 |     var eCSS = querifyElement(e);
20 |     var query = eCSS.query + (selector.length ? ' > ' : '') + selector;
21 | 
22 |     var matches = $(query);
23 | 
24 |     if (matches.length === 1 && matches[0] === el){
25 |       return query;
26 |     }
27 |     else if (matches.length > 1 && i + 1 < tree.length){
28 | 
29 |       var parentQuery = generateSelector(tree[i + 1]);
30 |       var parentMatches = $(parentQuery).children(eCSS.tag);
31 |       var nthQuery = eCSS.tag + ':nth-of-type(' + (parentMatches.index(el) + 1) + ')' + (selector.length ? ' > ' : '') + selector;
32 |       var parentNthQuery = parentQuery + ' > ' + nthQuery;
33 |       var nthMatches = $(parentNthQuery);
34 | 
35 |       if (nthMatches.length === 1 && nthMatches[0] === el){
36 |         return parentNthQuery;
37 |       }
38 |       else {
39 |         printError("----------")
40 |         return 'ERROR';
41 |       }
42 |     }
43 |     else {
44 |       if (matches.length === 1) printError("Matched incorrect element. (matches.length = " + matches.length + ")")
45 |       else if (matches.length > 1) printError("Multiple matches, but traversed entire tree (algorithm not being specific enough).")
46 |       else printError("Could not find match for tag/id/class selector. (matches.length = " + matches.length + ")")
47 |       return 'ERROR';
48 |     }
49 |   }
50 | 
51 |   return selector;
52 | }
53 | 
54 | 
55 | 
56 | // returns object with element information in query format
57 | function querifyElement(e){
58 |   if (!e) return null;
59 | 
60 |   var tag = e.tagName.toLowerCase();
61 |   var ids = e.id ? '#' + e.id.trim().split(' ').join('#') : "";
62 |   var classes = e.className ? '.' + e.className.trim().split(' ').join('.') : "";
63 |   var query = tag + ids + classes;
64 | 
65 |   return {
66 |     element: e,
67 |     tag: tag,
68 |     ids: ids,
69 |     classes: classes,
70 |     query: query
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------