Testing without AI in Magic Inspector
While Magic Inspector's AI-powered element detection is highly effective in most scenarios, there are rare situations where it may encounter difficulties in locating elements on a web page. This can occur due to various factors, as web UIs present complex challenges and each website is uniquely coded.
For cases where AI-powered detection is not optimal, Magic Inspector provides powerful non-AI features to ensure you can still create robust and reliable tests.
Disable AI only when Magic Inspector fails to find the element with the default AI-powered selectors. CSS and Coordinate selectors often result in flacky tests.
Alternative methods when AI falls short
When AI models struggle to identify elements correctly, you have two more options:
- Traditional CSS Selectors
- Coordinates Drawer
Note: To use these methods you must first disable the AI by clicking on the robot icon as shown below.
Let's explore each of these methods:
1. Traditional CSS Selectors
To activate traditional selectors you must Disable the AI and click on the "code" icon labeled as (1) in the capture below. Once it's done the text input will inform you you can pass CSS selector instead of natural language description as shown in (2) below.
Best Practices when using Traditional CSS Selectors
When using CSS selectors, keep these tips in mind:
- Use specific and unique selectors. If the selector is not unique, the test will fail.
- Avoid selectors based on XPath or other hierarchical selectors because they are generally not reliable, especially if the web page is rendered dynamically.
- Prefer ID and custom attributes selectors over other selectors.
- Test your selectors thoroughly to ensure they consistently identify the correct elements
By combining AI-powered detection with the option to use traditional CSS selectors, Magic Inspector provides a flexible and robust solution for all your web testing needs.
How to find the right CSS Selector
Finding good CSS Selectors can be hard and that's why Magic Inspector's AI-powered element detection is so valuable.
But since in some cases you may need to use them, we wrote a dedicated guide on how to find the right CSS Selectors.
2. Coordinates Drawer
For scenarios where even CSS selectors prove challenging, Magic Inspector offers a Coordinates Drawer feature.
This tool allows you to visually select an element on the page and use its coordinates for interactions.
- After disabling AI, click on the Mouse Cursor icon to open the Coordinates Drawer.
- Use the drawer to visually select the element you want to interact with.
- The coordinates will be automatically filled in for your instruction.
Since the coordinates drawer needs a screenshot of the page, you must first run the test up to the point where you want to use it. If the pointer is red, it means you must first run the test up to the point where you want to use it.
The Coordinates Drawer is particularly useful for:
- Elements that change dynamically and don't have consistent selectors
- Complex UI components that are difficult to describe or select using other methods
- Situations where you need to interact with a specific part of an element
By providing these alternative methods, Magic Inspector ensures that you can create comprehensive tests even in challenging scenarios where AI-powered detection may not be optimal.
Remember, while these non-AI methods are powerful, they should be used judiciously. AI-powered detection remains the most robust and maintainable approach for most testing scenarios.