function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
saurabh8singhsaurabh8singh 

Selenium automation on lightning

We are trying to automate regression testing using Selenium web driver. Issue we are facing is that element Ids are getting randomly generated and Selenium is not able to identify elements.
We have tried putting unique Ids using aura:id for such elements but still these Ids are not coming up in console.
Classes are getting generated randomly.
XPATH is also not working.
PaulTPaulT
Can you give an example of the markup/generated html you are trying to test? 
Manish ChoudhariManish Choudhari
Hi Sourabh,

The aura:id and element Id will not help you here. Relative xPath may also not work.
Try to use Absolute Xpath (traversing down from HTML element), which will definetelywork here or any other situation.
Use this plugin to get absolute xPath http://toolsqa.com/selenium-webdriver/xpath-helper/
Let me know if you need more help on this. 

Thanks,
Manish
saurabh8singhsaurabh8singh
Thanks Manish
    We tried using this plugin but in our case, it seems absolute XPATH is not getting generated correctly.
We followed these steps:
1. Downloaded the helper and installed on Chrome.
2. We launched the application and helper.
3. Generarted Absolute XPATH by holiding SHIFT key and pointing to the element.
4. Result window is blank.
I have attahced the screenshot as well.
Absolute XPATH is not coming up
Manish ChoudhariManish Choudhari
Hi Sourabh,

Can you please add the absoulute XPATH here which is being generated by tool? If the tool is not working properly, please try to create the absolute xpath manually for 1 component and try to see if selenium is working properly.

  
<html>
<head>....</head>
<body>
   <div>
       <div>
           <div>
               <span> My component</span>
          </div>
       </div>
     </div>
</body>
</html>

the absolute XPATH for span should look like below:
//HTML/BODY[1]/DIV[3]/SPAN[1]

In similar way try to generate the xpath for your element manually and test with selenium if the element is being handled properly or not.

Let me know for further question on this.

Thanks,
Manish
saurabh8singhsaurabh8singh
Hi Manish
   For us code is not simple. Attached is the code. We are trying to capture element at line 108 (last line: <span id="{!'AddText'+index}">)
  
