SendKeys in JavaScript HTML page using selenium VBA-Twitter bootstrap

YasserKhalil
June 22, 2020
260 views
0 votes
2 Answers

I have a page with too much Javascript and there is a search box where I would like to use SendKeys to put some text. The search box id is ctl00_ContentPlaceHolder1_txtSearch but when trying to use it directly, I encountered an error.

.FindElementByXPath("//*[@id='ctl00_ContentPlaceHolder1_txtSearch']").SendKeys "1111"

Here’s the HTML

<html xmlns="http://www.w3.org/1999/xhtml" style="" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> البرامج الرقمية للتمكين المهني</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="الأكاديمية المهنية للمعلمين , مركز تميز محلي وإقليمي ودولي ، يضمن جودة منظومة التنمية المهنية المستدامة لأعضاء هيئة التعليم ، بشراكة فاعلة مع كليات التربية والمدارس والمؤسسات الأخرى ذات الصلة.">
    <meta name="keywords" content="الأكاديمية المهنية للمعلمين, منصة التدريب عن بعد, البرامج الرقمية للتمكين المهني, كادر المعلم, ترقي المعلمين, نظام كادر المعلم, وزارة التربية والتعليم, تدريب اون لاين">
    <meta name="author" content="pat.edu.eg">

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:description" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:url" content="">
    <meta name="twitter:card" content="">

    <!-- <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> -->
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="assets/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
    <!-- Flexslider -->
    <link rel="stylesheet" href="assets/css/flexslider.css">
    <!-- Theme style  -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Modernizr JS -->
    <script src="assets/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <!-- أكواد حماية -->

  
<script type="text/javascript">
function mischandler(){
return false;
}

function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
    document.onkeyup=function(e)
    {
    if(e.which == 17)
    isCtrl=false;
    }

    document.onkeyup=function(e)
    {
    if(e.which == 83)
    isCtrl=false;
    }


    document.onkeydown=function(e)
    {
    if(e.which == 17)
    isCtrl=true;
    if((e.which == 85) || (e.which == 67) && isCtrl == true)
    {

    return false;
    }
    }
</script>


<script>
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
    e.preventDefault();
  }
}, false);
</script>




<script type="text/javascript">

shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},;
</script>




<script language="JavaScript">

       window.onload = function () {
           document.addEventListener("contextmenu", function (e) {
               e.preventDefault();
           }, false);
           document.addEventListener("keydown", function (e) {
               //document.onkeydown = function(e) {
               // "I" key
               if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
                   disabledEvent(e);
               }
               // "J" key
               if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
                   disabledEvent(e);
               }
               // "S" key + macOS
               if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
                   disabledEvent(e);
               }
               // "U" key
               if (e.ctrlKey && e.keyCode == 85) {
                   disabledEvent(e);
               }
               // "F12" key
               if (event.keyCode == 123) {
                   disabledEvent(e);
               }
               // "print" key
               if (event.keyCode == 80) {
                   disabledEvent(e);
               }
               // "back" key
               if (event.keyCode == 16) {
                   disabledEvent(e);
               }
           }, false);
           function disabledEvent(e) {
               if (e.stopPropagation) {
                   e.stopPropagation();
               } else if (window.event) {
                   window.event.cancelBubble = true;
               }
               e.preventDefault();
               return false;
           }
       }
//edit: removed ";" from last "}" because of javascript error
</script>


    <!-- نهاية أكواد الحماية -->



    </head>

<body onbeforeprint="onbeforeprint()" onafterprint="onafterprint()" onselectstart="return false" oncontextmenu="return false" onkeydown="return true;" onmousedown="return true;"><a href="#" class="js-gtco-nav-toggle gtco-nav-toggle"><i></i></a><div id="gtco-offcanvas"><ul>
                            <li><a href="http://pat.edu.eg/platform" class="external">خروج</a></li>
                            
                        </ul></div>

    <!-- أكواد حماية -->
 

    <!-- نهاية أكواد الحماية -->
    


        <!-- jQuery -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- jQuery Easing -->
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Waypoints -->
    <script src="assets/js/jquery.waypoints.min.js"></script>
    <!-- Carousel -->
    <script src="assets/js/owl.carousel.min.js"></script>
    <!-- countTo -->
    <script src="assets/js/jquery.countTo.js"></script>
    <!-- Flexslider -->
    <script src="assets/js/jquery.flexslider-min.js"></script>
    <!-- Magnific Popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/magnific-popup-options.js"></script>
    <!-- Main -->
    <script src="assets/js/main.js"></script>



    <div class="gtco-loader" style="display: none;"></div>
    
    <div id="page">
    


    <!--------------------------------------------------------  Content Here ------------------------------------------->
    <form name="aspnetForm" method="post" action="search.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNDI3MTk4MDRkZMiC3ceJDBMSb/hvOzfoo1Ps81e/">
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=ft_DCi-yGXrSm5-RC0zWVdeA5nhykesM_HFiFg9Bdn9rUthWc0jbZpTp5HdlmUge2tXyj_sn-_9j8ZpflhpUQ40fHBg1&amp;t=636284381597151108" type="text/javascript"></script>


