{"id":15151831,"url":"https://github.com/alexferrari88/playwright-dompath","last_synced_at":"2025-10-24T08:31:12.797Z","repository":{"id":57698127,"uuid":"500023681","full_name":"alexferrari88/playwright-DOMPath","owner":"alexferrari88","description":"Retrieve XPath and CSS selectors from elements selected in Playwright","archived":false,"fork":false,"pushed_at":"2022-06-17T13:44:06.000Z","size":226,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T00:32:56.338Z","etag":null,"topics":["css-selector","dom","playwright","playwright-typescript","xpath"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexferrari88.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-05T06:57:42.000Z","updated_at":"2024-11-13T22:55:40.000Z","dependencies_parsed_at":"2022-09-02T10:21:58.815Z","dependency_job_id":null,"html_url":"https://github.com/alexferrari88/playwright-DOMPath","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferrari88%2Fplaywright-DOMPath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferrari88%2Fplaywright-DOMPath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferrari88%2Fplaywright-DOMPath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferrari88%2Fplaywright-DOMPath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexferrari88","download_url":"https://codeload.github.com/alexferrari88/playwright-DOMPath/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237937779,"owners_count":19390543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-selector","dom","playwright","playwright-typescript","xpath"],"created_at":"2024-09-26T15:22:20.700Z","updated_at":"2025-10-24T08:31:07.423Z","avatar_url":"https://github.com/alexferrari88.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Playwright DOMPath 🎭\n\n[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)\n[![NPM Version](https://img.shields.io/npm/v/playwright-dompath?style=flat-square)](https://www.npmjs.com/package/playwright-dompath)\n[![lgtm Code Quality](https://img.shields.io/lgtm/grade/javascript/github/alexferrari88/playwright-DOMPath?style=flat-square)](https://lgtm.com/projects/g/alexferrari88/playwright-DOMPath/)\n[![GitHub Last Commit](https://img.shields.io/github/last-commit/alexferrari88/playwright-DOMPath?style=flat-square)](https://img.shields.io/github/last-commit/alexferrari88/playwright-DOMPath?style=flat-square)\n\nThis library implements the ChromeDevTools DOMPath functionality in Playwright.\n\nThis means that you can retrieve the CSS selector or the XPath of any element you select in your Playwright code.\n\n🐍 _Python version here: [https://github.com/alexferrari88/playwright-dompath-py](https://github.com/alexferrari88/playwright-dompath-py)_\n\n## Installation 📦\n\nInstall with npm\n\n```bash\n  npm install playwright-dompath\n```\n\n## API Reference 📚\n\n#### cssPath\n\n```typescript\ncssPath: (elHandle: Playwright.ElementHandle | Playwright.Locator, optimized?: boolean) =\u003e Promise\u003cstring\u003e\n```\n\n#### xPath\n\n```typescript\nxPath: (elHandle: Playwright.ElementHandle | Playwright.Locator, optimized?: boolean) =\u003e Promise\u003cstring\u003e\n```\n\n## Usage 🔧\n\nJust import the `cssPath` or `xPath` from this module:\n\n```typescript\nimport { cssPath, xPath } from \"playwright-dompath\";\n```\n\nThen use either function by passing it the element you previously selected (as ElementHandle or Locator):\n\n```typescript\nconst searchBar = await page.$('input[name=\"q\"]');\nconsole.log(\"CSS Path:\", await cssPath(searchBar));\nconsole.log(\"XPath:\", await xPath(searchBar));\n```\n\n_Since these functions return a promise, make sure to `await` the call (of course, you can also use the `.then` syntax instead. You do you.)_\n\n## Full Example 🎁\n\n```typescript\nimport { chromium } from \"playwright\";\nimport { cssPath, xPath } from \"playwright-dompath\";\n\n  const url = \"https://google.com\";\n  const browser = await chromium.launch();\n  const context = await browser.newContext();\n  const page = await context.newPage();\n  await page.goto(url);\n  const searchBar = await page.$('input[name=\"q\"]');\n  console.log(\"CSS Path:\", await cssPath(searchBar));\n  console.log(\"XPath:\", await xPath(searchBar));\n  }\n  await browser.close();\n};\n```\n\nWhich will output (class names may vary for you):\n\n```bash\nCSS Path: body \u003e div.L3eUgb \u003e div.o3j99.ikrT4e.om7nvf \u003e form \u003e div:nth-child(1) \u003e div.A8SBwf \u003e div.RNNXgb \u003e div \u003e div.a4bIc \u003e input\nXPath: /html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/input\n```\n\n## Used by\n\n- [ScrapeBlocks](https://github.com/alexferrari88/scrapeblocks): scraping automation framework based on Playwright\n\n## TODO ✅\n\n- Improve functions' speed\n- Increase tests coverage (include edge cases)\n- Add better error handling\n\n## Contributing 🤝🏼\n\nFeel free to fork this repo and create a PR. I will review them and merge if ok.\n\nThe above todos can be a very good place to start.\n\n## Acknowledgements 🤗\n\n- This library reimplements the [Chrome DevTools DOMPath library](https://github.com/ChromeDevTools/devtools-frontend/blob/b6a3b2ae8a4c1d5847c2bb1535377e13ee3045be/front_end/panels/elements/DOMPath.ts) with modifications to allow the use of Playwright's ElementHandle and Locator\n\n## License 📝\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexferrari88%2Fplaywright-dompath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexferrari88%2Fplaywright-dompath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexferrari88%2Fplaywright-dompath/lists"}