Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexferrari88/playwright-dompath
Retrieve XPath and CSS selectors from elements selected in Playwright
https://github.com/alexferrari88/playwright-dompath
css-selector dom playwright playwright-typescript xpath
Last synced: 26 days ago
JSON representation
Retrieve XPath and CSS selectors from elements selected in Playwright
- Host: GitHub
- URL: https://github.com/alexferrari88/playwright-dompath
- Owner: alexferrari88
- License: mit
- Created: 2022-06-05T06:57:42.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-06-17T13:44:06.000Z (over 2 years ago)
- Last Synced: 2024-04-24T11:08:31.002Z (7 months ago)
- Topics: css-selector, dom, playwright, playwright-typescript, xpath
- Language: TypeScript
- Homepage:
- Size: 221 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Playwright DOMPath 🎭
[](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
[](https://www.npmjs.com/package/playwright-dompath)
[](https://lgtm.com/projects/g/alexferrari88/playwright-DOMPath/)
[](https://img.shields.io/github/last-commit/alexferrari88/playwright-DOMPath?style=flat-square)
This library implements the ChromeDevTools DOMPath functionality in Playwright.
This means that you can retrieve the CSS selector or the XPath of any element you select in your Playwright code.
🐍 _Python version here: [https://github.com/alexferrari88/playwright-dompath-py](https://github.com/alexferrari88/playwright-dompath-py)_
## Installation 📦
Install with npm
```bash
npm install playwright-dompath
```
## API Reference 📚
#### cssPath
```typescript
cssPath: (elHandle: Playwright.ElementHandle | Playwright.Locator, optimized?: boolean) => Promise
```
#### xPath
```typescript
xPath: (elHandle: Playwright.ElementHandle | Playwright.Locator, optimized?: boolean) => Promise
```
## Usage 🔧
Just import the `cssPath` or `xPath` from this module:
```typescript
import { cssPath, xPath } from "playwright-dompath";
```
Then use either function by passing it the element you previously selected (as ElementHandle or Locator):
```typescript
const searchBar = await page.$('input[name="q"]');
console.log("CSS Path:", await cssPath(searchBar));
console.log("XPath:", await xPath(searchBar));
```
_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.)_
## Full Example 🎁
```typescript
import { chromium } from "playwright";
import { cssPath, xPath } from "playwright-dompath";
const url = "https://google.com";
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto(url);
const searchBar = await page.$('input[name="q"]');
console.log("CSS Path:", await cssPath(searchBar));
console.log("XPath:", await xPath(searchBar));
}
await browser.close();
};
```
Which will output (class names may vary for you):
```bash
CSS Path: body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form > div:nth-child(1) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input
XPath: /html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/input
```
## Used by
- [ScrapeBlocks](https://github.com/alexferrari88/scrapeblocks): scraping automation framework based on Playwright
## TODO ✅
- Improve functions' speed
- Increase tests coverage (include edge cases)
- Add better error handling
## Contributing 🤝🏼
Feel free to fork this repo and create a PR. I will review them and merge if ok.
The above todos can be a very good place to start.
## Acknowledgements 🤗
- 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
## License 📝
[MIT](https://choosealicense.com/licenses/mit/)