Teaching AI Agents by Example: The End of brittle selectors

The Brittle Selector Problem If you've ever built browser automation, you know the pain. You spend hours crafting the perfect XPath or CSS selector, test it thoroughly, deploy it to production... and then the target website updates their CSS framework and everything breaks. // Yesterday this worked const submitBtn = await page . $ ( ' #submit-button ' ); // Today it's broken because the ID changed to 'btn-submit-primary' This isn't just annoying—it's a fundamental limitation in how we teach AI agents to interact with the web. Why Demonstration Beats Specification Humans don't learn by reading CSS selectors. We learn by watching, doing, and repeating. A child learns to tie their shoes by watching their parent, not by reading a DOM specification. AI agents should learn the same way. When you record your screen performing a task, you're capturing: Intent - What you're trying to accomplish Context - The surrounding UI elements that help identify targets Flow - The sequence of actions and d