🎯 Locator Practice Arena

1. Iframe Challenge Advanced

Practice switching to an iframe context and interacting with elements inside it. The form below is embedded in an iframe - you'll need to switch context to access it.

2. Delayed Rendering Challenge Timing

Click the button below and wait 2 seconds for an element to appear. Practice explicit waits for dynamically loaded content.

3. Visibility Toggle Challenge Visibility

Practice detecting and interacting with hidden elements that become visible. The element exists in the DOM but is hidden with CSS display:none.

4. Dynamic ID Challenge Dynamic

Practice locating elements with IDs that change on each page load. Use more stable locators like data-testid, class names, or XPath.

Note: The ID changes every 3 seconds. Use data-testid or class instead!

5. Nested Structure Challenge XPath

Practice complex XPath and CSS selectors with deeply nested elements. Navigate through parent-child-sibling relationships.

Practice selectors:
• XPath: //div[@data-level='4']//button
• CSS: .level-1 .level-2 .level-3 .level-4 button
• Data attribute: [data-testid='btn-nested-target']

6. Multiple Classes Challenge CSS

Practice selecting elements with multiple CSS classes. Different approaches for various automation frameworks.

Classes: multi-class primary-action button-large theme-purple interactive-element
Practice selectors:
• All classes: .multi-class.primary-action.button-large
• Attribute: [data-category='action'][data-priority='high']
• Contains: [class*='primary-action']

7. Shadow DOM Challenge Expert

Advanced: Practice accessing elements inside Shadow DOM. This requires special handling in most automation frameworks.