DEV Community

Yusuf Günbay
Yusuf Günbay

Posted on

How I Replaced Fragile CSS Selectors with Autonomous LLM Browser Loops in Node.js

Every developer who has maintained web automation or scraping pipelines knows the pain of unexpected UI updates. A single change in a class name, an updated DOM hierarchy, or a dynamic frontend framework rollout can instantly break hardcoded Playwright or Selenium scripts.
To solve this recurring issue, I developed Otobot—an autonomous browser agent designed to navigate complex web applications dynamically without depending on static selectors.
Key Architectural Concepts
Dynamic DOM Evaluation: Instead of relying on predefined element paths, Otobot extracts real-time DOM states and feeds them into an LLM decision loop.
Playwright & Node.js Backend: The core engine leverages Node.js to manage asynchronous, headless Playwright browser instances with minimal latency.
Resilient Action Pipelines: By analyzing page intent rather than fixed code structures, the agent adapts to UI changes on the fly.
Try the Live Demo
You can test the agent's real-time capabilities directly on the web instance:
👉 Live Instance: https://oto-bot-vyaz.onrender.com/
Product Hunt lansmanı üzerinden destek vermek veya incelemek isterseniz:
👉 Product Hunt: https://www.producthunt.com/products/otobot?launch=otobot
How do you currently handle UI breaking changes in your web scraping or testing workflows? I’d love to hear your approaches and feedback in the comments!

Top comments (0)