css-selector-generator-benchmark

CSS Selector Generator Benchmark

This project has moved. It now lives in the css-selector-generator repository, under packages/css-selector-generator-benchmark.

**Run it at **

This repository is kept only so that existing links keep working. Its history was preserved in the move.

Benchmark to compare Javascript libraries for generating CSS selectors.

Overview

Tests each library against a complex HTML document and measures various performance and quality metrics.

Currently Tested Libraries

• css-selector-generator - Configurable CSS selector generator (default settings)
• css-selector-generator (custom options) - Same library with custom selectors: id, class, tag, nthchild
• @medv/finder - Fast and efficient CSS selector generator
• @cypress/unique-selector - Maintained by Cypress, returns unique CSS selector for DOM nodes

Metrics

The benchmark measures:

• Total Elements: Number of elements tested
• Selectors Generated: How many selectors were successfully created
• Unique Selectors: How many selectors uniquely match only their target element
• Total Time: Total time to generate all selectors
• Average Time: Average time per selector
• Fastest/Slowest Time: Performance range
• Selector Length: Shortest, longest, and average selector length

Installation

npm install

Usage

Development

npm run dev

Build

npm run build

Preview

npm run preview

Test Document

The benchmark uses complex.html from the css-selector-generator test suite, which contains a realistic web application interface with nested elements, multiple classes, IDs, and various attribute combinations.

Adding New Libraries

To add a new library to the benchmark:

1. Install the library: npm install
2. Update src/utils/benchmark.ts to include the library
3. Add the GitHub URL to src/components/BenchmarkTable.tsx

License

Unlicense

Bug Reports & Feature Requests

If you found any bugs or have feature requests, please file an issue at GitHub.