<div class="post-toc-block float-default with-border"> 
						<div class="post-toc-header">Table of Contents</div>
						<nav id="md-post-toc" class="md-post-toc"></nav>
						</div><p>When I was learning selenium testing, I encountered an issue. Let me explain the issue in detail</p>
<p>Search results for the 1st time</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663165932474/H23s0cGAM.png" alt="1.png" /></p>
<p>Search results for the 2nd time</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663165973024/tBDDqTDKV.png" alt="2.png" /></p>
<p>I searched for ankit on google.com and I got the following result, then after some time I searched the same keyword on google.com, and this time I was getting different suggestions which were leading to the failure of selenium test cases because selenium compares past versus present responses of that particular position</p>
<p><a href="https://hashnode.com/preview/632185485483096daa0aa670">If you want to learn about selenium testing then you can refer to my blog on How to do selenium testing.</a></p>
<p>This issue was making me feel embarrassed to test the front end of many websites, because this phenomenon was common with many dynamic websites, specially e-com websites.</p>
<p>Finally, I came to know about a tool called Keploy. It mocks all the data coming from API calls in its database during seleniums recording, now because of keploy during the selenium replay, data comes from the moc database instead of live database. Now because of a static data source (moc database made by keploy) deflection on responses present over UI decreases.</p>
<p>Now let me show you a tutorial</p>
<p>Prerequisites</p>
<ol>
<li>
<p><a href="https://go.dev/dl/">golang</a></p>
</li>
<li>
<p><a href="https://docs.docker.com/get-docker/">Docker</a></p>
</li>
<li>
<p><a href="https://sourceforge.net/projects/tdm-gcc/">GCC compiler</a></p>
</li>
<li>
<p><a href="https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd?hl=en">selenium IDE extension</a></p>
</li>
<li>
<p><a href="https://github.com/keploy/keploy">keploy</a></p>
</li>
</ol>
<p>Firstly we need to install keploy in our PC</p>
<pre><code>git clone https://github.com/keploy/keploy.git</code></pre>
<p>Start your docker</p>
<p>Now come inside this directory and run this project in docker by putting the command mentioned below</p>
<pre><code>docker-compose -f docker-compose-dev.yaml up</code></pre>
<p>Now we will install Keploy browser extension from the link present below</p>
<pre><code>https://github.com/keploy/browser-extension/releases</code></pre>
<p>after installing the browser extension go inside your extension manager and switch on the developer mode, after that go on the load unpacked button, which appears just after switching to developer mode, and import your extension file from the expected location.</p>
<p>Now your extension is ready to use along with that your keploy server is also running in docker</p>
<p>Now we will test google.com where selenium will record all the test cases but while replaying data will come from keploy moc database.</p>
<p>Now start testing google.com on your selenium extension.</p>
<p>step-1 Create a new project</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166457115/3W_FmMd7K.png" alt="a.png" /></p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166471249/v_f-KNukE.png" alt="b.png" /></p>
<p>step-2 Give a title to your 1st test case</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166568666/SpHaKFrk_.png" alt="c.png" /></p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166586215/gE8oBe2J-.png" alt="d.png" /></p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166599945/BlKdlHEP7.png" alt="e.png" /></p>
<p>step-3 Put the URL of the desired website, In our case, its google.com</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166675667/nw25Ui5Fd.png" alt="f.png" /></p>
<p>step-4 Press on the record button present in the top right corner</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166733802/2ya9ogCd_.png" alt="g.png" /></p>
<p>step-5 Now default browser will open, In our case, it&#8217;s the chrome browser.</p>
<p>step-6 Perform your desired actions and selenium will start recording the positions and actions along with the data present at that place.</p>
<p>step-7 In our case we are doing a google search with the keyword oss. We can see many search results present in the suggestion but we will go with the 1 st option</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166806663/0j-5wtuJW.jpeg" alt="h.jpeg" /></p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166821353/JxYcqjiKO.jpeg" alt="i.jpeg" /></p>
<p>step-8 We know that our keploy server is already running in the background and keploy extension is present in the chrome browser. In the background, our keploy server is recording all the data coming from APIs on the front end in mongo DB. Let&#8217;s see inside mongo DB using mongo compass.</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663166899039/0mVgT_xmA.jpeg" alt="j.jpeg" /></p>
<p>step-9 Now we will replay the recorded data in selenium, but this time data will not come from live servers of google, instead of that data will come from the moc database made by keploy</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663167154789/yJEE-t_PV.jpeg" alt="k.jpeg" /></p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663167167209/yQcMpBeDJ.jpeg" alt="l.jpeg" /></p>
<p>step 10 Now because of static database all the selenium test cases will pass.</p>
<p><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1663167227027/SnAHrzaC-.png" alt="m.png" /></p>
<p>In this way, keploy solves the drawbacks of selenium and makes frontend testing easier.</p>

         
        
                    

                    
                    <div class="pp-multiple-authors-boxes-wrapper pp-multiple-authors-wrapper pp-multiple-authors-layout-boxed multiple-authors-target-the-content box-post-id-16 box-instance-id-1 ppma_boxes_16"
                    data-post_id="16"
                    data-instance_id="1"
                    data-additional_class="pp-multiple-authors-layout-boxed.multiple-authors-target-the-content"
                    data-original_class="pp-multiple-authors-boxes-wrapper pp-multiple-authors-wrapper box-post-id-16 box-instance-id-1">
                                                                                    <h2 class="widget-title box-header-title">Authors</h2>
                                                                            <span class="ppma-layout-prefix"></span>
                        <div class="ppma-author-category-wrap">
                                                                                                <span class="ppma-category-group ppma-category-group-">
                                                                                                                        <ul class="pp-multiple-authors-boxes-ul">
                                                                                                                                                                                                                                                                                                                                                                                                                    <li class="pp-multiple-authors-boxes-li author_index_0 author_ankit-kumar has-avatar">
                                                                                                                                                                                                                                            <div class="pp-author-boxes-avatar">
                                                                                                                                            <img alt='Ankit Kumar' src='https://wp.keploy.io/wp-content/uploads/2024/10/ankit-kumar.jpg' srcset='https://wp.keploy.io/wp-content/uploads/2024/10/ankit-kumar.jpg' class='multiple_authors_guest_author_avatar avatar' height='80' width='80'/>                                                                                                                                    </div>
                                                            
                                                            <div class="pp-author-boxes-avatar-details">
                                                                                                                                                                                                <div class="pp-author-boxes-name multiple-authors-name">
                                                                        <a href="https://wp.keploy.io/author/ankit-kumar/" rel="author" title="Ankit Kumar" class="author url fn">Ankit Kumar</a> 
                                                                    </div>
                                                                                                                                                                                                                                                                    <p class="pp-author-boxes-description multiple-authors-description">
                                                                        Ankit is a creative individual with a knack for enhancing efficiency through organization. He thrives in navigating unique challenges, both in his professional and personal spheres.                                                                    </p>
                                                                                                                                
                                                                                                                                
                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                             </li>
                                                                                                                                                                                                                                                                                                                                    <li class="pp-multiple-authors-boxes-li author_index_1 author_animesh has-avatar">
                                                                                                                                                                                                                                            <div class="pp-author-boxes-avatar">
                                                                                                                                            <img alt='Animesh Pathak' src='https://wp.keploy.io/wp-content/uploads/2024/09/WhatsApp-Image-2024-08-06-at-3.17.14-PM.jpeg' srcset='https://wp.keploy.io/wp-content/uploads/2024/09/WhatsApp-Image-2024-08-06-at-3.17.14-PM.jpeg' class='multiple_authors_guest_author_avatar avatar' height='80' width='80'/>                                                                                                                                    </div>
                                                            
                                                            <div class="pp-author-boxes-avatar-details">
                                                                                                                                                                                                <div class="pp-author-boxes-name multiple-authors-name">
                                                                        <a href="https://wp.keploy.io/author/animesh/" rel="author" title="Animesh Pathak" class="author url fn">Animesh Pathak</a> 
                                                                    </div>
                                                                                                                                                                                                                                                                    <p class="pp-author-boxes-description multiple-authors-description">
                                                                        I'm a DevRel engineer who have 3+ year of working experience with AI and API. I am an active OSS Contributor and Tinker, who likes to try out emerging tech and build content around the same.                                                                    </p>
                                                                                                                                
                                                                                                                                
                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                             </li>
                                                                                                                                                                                                                                    </ul>
                                                                            </span>
                                                                                    </div>
                    <span class="ppma-layout-suffix"></span>
                    </div>
                    
                    
                
                                <style>
                .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-avatar img { width: 80px !important; height: 80px !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-avatar img { border-radius: 50% !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-meta a { background-color: #655997 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-meta a { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-meta a:hover { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_email-profile-data { background-color: #655997 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_email-profile-data { border-radius: 100% !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_email-profile-data { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_url-profile-data { background-color: #655997 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_url-profile-data { border-radius: 100% !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_url-profile-data { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-recent-posts-title { border-bottom-style: dotted !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { border-style: solid !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { border-width: 1px !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { border-color: #999 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { color: #3c434a !important; }             </style>

Author Details

Posts by Ankit Kumar, Animesh Pathak

How to mock backend of selenium tests using Keploy

How to do Frontend Test Automation Using Selenium.