Scraping React sites with dynamic obfuscated CSS classes (Tailwind / CSS-in-JS)

I have a scraper that breaks literally every Tuesday. The target site uses React with Styled Components, so the class names look like css-1a2b3c and change on every single deployment.

I can’t rely on the class names, and the DOM structure is too deep for reliable XPath. What’s the best way to handle this in RTILA?

Ah yeah, the classic CSS-in-JS headache. We built fuzzy fallback logic into our DOM extractor just for this scenario.

When our engine analyzes a page, it actively filters out volatile prefixes like css- and sc- to find “safe classes.” If you define a selector and the exact class match fails during a run, RTILA X doesn’t just give up. It falls back to checking partial class matches and even scans data-* attributes to see if the class name leaked into a data attribute (which happens a lot in React apps).

To add to that, if the classes are completely randomized, I highly recommend using RTILA’s text= selector prefix instead of CSS. If the button always says “Add to Cart”, just use text=“Add to Cart”. The engine handles the whitespace normalization and XPath conversion under the hood. Survives site redesigns way better than CSS paths imo.