Remove or Replace Dynamically Generated Selectors in Automation Tests

[Ebazhanov]

Currently, our automation tests rely on dynamically generated selectors (e.g., .css-26b661, .css-ndkvgn-emptyCart) that change frequently, causing flaky and unreliable tests.

Example:

def search_dropdown_related_products_list(self):
    return self.find_by_page_locator('.css-26b661')


**Problems caused by these selectors:**

- Break tests whenever the UI is rebuilt or CSS classes change.
- Hard to maintain and debug.
- Not readable or meaningful — does not describe the element purpose.

**Proposed Solution**
- Use stable attributes like data-* attributes or ids whenever possible:

```<div data-ta="related-products-list"></div>
def search_dropdown_related_products_list(self):
    return self.find_by_page_locator('[data-ta="related-products-list"]')

• Use text-based locators for elements with visible text:

page.locator("text=Related Products")

• Avoid auto-generated CSS classes in tests. If CSS classes are needed, only use ones that are stable and meaningful.
  Optional: Add a style guide for automation selectors to ensure new components include a data-ta attribute or similar for reliable automation.

Benefits

• Tests will be more stable and less flaky.
• Automation code becomes more readable and maintainable.
• Reduces time spent fixing broken tests after UI changes.

Priority / Suggestion

• High — affects reliability of multiple automated tests, including checkout, cart, and product search flows.