<aura:component controller="giic_ProductSearchController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <!--Sources--> 
    <ltng:require scripts="/resource/jQuery321, /resource/testtBd, 
                           /resource/ECommDesign/vendor/bootstrap/js/bootstrap.min.js
                           " afterScriptsLoaded="{!c.afterScriptsLoaded}"/> 
    <!--
	/resource/ECommDesign/dist/js/main.js,
	, /resource/ECommDesign/vendor/bootstrap/js/bootstrap-slider.js
	-->
       
   
    <!--Body-->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    
    <style>{!v.cssStyle}</style> 
    <div id="wrapper">  
         <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="arrow-steps clearfix arrowprogress"><!--progress bar arrow start-->
                <div class="step current" style="width:24% !important;"> <span>Products</span> </div>
                <div class="step " style="width:24% !important;"> <span>Payment Options</span> </div>
                <div class="step " style="width:24% !important;"> <span>Shipping Details</span> </div>
                <div class="step" style="width:24% !important;"> <span>Summary</span> </div>			
            </div>            
        </nav>
        <div class="row" style="background: #346b9a;">
            <div class="col-lg-10">  
                <nav class="navbar navbar-default navbar-static-top searchbar" role="navigation" style="margin-bottom: 0;background: #346b9a;">
                    <div class="form-group input-group shifter col-lg-12">
                        <ui:inputText aura:id="searchKey" value="{!v.searchKey}"  class="form-control" placeholder="Search Products"/>
                        <span class="input-group-btn">
                            <button type="button" class="Addbtn btn btn-primary" onclick="{!c.advanceSearch}"><i class="fa fa-search"></i> Search</button>                                            
                            <button type="button" class="btn btn-default cd-btn" onclick="{!c.showSideBar}"><i class="fa fa-search-plus"></i>Advance Search</button>
                        </span> 
                    </div>
                </nav> 
            </div>            
            <div class="col-lg-2" >
                <div style="font-weight: bold; margin-top: 17px; color:#fff">{!v.totalItems} items in your Cart <i class="fa fa-shopping-cart fa-fw"></i></div>
            </div>
        </div>
        
        <div id="page-wrapper">
            
            
        <!--    <div class="row" style="background: #346b9a;">
                <div class="form-group input-group shifter col-lg-11">
                    <input type="text" class="form-control" placeholder="crop seeeds"/>
                        <span class="input-group-btn">
                            <button type="button" class="Addbtn btn btn-primary"><i class="fa fa-search"></i> Search</button>
                            
                            <button type="button" class="btn btn-default cd-btn"><i class="fa fa-search-plus"></i> Advance Search</button>
                        </span>
                        
                        
                    </div>
                </div> -->
            
            
            <div class="row borderbtm">
                <div  class="col-lg-10 margintop">
                    Showing most relevant results
                </div>
                <div  class="col-lg-2 margintop">                    
                    <div class="form-group"> 
                        <ui:inputSelect aura:id="sortByOption" class="form-control"  multiple="false" change="{!c.onSortByChange}">
                            <aura:iteration items="{!v.sortByOptions}" var="opt">
                                <ui:inputSelectOption class="form-control" text="{!opt}" label="{!opt}"/>
                            </aura:iteration>
                        </ui:inputSelect>                      
                    </div>
                </div>
            </div>
                <div class="col-lg-2 list_btn margintop marginbottom">	<div class="btn-group">
                    </div>
                    <button type="button" class="btn btn-primary"><i class="fa fa-th-large"></i></button>&nbsp;                  
                    <button type="button" class="btn btn-default"><i class="fa fa-th-list"></i></button>
                </div></div>                  
            <div class="row">                 
                <aura:iteration items="{!v.ProductWrapper}" var="prod" indexVar="index"> 
                    <!-- c:giic_AlphaTextRow ProductList="{!v.ProductWrapper}" index="{!index}"/ --> 
                    <div class="col-lg-3">
                        
                        <div class="panel panel-default">
                            <div class="panel-body logo_panel ">
                                <h2> <aura:if isTrue="{!and(prod.ProductImageId != null,prod.ProductImageId != '')}">
                                    <img src="{! $Label.c.giic_ImageInstance + prod.ProductImageId + $Label.c.giic_ImageInstance2}" alt="" style="width:300px;height:100px;" />                        	
                                    <aura:set attribute="else">
                                        <img src="{!$Resource.BootStrap3 + '/images/no-photo.jpg'}" alt="" style="width:300px;height:100px;"/>                        	
                                    </aura:set>
                                    </aura:if></h2>
                                <div class="row">
                                    <div class="col-lg-6"><strong>${!prod.UnitPrice} </strong> / Unit</div>
                                    <div class="col-lg-6 star">
                                        <a title="{!prod.isFavProduct == true ? 'Remove From Favorite' : 'Add to Favorite'}" href="javascript:void(0);" class="btn-wishlist" id="{!index}" onclick="{!c.makeProductFavoriteFromList}">
                                            <span style="font-size: 24px;" class="{!prod.isFavProduct == true ? 'fa fa-star' : 'fa fa-star-o'}"></span>                                        
                                        </a>
                                    </div>                                        
                                </div>                                    
                                <div class="detail">                                        
                                    {!prod.Description ==null?'-':prod.Description}                                          
                                </div>
                                <div class="row">
                                    <div class="col-lg-5" id="{!'AddToCart'+index}">
                                 <span id="{!'AddText'+index}"><ui:inputNumber aura:id="{!'AddToCart'+index}" value="{!prod.OrderQuantity}" class="form-control num-right" /> </span>
                                    </div>

 
Tom BarrengerTom Barrenger
Was a good solution ever found for this problem? I am working through a similar issue where Selenium is unable to locate certain elements in my environment. 
Smita LokhandeSmita Lokhande
Hi saurabh,
Did you get soultion for above prblem? I am facing same issue my Objects are not getting recognize by any locators
Awendra Tiwari 4Awendra Tiwari 4
Anyone, please suggest on how to find xpath in lightning pages..we can go ahead with id's but that keep on changing..so not the best one.
I am trying to find x-path for Account Name field when clicked on New button on Account homepage as in below screenshot:

Trying to find xpath for Account Name field when clicked on New button on Account Homepage in lightning

 
Awendra Tiwari 4Awendra Tiwari 4
I did some work on creating custom x-path on my own and i came up with working x-path as follows:
//div/label/span[text()='Account Name']/../following::input[1]

Able to enter text into Account name field now.
shanmukh prasadshanmukh prasad
Hi @Awendra Tiwari, are you able to click the Save button on Account page??? if yes can you please share the code
Christopher Palmer 3Christopher Palmer 3
@shanmukh - with the new account modal open you will likely find more than one Save button in the DOM.  You'll have to find something unique to the save button in the modal.  Your DOM may be different than mine, but this xpath works for me to find the button //div[contains(@class, 'isModal')]//button[span[text() = 'Save']].  With it being lightning once you find the button, you will probably have to use a javascript click instead of selenium. hope this helps.