feat: run every library against the shared scenarios

Author: fczbkk

package-lock.json

@@ -14,7 +14,8 @@
     "@medv/finder": "^4.0.2",
     "css-selector-generator": "^3.9.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "css-selector-generator-scenarios": "*"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

packages/css-selector-generator-benchmark/package.json

@@ -500,3 +500,26 @@ body {
   color: #333;
   text-decoration: none;
 }
+
+.scenario-conformance {
+  margin-top: 2rem;
+}
+
+.scenario-conformance .note {
+  font-size: 0.8rem;
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+.scenario-conformance code {
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.conformance-toggle {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  margin: 1rem 0;
+  font-size: 0.9rem;
+}

packages/css-selector-generator-benchmark/src/App.css

@@ -1,12 +1,22 @@
-import { useState, useEffect, useLayoutEffect, useRef } from 'react';
-import { BenchmarkTable } from './components/BenchmarkTable';
-import { CapabilitiesComparison } from './components/CapabilitiesComparison';
-import { SelectorComparison } from './components/SelectorComparison';
-import { runBenchmark, type BenchmarkResults, type BenchmarkProgress } from './utils/benchmark';
-import simpleHtml from './data/simple.html?raw';
-import complexHtml from './data/complex.html?raw';
-
-type HtmlPreset = 'simple' | 'complex';
+import { useState, useEffect, useLayoutEffect, useRef } from "react";
+import { BenchmarkTable } from "./components/BenchmarkTable";
+import { CapabilitiesComparison } from "./components/CapabilitiesComparison";
+import { SelectorComparison } from "./components/SelectorComparison";
+import { ScenarioConformance } from "./components/ScenarioConformance";
+import {
+  runBenchmark,
+  type BenchmarkResults,
+  type BenchmarkProgress,
+} from "./utils/benchmark";
+import {
+  runScenarioConformance,
+  type ConformanceProgress,
+  type LibraryConformance,
+} from "./utils/scenarioConformance";
+import simpleHtml from "./data/simple.html?raw";
+import complexHtml from "./data/complex.html?raw";
+
+type HtmlPreset = "simple" | "complex";
 
 const HTML_PRESETS: Record<HtmlPreset, string> = {
   simple: simpleHtml,
@@ -17,6 +27,11 @@ function App() {
   const [results, setResults] = useState<BenchmarkResults | null>(null);
   const [isRunning, setIsRunning] = useState(false);
   const [progress, setProgress] = useState<BenchmarkProgress | null>(null);
+  const [conformance, setConformance] = useState<LibraryConformance[] | null>(
+    null,
+  );
+  const [conformanceProgress, setConformanceProgress] =
+    useState<ConformanceProgress | null>(null);
   const htmlContentRef = useRef(simpleHtml);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isHtmlEditorExpanded, setIsHtmlEditorExpanded] = useState(false);
@@ -25,9 +40,11 @@ function App() {
     const el = textareaRef.current;
     if (!el) return;
     el.value = htmlContentRef.current;
-    const handleInput = () => { htmlContentRef.current = el.value; };
-    el.addEventListener('input', handleInput);
-    return () => el.removeEventListener('input', handleInput);
+    const handleInput = () => {
+      htmlContentRef.current = el.value;
+    };
+    el.addEventListener("input", handleInput);
+    return () => el.removeEventListener("input", handleInput);
   }, [isHtmlEditorExpanded]);
 
   const handlePresetChange = (preset: HtmlPreset) => {
@@ -41,18 +58,25 @@ function App() {
     setIsRunning(true);
     setResults(null);
     setProgress(null);
+    setConformance(null);
 
     // Use setTimeout to allow UI to update before heavy computation
     setTimeout(async () => {
       const benchmarkResults = await runBenchmark(
         textareaRef.current?.value ?? htmlContentRef.current,
         (prog) => {
           setProgress(prog);
-        }
+        },
       );
       setResults(benchmarkResults);
-      setIsRunning(false);
       setProgress(null);
+
+      const conformanceResults = await runScenarioConformance((prog) => {
+        setConformanceProgress(prog);
+      });
+      setConformance(conformanceResults);
+      setConformanceProgress(null);
+      setIsRunning(false);
     }, 100);
   };
 
@@ -67,6 +91,7 @@ function App() {
         <h1>CSS Selector Generator Benchmark</h1>
         <nav className="header-nav">
           <a href="#benchmark-results">Benchmark Results</a>
+          <a href="#scenario-conformance">Scenario Conformance</a>
           <a href="#library-capabilities">Library Capabilities Comparison</a>
         </nav>
       </header>
@@ -77,21 +102,21 @@ function App() {
             className="html-editor-toggle"
             onClick={() => setIsHtmlEditorExpanded(!isHtmlEditorExpanded)}
           >
-            {isHtmlEditorExpanded ? '▼' : '▶'} Custom HTML
+            {isHtmlEditorExpanded ? "▼" : "▶"} Custom HTML
           </button>
           {isHtmlEditorExpanded && (
             <>
               <div className="html-presets">
                 <span>Load preset:</span>
                 <button
                   className="preset-button"
-                  onClick={() => handlePresetChange('simple')}
+                  onClick={() => handlePresetChange("simple")}
                 >
                   Simple
                 </button>
                 <button
                   className="preset-button"
-                  onClick={() => handlePresetChange('complex')}
+                  onClick={() => handlePresetChange("complex")}
                 >
                   Complex
                 </button>
@@ -110,14 +135,26 @@ function App() {
         </div>
 
         <div className="controls">
-          <button className="button" onClick={handleRunBenchmark} disabled={isRunning}>
-            {isRunning ? 'Running benchmark...' : 'Re-run Benchmark'}
+          <button
+            className="button"
+            onClick={handleRunBenchmark}
+            disabled={isRunning}
+          >
+            {isRunning ? "Running benchmark..." : "Re-run Benchmark"}
           </button>
         </div>
 
         {isRunning && progress && (
           <div className="loading">
-            Testing {progress.libraryName}: {progress.currentElement}/{progress.totalElements} elements
+            Testing {progress.libraryName}: {progress.currentElement}/
+            {progress.totalElements} elements
+          </div>
+        )}
+
+        {isRunning && conformanceProgress && (
+          <div className="loading">
+            Checking scenario {conformanceProgress.current}/
+            {conformanceProgress.total}: {conformanceProgress.scenarioId}
           </div>
         )}
 
@@ -129,6 +166,12 @@ function App() {
           </div>
         )}
 
+        {conformance && (
+          <div id="scenario-conformance">
+            <ScenarioConformance results={conformance} />
+          </div>
+        )}
+
         <div id="library-capabilities">
           <CapabilitiesComparison />
         </div>

packages/css-selector-generator-benchmark/src/App.tsx

@@ -1,14 +1,15 @@
-import type { LibraryStats } from '../utils/benchmark';
+import type { LibraryStats } from "../utils/benchmark";
 
 interface BenchmarkTableProps {
   libraries: LibraryStats[];
 }
 
 const LIBRARY_URLS: Record<string, string> = {
-  'css-selector-generator': 'https://github.com/fczbkk/css-selector-generator',
-  'css-selector-generator (custom options)': 'https://github.com/fczbkk/css-selector-generator',
-  '@medv/finder': 'https://github.com/antonmedv/finder',
-  '@cypress/unique-selector': 'https://github.com/cypress-io/unique-selector',
+  "css-selector-generator": "https://github.com/fczbkk/css-selector-generator",
+  "css-selector-generator (custom options)":
+    "https://github.com/fczbkk/css-selector-generator",
+  "@medv/finder": "https://github.com/antonmedv/finder",
+  "@cypress/unique-selector": "https://github.com/cypress-io/unique-selector",
 };
 
 export function BenchmarkTable({ libraries }: BenchmarkTableProps) {
@@ -17,55 +18,55 @@ export function BenchmarkTable({ libraries }: BenchmarkTableProps) {
     const uniqueRate = (stats.uniqueCount / stats.totalCount) * 100;
 
     switch (metric) {
-      case 'totalElements':
+      case "totalElements":
         return stats.totalCount;
-      case 'selectorsGenerated':
+      case "selectorsGenerated":
         return `${stats.successCount} (${successRate.toFixed(1)}%)`;
-      case 'uniqueSelectors':
+      case "uniqueSelectors":
         return `${stats.uniqueCount} (${uniqueRate.toFixed(1)}%)`;
-      case 'totalTime':
+      case "totalTime":
         return `${stats.totalTime.toFixed(2)}ms`;
-      case 'averageTime':
+      case "averageTime":
         return `${stats.averageTime.toFixed(3)}ms`;
-      case 'fastestTime':
+      case "fastestTime":
         return `${stats.fastestTime.toFixed(3)}ms`;
-      case 'slowestTime':
+      case "slowestTime":
         return `${stats.slowestTime.toFixed(3)}ms`;
-      case 'avgSelectorLength':
+      case "avgSelectorLength":
         return stats.averageSelectorLength.toFixed(1);
-      case 'shortestSelector':
+      case "shortestSelector":
         return stats.shortestSelector;
-      case 'longestSelector':
+      case "longestSelector":
         return stats.longestSelector;
       default:
-        return '';
+        return "";
     }
   };
 
   const getCellClass = (stats: LibraryStats, metric: string): string => {
     const successRate = (stats.successCount / stats.totalCount) * 100;
     const uniqueRate = (stats.uniqueCount / stats.totalCount) * 100;
 
-    if (metric === 'selectorsGenerated') {
-      return successRate === 100 ? 'success' : 'warning';
+    if (metric === "selectorsGenerated") {
+      return successRate === 100 ? "success" : "warning";
     }
-    if (metric === 'uniqueSelectors') {
-      return uniqueRate === 100 ? 'success' : 'error';
+    if (metric === "uniqueSelectors") {
+      return uniqueRate === 100 ? "success" : "error";
     }
-    return '';
+    return "";
   };
 
   const metrics = [
-    { key: 'totalElements', label: 'Total Elements' },
-    { key: 'selectorsGenerated', label: 'Selectors Generated' },
-    { key: 'uniqueSelectors', label: 'Unique Selectors' },
-    { key: 'totalTime', label: 'Total Time' },
-    { key: 'averageTime', label: 'Average Time' },
-    { key: 'fastestTime', label: 'Fastest Time' },
-    { key: 'slowestTime', label: 'Slowest Time' },
-    { key: 'avgSelectorLength', label: 'Avg Selector Length' },
-    { key: 'shortestSelector', label: 'Shortest Selector' },
-    { key: 'longestSelector', label: 'Longest Selector' },
+    { key: "totalElements", label: "Total Elements" },
+    { key: "selectorsGenerated", label: "Selectors Generated" },
+    { key: "uniqueSelectors", label: "Unique Selectors" },
+    { key: "totalTime", label: "Total Time" },
+    { key: "averageTime", label: "Average Time" },
+    { key: "fastestTime", label: "Fastest Time" },
+    { key: "slowestTime", label: "Slowest Time" },
+    { key: "avgSelectorLength", label: "Avg Selector Length" },
+    { key: "shortestSelector", label: "Shortest Selector" },
+    { key: "longestSelector", label: "Longest Selector" },
   ];
 
   return (