Use Case 1: Handling Dynamic Selectors in Highly Dynamic Applications
When dealing with highly dynamic applications, attributes often have numeric values that change frequently. In these situations, you can use one or both of the following strategies:
1. Wildcard Formatting with an Asterisk (*):
If a dynamic selector has a numeric suffix or prefix (e.g., `title="Dashboard029"`), remove the dynamic part and replace it with an asterisk. For example, `[title*="Dashboard"]` would target any title starting with "Dashboard." After formatting, ensure the selector uniquely identifies the intended element.
2. Combining Parent and Child Selectors:
To increase accuracy, use a combination of parent and child selectors. This approach helps refine the target element within a complex DOM structure.
Ensure you apply these formatting techniques consistently for reliable element selection.
3. Using Data Attributes:
Data attributes (e.g., data-testid, data-custom-id) are often stable even in dynamic environments. If available, these attributes provide a reliable way to select elements.
4. XPath for Complex Structures:
In cases where CSS selectors are insufficient, XPath expressions can be used to target elements based on their hierarchical position or attributes. This method is particularly useful in GTM apps where the structure might be nested and dynamic.
5. Best Practices for Web Applications:
In web applications, it's important to avoid over-reliance on positional selectors (like :nth-child) since these can break with UI changes. Instead, use stable attributes or a combination of attributes to form robust selectors.
For further details, see Advanced Element Selectors for Workflows.
Use Case 2: Filter Selection on List Pages
When working on list pages where data filtering is required, target the filter section using precise instructions as outlined below.
Note: This use case is specific to CA PPM.
Additional Use Cases:
1. Handling Modal Dialogs and Pop-Ups
When your application uses pop-up windows (also called modals) to display extra information or actions, it's important to select the right elements inside them. Here’s how you can do it effectively:
- Target Elements Inside the Pop-Up: Once the pop-up appears, you can select the elements inside it just like you would on the main page. Look for stable attributes like id or data-* attributes, which are less likely to change.
Example: If you have a pop-up that says “Are you sure you want to proceed?” with buttons for “Yes” and “No,” make sure your selector accurately points to these buttons even if the pop-up appears at different times.
2. Working with Interactive Components (e.g., Drop-Downs, Date Pickers)
Interactive elements like drop-down menus or date pickers can sometimes be tricky because they involve user interaction before they appear or change. Here’s how to handle them:
- Use Event-Based Selection: For elements that only appear after a click (like a drop-down menu), make sure your tool waits for the user to interact before selecting them.
- Stable Identifiers: Always try to use stable identifiers like id, name, or data-* attributes to select these elements. This ensures your selection works even if the options inside the drop-down change.
- Cross-Check Selected Elements: If a drop-down has a default value, and users need to select a different option, make sure the element you select is unique and tied to the drop-down itself, not the changing values. This prevents errors when different values are selected.
Example: If your drop-down defaults to “Select a country,” but the user needs to pick a specific country like “Canada,” ensure your selector targets the drop-down correctly and can distinguish between different options without getting confused by the changing values.