<script src="/WebResource.axd?d=zZ7eInuoGtXVXhG436dX9AySvq4rdhbrhYzcgxr10UDlZ0USkDe6DoY1HPcsXhPUj6kKnwkfxeJDPnwBmBkYnsou7IE1&amp;t=636284381597151108" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div>

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="5D3B39A4">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLlr+XcAwKnpt8nAve684YCAX7xuYxu9gxA+eUqV0T9dl+AfGk=">
</div>
        
     <nav class="gtco-nav" role="navigation">
            <div class="gtco-container">
                <div class="row">
                    <div class="col-sm-2 col-xs-12">
                        <div id="gtco-logo"><img src="assets/images/logo-up.png" alt="منصة البرامج الرقمية للتمكين المهني بالأكاديمية المهنية للمعلمين"></div>
                    </div>
                    
                    <div class="col-xs-10 text-right menu-1 main-nav">
                        <ul>
                            <li><a href="http://pat.edu.eg/platform" class="external">خروج</a></li>
                            
                        </ul>
                    </div>
                
                </div>
            </div>
        </nav>

    
       <!--------------------------------------------------------  نموذج البحث   ------------------------------------------->
     <div id="gtco-subscribe">
                <div class="gtco-container" dir="rtl">
                    <div class="row" align="center">
                    <div>
                    <p></p>
                    <h2 style="color:#990000">.</h2>
                    <h2 style="color:#FFFFFF">يمكنكم البحث بكود المعلم المرشح للترقي 2019-2020</h2>
                    </div>
                    
                    
<table align="center" style="width:300px">
<tbody><tr>                    
<td>
                        <input name="ctl00$ContentPlaceHolder1$txtSearch" type="text" id="ctl00_ContentPlaceHolder1_txtSearch" class="form-control" placeholder="ادخل كود المعلم هنا">
                        <span id="ctl00_ContentPlaceHolder1_RequiredFieldValidator5" style="color:Red;visibility:hidden;">*</span>
</td>
</tr>

<tr>
<td>
    <input type="submit" name="ctl00$ContentPlaceHolder1$btnSearch" value="بحث" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnSearch&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_ContentPlaceHolder1_btnSearch" class="btn btn-danger btn-block" style="background-color:#FF9900;border-color:#FF9900;font-size:20pt;font-weight:bold;height:60px;width:300px;">
    <br>
    <span id="ctl00_ContentPlaceHolder1_RegularExpressionValidator1" style="color:White;font-weight:bold;visibility:hidden;">أدخل الكود بأرقام انجليزية</span>

</td>
</tr>
</tbody></table>


                    </div>
                </div>
              
            </div>

   


    

    
