{"id":16588,"library":"xpath-to-css","title":"XPath to CSS Selector Converter","description":"xpath-to-css is a JavaScript utility package designed to translate XPath expressions into equivalent CSS selectors. Originally conceived in Python for the `cssify` project by santiycr and later adapted to a JavaScript gist by Dither, this package by Jonathan Svenheden provides an npm-published, ES2015 and CommonJS-compatible solution. It is currently at version 1.2.0, with a release cadence that is likely infrequent, reflecting its stable utility nature rather than active feature development, given its last update was over two years ago. Its core differentiation lies in providing a readily accessible and battle-tested conversion tool for a specific web scraping and automation need, handling various common XPath patterns like ID, class, attribute, and positional selectors. Developers leverage it to bridge between systems that prefer CSS selectors (e.g., Playwright, Puppeteer) and sources that provide XPath (e.g., some browser developer tools, legacy systems).","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/svenheden/xpath-to-css","tags":["javascript"],"install":[{"cmd":"npm install xpath-to-css","lang":"bash","label":"npm"},{"cmd":"yarn add xpath-to-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add xpath-to-css","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary conversion function is exported as a default export in ES Modules.","wrong":"import { xPathToCss } from 'xpath-to-css';","symbol":"xPathToCss","correct":"import xPathToCss from 'xpath-to-css';"},{"note":"For CommonJS environments, `require` directly returns the default-exported function, no `.default` or destructuring is needed.","wrong":"const { xPathToCss } = require('xpath-to-css');","symbol":"xPathToCss (CommonJS)","correct":"const xPathToCss = require('xpath-to-css');"}],"quickstart":{"code":"import xPathToCss from 'xpath-to-css';\n\nconst xPath = '//div[@id=\"foo\"][2]/span[@class=\"bar\"]//a[contains(@class, \"baz\")]//img[1]';\nconst css = xPathToCss(xPath);\nconsole.log(css); // => 'div#foo:nth-of-type(2) > span.bar a[class*=baz] img:first-of-type'\n\nconst simpleXPath = '//h1';\nconst simpleCss = xPathToCss(simpleXPath);\nconsole.log(simpleCss); // => 'h1'\n\nconst attributeXPath = '//input[@type=\"text\"]';\nconst attributeCss = xPathToCss(attributeXPath);\nconsole.log(attributeCss); // => 'input[type=\"text\"]'","lang":"javascript","description":"Demonstrates how to import the `xPathToCss` function and convert a complex XPath expression to its CSS selector equivalent, along with simpler examples."},"warnings":[{"fix":"Simplify the XPath expression if possible, or manually craft a CSS selector or alternative locator strategy for the problematic part. Understand the limitations of CSS selectors compared to XPath.","message":"Not all advanced or complex XPath expressions can be directly translated into equivalent CSS selectors. The utility might return an error or an incomplete selector for XPath features like parent traversal (`..`), preceding-sibling, or complex text content matching not based on `contains()`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider batching conversions, offloading to a worker thread for very high-volume scenarios, or pre-converting known XPaths during application startup if performance becomes an issue.","message":"The conversion process is synchronous. While generally fast for typical XPath expressions, for applications requiring high performance or processing a very large number of extremely complex XPath expressions, this might introduce blocking delays.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review the package's GitHub issues for known limitations or unaddressed features before relying on it for cutting-edge XPath patterns. Be prepared to contribute fixes or fork if specific unsupported features are critical.","message":"The package appears to be in maintenance mode, with its last update over two years ago and no recent releases. While stable for its current functionality, new XPath features or complex edge cases introduced in newer browser standards may not be supported or actively developed.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"For ES Modules, use `import xPathToCss from 'xpath-to-css';`. For CommonJS, use `const xPathToCss = require('xpath-to-css');`.","cause":"Attempting to import `xPathToCss` as a named export (`import { xPathToCss } from 'xpath-to-css';`) when it is a default export, or using incorrect CommonJS destructuring.","error":"TypeError: xPathToCss is not a function"},{"fix":"Simplify the XPath expression if possible to use only commonly supported features (IDs, classes, attributes, direct child/descendant, position). If simplification is not feasible, consider manually crafting a CSS selector or using alternative element location strategies for the problematic part. Verify if the XPath expression is valid and if a CSS equivalent can exist.","cause":"The provided XPath expression uses features or patterns that the `xpath-to-css` library cannot translate into a CSS selector. Not all XPath constructs have direct CSS equivalents (e.g., parent traversal, complex text matching functions).","error":"Error: Unsupported XPath expression: //some/complex/xpath[contains(text(), 'value')]/parent::*"}],"ecosystem":"npm"}