Show HN: Chrome Dev Tools Element Selector for Playwright and Scraping

3rd attempt to posting something to ShowHN. Learning from my mistakes (and hopefully not making new ones).

I'm excited to introduce you to Rayrun extension - a Google Chrome extension that makes the task of developing tests and scraping scripts more efficient.

As a web developer, I often myself trying to figure out what is the best CSS selector for a given element. I've tried many tools, but none of them were good enough. So I decided to create my own.

Rayrun is a Google Chrome extension that helps you to generate CSS selectors for web elements. It is compatible with popular testing tools like Puppeteer, Playwright, Cypress, and Selenium. With Rayrun, you can effortlessly select web elements, regardless of how nested or complex they may be, and swiftly generate precise selectors.

If you are using @playwright/test, Rayrun can also generate Locators (https://playwright.dev/docs/api/class-locator) for you (e.g. `getByLabel('Password')`). You may also use Rayrun to generate XPath selectors (e.g. `//input[@type="submit"]`).

For those familiar with the Playwright [codegen](https://playwright.dev/docs/codegen), the Locator output is similar. The main difference is that Rayrun is a Chrome extension, so you can use it from your browser, which is closer to how I work.

I believe that Rayrun will be a valuable addition to your web development and testing toolkit.

It is my first Chrome Extension so I appologize if you find any glaring mistakes, but please give it a try, share feedback, and I will do my best to address any concerns. I'm here to answer any questions you may have.

Quick note regarding privacy: Rayrun does not collect _any_ data, and it has passed an extended audit by Google Chrome Store team.

Thank you for your time and happy coding!

For various projects in the past I’ve dabbled in generating selectors so I’m curious what you’ve come up with!

My more recent interests have been to find a way to generate more robust selectors that could handle slight-to-mild DOM structure changes (also cannot rely fully on classes, ids, html attributes). This wouldn’t necessarily be for testing but could apply. There are applications that need the ability to find an element despite its location in the dom changing slightly (ie its now nested one div deeper). For instance most xpath or “traverse down the dom until find parent div” type selectors would be too fragile. What i’ve been trying to figure out is a way to “fingerprint” the target element and have a algorithm that has a few ways to look for that element, each failure would try a less strict, more flexible method.

Just curious if the work you’ve done ventures into anything like this or if in your research you came across anything like that?

Here is a direct link:

https://chrome.google.com/webstore/detail/rayrun/olljocejdge...