<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("ctl00_ContentPlaceHolder1_RequiredFieldValidator5"), document.getElementById("ctl00_ContentPlaceHolder1_RegularExpressionValidator1"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var ctl00_ContentPlaceHolder1_RequiredFieldValidator5 = document.all ? document.all["ctl00_ContentPlaceHolder1_RequiredFieldValidator5"] : document.getElementById("ctl00_ContentPlaceHolder1_RequiredFieldValidator5");
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.controltovalidate = "ctl00_ContentPlaceHolder1_txtSearch";
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.errormessage = "RequiredFieldValidator";
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.initialvalue = "";
var ctl00_ContentPlaceHolder1_RegularExpressionValidator1 = document.all ? document.all["ctl00_ContentPlaceHolder1_RegularExpressionValidator1"] : document.getElementById("ctl00_ContentPlaceHolder1_RegularExpressionValidator1");
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.controltovalidate = "ctl00_ContentPlaceHolder1_txtSearch";
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.errormessage = "أدخل الكود بأرقام انجليزية";
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.validationexpression = "\d*";
//]]>
</script>


<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>

    <!-------------------------------------------------------- End of Content  ------------------------------------------->


<!--------------------------------------------------------  الفوتر  ------------------------------------------->
    <footer id="gtco-footer" dir="rtl" role="contentinfo">
        <div class="gtco-container">
            
            <div class="row copyright">
                <div class="col-md-12">
                    <p class="pull-left">
                        <small class="block">جميع الحقوق محفوظة للأكاديمية المهنية للمعلمين - الإدارة العامة للمعلومات بالأكاديمية © 2020</small> 
                        <small class="block"><a href="http://www.pat.edu.eg" target="_blank">الموقع الرسمي للأكاديمية المهنية للمعلمين : www.pat.edu.eg</a></small>
                    </p>
                    
                    <p class="pull-right">
                        </p><ul class="gtco-social-icons pull-right">
                            <li><a href="https://drive.google.com/file/d/18izTLWkMkk18a2ytYEihlKiciNpKAAU8/preview" target="_blank"><img src="assets/images/suport.png" width="240" height="40" alt="إضغط هنا للتواصل مع الدعم الفني في حال واجهتك أي مشكلة"></a></li>
                        </ul>
                    <p></p>
                </div>
            </div>

        </div>
    </footer>
    </div>

    <div class="gototop js-top">
        <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
    </div>
    




</body></html>

This is the code till now. I am stuck at entering a ID at the search box

Const sURL As String = "http://pat.edu.eg/platform/"
Dim bot As New WebDriver, sCode As String, r As Long
With bot
    '.AddArgument "--headless"
    For r = 2 To 2 'Cells(Rows.Count, 1).End(xlUp).Row
        sCode = Cells(r, 1).Value
        .Start "Chrome", sURL
        .Get "/"
        .Wait 3000
        .FindElementByXPath("/html/body/div[2]/button").Click
        .SwitchToNextWindow
    Next r
End With

I am sure the pop-up window is the focused window as I used Debug.Print .Title and the window’s title is already the same ..

Answers

- undetectedSelenium
- June 23, 2020 at 12:42 am
- 0 votes
0
Majority of the elements on the webpage are JavaScript enabled element so to interact with the elements you have to induce a waiter for the desired element to be interactable and you can use either of the following Locator Strategies:
- Using FindElementByCss:
```
newHour = Hour(Now()) 
newMinute = Minute(Now()) 
newSecond = Second(Now()) + 10 
waitTime = TimeSerial(newHour, newMinute, newSecond) 
driver.Wait waitTime
driver.FindElementByCss("input.form-control[id$='ContentPlaceHolder1_txtSearch'][name*='ContentPlaceHolder1']").SendKeys "1111"
```
- Using FindElementByXPath:
```
newHour = Hour(Now()) 
newMinute = Minute(Now()) 
newSecond = Second(Now()) + 10 
waitTime = TimeSerial(newHour, newMinute, newSecond) 
driver.Wait waitTime
driver.FindElementByXPath("//input[@class='form-control' and contains(@id, 'ContentPlaceHolder1_txtSearch')][contains(@name, 'ContentPlaceHolder1')]").SendKeys "1111"
```
Reference

You can find a couple of relevant discussions in:
Login or Signup to reply.

- Psychonaut3
- July 9, 2020 at 1:13 am
- 0 votes
0
Instead of using ".FindElementByXPath" you might try using ".FindElementByName".

Also make sure your SeleniumWrapper library is installed in addition to the SeleniumBasic core package. Once installed, it has to be enabled in the VB window by navigating to Tools > References > SeleniumWrapper Type Library and checking that box.

Below is an example of some code that runs correctly for me and inputs text into some text box elements.
```
'Opens a new Chrome window and navigates to login page'
Dim obj As New WebDriver
obj.Start "chrome", ""
obj.Get "https://exampleloginpage.com"

'Pastes credentials into appropriate fields and logs in'
Dim email As String
Dim password As String
Dim keys As New SeleniumWrapper.keys 'MUST have SeleniumWrapper.exe installed locally'
email = "[email protected]" 'login credentials [1/2]'
password = "G3ner!cPas$word" 'login credentials [2/2]'

obj.FindElementByName("email").SendKeys (email)
obj.FindElementByName("password").SendKeys (password)
obj.SendKeys keys.Enter
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

SendKeys in JavaScript HTML page using selenium VBA-Twitter bootstrap

Answers

Reference