How to Create Automated Tests for Salesforce Lightning Applications with BlazeMeter
Salesforce Lightning apps’ use of web components and the shadow DOM make it harder to build and run automated tests via traditional automation frameworks. BlazeMeter’s scriptless testing platform solves this problem making it possible to create and run test automation on applications using web components and the shadow DOM. Read on for details about how BlazeMeter solves the challenges of Salesforce Lightning and to see a step by step explanation of how to create and run an automated test on a Salesforce Lighting app.
BlazeMeter + Shadow DOM at a Glance
The BlazeMeter Chrome Extension recorder generates GUI functional tests for your Salesforce Lightning applications. This extension records all of the information necessary to execute a GUI functional test on the BlazeMeter platform, including locators for components that use the shadow DOM. The screenshot below shows the recorder. Here’s how to use it to record your test.
After recording, tests are sent to the BlazeMeter platform where they can be edited, configured, debugged and executed. The tests are shown in a graphical UI, that has the test steps, actions, objects and data garnered from the recording.
BlazeMeter GUI functional tests can be configured to run in different geographic locations with a combination of browsers and browser versions. Tests can be run on cloud execution engines or can be run behind the corporate firewall with On Premise Location (OPL) executors.
Select where to run the test and which browsers and versions to use by toggling the Location and Browser Selection options which are located below the test steps.
A test with the configuration shown below would execute the test steps on Firefox v 85, Chrome v 79 and Chrome v 88 on test execution engines based in the US West geography, in parallel. The test is executed on pristine environments, so there is no maintenance of test environments required.
Objects identified during the recording are saved in the Test Action Library. The test action library is a repository that stores objects and their locators. Objects can be located by CSS, XPath, Name, ID or via Shadow locators. The BlazeMeter extension will pick up as many locators as it can and save them as part of the object’s identifying details in the library.
In the screenshot below, the DatePicker object in the application has 5 locators associated with it. When running the automated test, BlazeMeter will start with the first locator to find the object. Once the object is found, the test step is executed and the test continues. If the first locator fails, it will proceed to the next locator and continue through the list until the object is located or in the case it isn't the test will fail.
For objects that use the shadow DOM, there is a special locator called the Shadow locator. BlazeMeter recognizes elements that are part of the shadow DOM and constructs a path to find the elements. In the screenshot below, the Max Price Slider element in the Dreamhouse application uses the shadow DOM.
BlazeMeter uses the Shadow locator type, so that the element can be located during the automated test execution.
When a new scriptless test is recorded, BlazeMeter checks the test action library and identifies objects that already exist. New objects are added to the library for future use.
The Object Spy or Object Picker is another useful tool to get object locators directly from an application’s UI. Clicking the object picker, activates it. Once the object picker is activated, click on any UI element in your application to get it’s locators. This object and it’s locators are now saved to the test action library for use in tests. The object spy works for objects with standard locators and objects with shadow locators. The object picker is shown in the screenshot below.
Once the object picker is active, use it to select the object of interest on the application. Convenient yellow highlighting shows which is the active object. Selecting the object imports the object and its locators into BlazeMeter. If the object already exists, the object details will not be imported. In the screenshot below, the slider object is highlighted in yellow, indicating that is the object in focus.
In Salesforce Lightning apps, many of the components have ID’s that consist of dynamically generated numbers. Thus, the object’s ID will change each time the page is rendered. This makes it very difficult to automate tests using that object because the ID is different each time.
For example, a common way to find elements is to use the object ID. This would return the element/s that have a specific ID. Suppose you have a text input field that has a locator ID=172 but the next time the page is rendered, the locator for the text input has changed and is now ID=184. Any tests that are relying on the object ID will fail because it has changed.
BlazeMeter provides the ability to filter out dynamic IDs using other locator types such as Xpath or CSS to consistently find the elements needed. This makes tests more robust and less brittle. The chrome extension has an option to export or not export the ID locators. Turning off this feature, prevents the dynamic ids from being part of the locator definition.
After a test is executed, both summary and detailed reports are displayed. The summary report shows the overall results for the test run including results for each browser session. If the test includes data iterations, they will be shown here as well.
Click on the green checkmark under each browser and version number to view the details report for that specific session. The details report includes all of the steps for the test and the video playback of the test execution. Test results can easily be shared across teams with a report URL.
See a SalesForce Test in Action!
Step 1: Record Your Test
Using the BlazeMeter chrome extension, we recorded a test of the sample Salesforce Lightning application, Dreamhouse. This test logs in to the platform, navigates to the Property Explorer, and sets the slider control to $800,000, Selects a property and then asserts the text associated with the property is correct. As part of our test we set labels like Login, Click Property Explorer and Set Slider in the recorder to help organize the test.
From the Recorder, click ‘Run’ and select “GUI Functional (Selenium)”. This will send the test to the Blazemeter platform and open a browser to the test.
The test sections are reflected in the headings of the test and each test step is displayed as its own action.
Step 2: Debug Your Test
Toggle the Debug tab, which will turn on the in tool debugger. The debugging menu appears. Add breakpoints to steps in the test. Run the debugger by clicking the Run button. This will execute the test on your local machine and browser.
The debugger launches a browser to start a debugging session and executes each test step. As the test executes, each test step will display a status. Yellow indicates currently executing, green indicates passed and red indicates failure. In the screenshot below, the test has executed successfully.
Step 3: Configure Your Test
Now that we have confidence our test works as we expect it to, we can configure the test to run on the broadcom platform, or on an On Premise location inside our corporate network. Turn on Locations via the toggle. All available locations will be displayed. Any On Premise Locations (OPLs) will be shown under the Private Locations heading. Public Locations are the BlazeMeter platforms cloud executors.
Next, select the browsers and version combinations you want to test.
Step 4: Execute Your Test
Click ‘Run Test’ to execute your test. The test/s will execute on the browser and version combinations in the location selected.
Step 5: Review the Test Results
The test results will be displayed as the test runs to completion. Summary and details reports are available for each browser and version combination. The Summary tab shows the overall results for the test.
The details tab shows the details of each specific browser session, along with a video showing the execution of the test steps.
Try it Yourself
In a few simple steps, you now know how to create an automated test for your own Salesforce Lightning Application, including getting element locators for objects using the Shadow DOM. To get started, sign up to BlazeMeter and start testing now!