+ Start a Discussion
Jacob Friedman 11Jacob Friedman 11 

Test Automation Strategies in Lightning due to dynamic locators

I'm working on Selenium Test Automation of my App using the LEX.  In Classic, locators are static in that I can reference an ID number or name, whereas it seems the same field/object in LEX has dynamic IDs depending on when I access said element.

HTML from LEX yields:
<a aria-required="true" class="select" aria-disabled="false" aria-haspopup="true" tabindex="0" role="button" aria-label="Enrollment Type" title="" href="javascript:void(0);" data-aura-rendered-by="2944:0" data-interactive-lib-uid="60">--None--</a>

I try to use the bold faced section as a locator, but it changes each time I click on it.  Here's another example of the same elment. As you can see the id is now 90, instead of 60 above.
<a aria-required="true" class="select" aria-disabled="false" aria-haspopup="true" tabindex="0" role="button" aria-label="Enrollment Type" title="" href="javascript:void(0);" data-aura-rendered-by="4995:0" data-interactive-lib-uid="90">--None--</a>

Here's a snippet from classic, where I can always US the same ID.  It never changes.  Has anyone found a solution to this problem for finding element locators in LEX?
<select id="00No000000DyWd7" name="00No000000DyWd7" tabindex="8"><option value="">--None--</option><option value="New Enrollment">New Enrollment</option><option value="Re-Enrollmet">Re-Enrollmet</option><option value="Re-Validation">Re-Validation</option><option value="Information Update">Information Update</option></select>

Jacob Friedman 11Jacob Friedman 11
I'm making progress on this, although it's been a ton of trial and error since it's very difficult to find a unique locator to get to the element that I want.  The general approach I am taking is to find labels or text that are generally static throughout my app.  I reference them and then use the 'following' syntax for xpath in order to find the element that I am looking at.  I used a lot of Ctrl-F in the html inspector to look for uniqueness.

For instance, I have a custom object called 'Credentialing'.  The word 'Credentialing' is used a lot throughout my app, so it's hard to key in on this.  What I was looking to do was locate a lookup field called 'Credentialing Manager', which looks up to Salesforce Users.  I used the below locators to Edit the desired field, type values to search for users, and select the users.
1. Edit the Desired field: xpath="//button[@title='Edit Credential Manager']". This found a button on screen with the referenced title.
2. Type in the clicked on field: xpath="//input[@placeholder='Search People']"
3. Select name from list that was displayed based on #2: xpath="input[@placeholder='Search People']//following::li[3]"  This finds the field placeholder "Search People" and then navigated to the third li tag that folows it.  

A less brittle way of finding #3 above is to use the following xpath because it's not relying on the 3rd li tag, but looking for specific text you're searching for.  For instance I was searching for my name, Jacob Friedman, in #2 above.  This way, I can use the same locator across many orgs and get consistent results.  If I use the li locator, the location of value that I am looking for could vary in every single org, thus making my test less versatile.

xpath="//div[@title='Jacob Friedman']"

User-added image
Syed ThoufeeqSyed Thoufeeq
Hi Jacob - I am having a similar issue with the drop down element, which I am not able to select the drop down. And I am not able to find anything unique with this element. Do you remember what worked for you?

Please find my element below,

<a aria-required="false" class="select" aria-disabled="false" aria-describedby="1838:2908;a-label" aria-haspopup="true" tabindex="0" role="button" title="" href="javascript:void(0);" data-aura-rendered-by="1848:2908;a" data-interactive-lib-uid="75">--None--</a>
Jacob Friedman 11Jacob Friedman 11
Hi. Here’s an example of what I did: This is the element that I want to click on. @FindBy(xpath=".//*[@title='Pre-Contract']") WebElement selectStageLEX; This is the value I’d like to click on in the picklist @FindBy(xpath=".//*[@class='scrollable']//*[@title='Authoring']") WebElement selectStageAuthLEX; I often had to try and find a unique class in the xpath and then traverse up to parent and then down to siblings. Like this: @FindBy(xpath=".//*[@class='test-id__field-label-container']/*[.='Stage']/parent::*/following-sibling::div/span/span") WebElement contractStageRdLEX;
sumit dsumit d
Hi Jacob,
i am testing a lightning component with selenium below is the given imageUser-added image
its a tab on Account which is showing its related child records of custom object. the css is given below:-
<span class="title" data-aura-rendered-by="1284:0">Family Records</span>
i tried
 script with xpath and css for it as below:-// WebElement Family = driver.findElement(By.xpath("(// *[@class=\"title\"])[3]"));
        WebElement Family = driver.findElement(By.cssSelector(".tablist, .tabs__nav, .tabs__item active, .uiTabItem"));

did not worked for me .can you tell me what i am missing?
Any suggestions?
Jacob Friedman 11Jacob Friedman 11
Hi. I ended up having to use some complicated xpath locations to get this to work. It’s been over a year since I worked in SalesForce, but below are some examples. I think these are finding titles of a button, then going to the parent above it down to another level. xpath=".//*[@title='Edit XYZ Status']/parent::*/span/span" xpath="//button[@title='Edit XYZ Process Start Date']/preceding::span[2]" I think this one goes to the title of the button, goes to the preceding node, then goes to the second span. Give it a shot…