Lightning and its components have more auto-generated code than other apps, this usually makes the development in Salesforce easier, faster, and more stable! Keep reading and learn more about Selenium Salesforce Automation.
From an automation perspective, this makes things harder and forces us to be more creative when finding locators and interacting with apps. Some things like the ID’s auto-generation and the possibility of multiple attributes with almost the same code makes us rethink the way we locate the WebElement.
In order to select these elements, we need to use all that is in our hands. To do so, we need to understand more about locators.
In general, deciding on which kind of locator is better is like debating whether winter or summer is better. You will have people going for CSS and other people going for Xpath.
The important thing here is understanding when to use each and how to use them in the best way.
CSS:
Most people consider that CSS is better because the operation of finding an element with CSS is faster than Xpath and most of the time it’s easier to read.
Ten years ago the difference in time was a couple milliseconds, but nowadays with the processors we have, it’s just a fraction of a millisecond.
XPATH:
Xpath is the most powerful method. For example, it allows us to go forward and backward in the HTML, lets us search for the text of an element and it’s easier to find a sibling with it.
Unfortunately, there is a bigger learning curve so people tend to fear it.
So, which one should I use to automate Salesforce tests?
It depends on many things. For example:
Is your team already using one of them?
In most cases, the priority is going to be maintainability, so try to keep using what your team has already been using.
Are the elements you are trying to find complex and hard to identify?
In this case, Xpath can be a good choice as we need as much power as we can.
Both of these are things to consider when deciding between CSS and Xpath
How to find a CSS locator:
In browser:
Right click -> Inspect Element ->Console
There are two ways to look for elements, we can use a single $ symbol or use it twice, like $.
When using the single $ symbol, we are looking for the first element that meets the criteria that we specify.
When using the $, we are looking for the list of elements that meet the criteria.
I recommend to always use the $ so we can see the full list of elements that meet these criteria. Be aware that our locator is pointing to multiple elements because this could cause issues in our automation.
Search for element type (button, div, a, span, etc):
$(“elementType”)
Search for attribute (src, title, placeholder)
$(“[attribute=’attributeValue‘]”)
Example: $(“[title='Users']”)Search for id:
$(“#elementId”)
Example: $(“#username”)Search for class:
$(“.className1.className2”)
Example: $(“.slds-clearfix.slds-card.detail-panel-root”)
Also: $(“[class=’slds-clearfix slds-card detail-panel-root’]”)
If you want to select a class just for one of the classes you can do something like this:
Also you can use the wildcard: $(“[class*=‘detail-panel-root’]”)
Select the child of a specific element:
$("parentElement childElement")
$(".test-id__field-label-container span")How to find an Xpath locator:
In browser:
Right click -> Inspect Element -> command+f
Search for element type (button, div, a, span, etc):
//elementType
Search for attribute (src, title, placeholder)
//elementType[@attribute=’attributeValue‘]
Example: //span[@title=’Users’]
Search for class:
//elementType[@class=’className‘]
Example: //div[@class=’slds-clearfix slds-card detail-panel-root’]
Search for an element with a partial attribute (contains):
//elementType[contains(@attribute,’attributeValue‘)]
Example: //div[contains(@title,’123′)]
Search for element’s text:
//elementType[text()=’Text you are looking for‘]
StatusExample: //span[text()=’Status’]
Search for an immediate child:
//elementType[@atribute=’attributeValue‘]/inmediateChildType
Example: //div[@id=’test’]/span
Search for a grandchild or any other descendant:
//elementType[@atribute=’attributeValue‘]//descendantType
Example: //div[@id=’test’]//a
Search for a sibling:
//elementType[@atribute=’attributeValue‘]/following-sibling::siblingType
Process Name
Test
//span[text()='Process Name']/following-sibling::div/input
Why is it I can find an element in the Developer Tools, but Selenium can’t?
Generally this happens for two reasons:
- There are multiple tabs open and Selenium is looking into the wrong one.
We can fix it executing the following line in our test:
driver.switchTo().window(driver.getWindowHandles().toArray()[{numberOfTabsYouWantToUse}].toString());
I.E: driver.switchTo().window(driver.getWindowHandles().toArray()[0].toString());
- The element you are looking for is inside an iframe.
You can verify if it’s in an iframe or not by right clicking on the element you are trying to find and then click in the Console tab. Then you will see if the dropdown is in top ( the default content) or if it’s in an iframe.
If you are in an iframe, you have to switch to it in your test in order to interact with its elements. To do this, you can use the following code:
driver.switchTo().frame({iframeWebelement});
I.E: driver.switchTo().frame(driver.findElement(By.cssSelector(“iframe”)));
Learn more from our team about developing on the Salesforce Platform, or check out our Salesforce custom development services.
