DEV Community

Shell QA
Shell QA

Posted on

Mastering Salesforce Automation: A Complete Guide to Centralized Test Locators

#salesforce #testing #javascript #automation

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);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)