Lightning and it’s 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.

vs  

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 of the 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.

10 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 of the cases the priority is going to be maintainability, so try to keep using what your team has 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 have.

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 this 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”)

<button class=’slds-card’>
Example: $$(“button”)

Search for attribute (src, title, placeholder)
$$(“[attribute=’attributeValue‘]”)

<span class=”slds-card” title=”Users”>
Example: $$(“[title='Users']”)

Search for id:
$$(“#elementId”)

<input id=”username”>
Example: $$(“#username”)

Search for class:
$$(“.className1.className2”)

<div records-baserecordform_baserecordform="" class="slds-clearfix slds-card detail-panel-root">

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:

<div records-baserecordform_baserecordform="" class="slds-clearfix slds-card detail-panel-root">
$$(".detail-panel-root")

Also you can use the wildcard: $$(“[class*=‘detail-panel-root’]”)

Select the child of a specific element:

<div force-recordlayoutitem_recordlayoutitem="" class="test-id__field-label-container slds-form-element__label">
<span force-recordlayoutitem_recordlayoutitem="" class="test-id__field-label">Status</span>
</div>
$$("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

<button class=’slds-card’>
Example: //button

Search for attribute (src, title, placeholder)
//elementType[@attribute=’attributeValue‘]

<span class=”slds-card” title=”Users”>

Example: //span[@title=’Users’]

Search for class:
//elementType[@class=’className‘]

<div records-baserecordform_baserecordform="" class="slds-clearfix slds-card detail-panel-root">

Example: //div[@class=’slds-clearfix slds-card detail-panel-root’]

Search for an element with a partial attribute (contains):
//elementType[contains(@attribute,’attributeValue‘)]

<div title="foo test 123">

Example: //div[contains(@title,’123′)]

Search for element’s text:
//elementType[text()=’Text you are looking for‘]

<span force-recordlayoutitem_recordlayoutitem="" class="test-id__field-label">Status</span>

Example: //span[text()=’Status’]

Search for an immediate child:
//elementType[@atribute=’attributeValue‘]/inmediateChildType

<div id=’test’>
	<span>
		<span></span>
</span>
</div>

Example: //div[@id=’test’]/span

Search for a grandchild or any other descendant:
//elementType[@atribute=’attributeValue‘]//descendantType

<div id=’test’>
	<span>
		<a></a>
</span>
</div>

Example: //div[@id=’test’]//a

Search for a sibling:
//elementType[@atribute=’attributeValue‘]/following-sibling::siblingType

<span class="" data-aura-rendered-by="210:0">Process Name</span>
<span class="" data-aura-rendered-by="210:0">Test</span>
<div class="body margin" data-aura-rendered-by="204:0">
<input class="input uiInput uiInputText uiInput--default uiInput--input" maxlength="255" type="text" aria-describedby="" placeholder="" required="" id="processName" data-aura-rendered-by="191:0" data-aura-class="uiInput uiInputText uiInput--default uiInput--input" data-interactive-lib-uid="2" aria-required="true">
</div>

//span[text()='Process Name']/following-sibling::div/input

Why do I find an element in the Developer Tools but Selenium doesn’t?

Generally this happens for two reasons:

  1. 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());

  1. 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 like this:

If you are in an iframe, like in the previous image, 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 here, or check out our custom development services.

Leave a comment

Your email address will not be published. Required fields are marked *