Scaling test automation across a large platform like Salesforce often leads to flaky tests, duplicated code, and maintenance headaches whenever the UI changes. To tackle this, centralizing element locators into a single source of truth is crucial.
Here is a structured guide and reference implementation for organizing CSS and XPath selectors within a Salesforce Test Framework.
Why Centralize Your Locators?
- Single Source of Truth: Centralizing selectors prevents duplication and keeps element locators consistent across all test suites .
Ease of Maintenance: When Salesforce updates its UI or DOM structure, updating a selector in one central file automatically propagates across all tests.
Clarity & Readability: Categorizing locators logically makes test scripts cleaner, more readable, and easier to debug.
Structure Overview
Organize your locators by grouping global elements separately from module-specific components:
| Section | Description |
|---|---|
| COMMON | Shared locators used across all modules (login, app launcher, navigation, etc.) |
| MODULE_A | Locators specific to Module A processes and pages |
| MODULE_B | Locators for Module B pages and actions |
| MODULE_C | Locators for Module C pages and processes |
Implementation Example
Import your centralized LOCATORS object into your page objects or test scripts.
import { LOCATORS } from 'path/to/CONSOLIDATED_LOCATORS.js';
// Example: Locating the login button
const loginBtn = page.locator(LOCATORS.COMMON.LOGIN.loginButton);
Common Salesforce Locators Reference
1. Login Page
Login Container: div.login, form[name="login"]
Username Field: input[name="username"], input#username
Password Field: input[name="pw"], input#password
Login Button: input[type="submit"], button:has-text("Log In")
Home Indicator: div.slds-global-header, nav.slds-context-bar
2. App Launcher
Launcher Button: button[title="App Launcher"], div.slds-icon-waffle, [aria-label="App Launcher"]
Launcher Dialog: div.modal-container, div.appLauncher, div.slds-modal
Search Input: input[placeholder="Search apps and items..."], input.slds-input[aria-label*="Search"]
3. Navigation & Layout
Menu Button: button.slds-context-bar__button, button[title="Show Navigation Menu"]
Page Header: div.slds-page-header, article.slds-card
Common Buttons: Save, Save and New, Next, Edit, New, Close, OK, Submit
Best Practices & Tips
CSS vs. XPath: Prefer CSS selectors for faster execution; reserve XPath for complex, hierarchical, or dynamic text matching.
Dynamic Locators: Use helper functions for locators that accept parameters (e.g., matching a dynamic record or app name).
Separation of Concerns: Keep your locators strictly inside locator files or page objects—avoid hardcoding raw selectors inside test files.
