Problen in accessing angular application elements into web browser control C# forms

Question

0.00/5 (No votes)

See more:

Hi i am using web browser control into c# windows forms and want to automate some process of an angular website.
First of all i am trying to automate login process but i am not able to get username/password and login button element .
Actually waht is happening is that - when i am seeing html in inspect element then i am getting complete html.
but when i am trying to get elements by id or name or any how in c# code , then login panel controls are missing. i am not sure what's happening. before i have automated c# normal application but it's first time i am automating a angular app.
my code by inspect element is given below-

<div id="browser-warning" class="row alert-error">

<div id="wrapper" class="cover">
  <div class="alert-zone ng-isolate-scope">
  <!-- ngIf: !config.forceRemove --><div ng-if="!config.forceRemove" class="ng-scope">
    <!-- ngIf: alerts.length > 0 -->
  </div><!-- end ngIf: !config.forceRemove -->
</div>
  <!-- Main Content-->
  <!-- uiView: -->
  <div ui-view="" class="ng-scope">
  
  Start--------------------------------------------------------------------------------------------------------------------------------------------------
  <!-- Main Content-->
<div ng-switch="is_mobile_login" class="ng-scope">
  <!-- Mobile App -->
  <!-- ngSwitchWhen: true -->
  <!-- Browser -->
  <!-- ngSwitchDefault: --><div id="canvas" class="container ng-scope" style="overflow:visible;" ng-switch-default="">
    <div class="main-body row">
      <!-- Left Panel-->
      <!-- uiView: left-panel --><div ui-view="left-panel" class="span8 ng-scope">
        <div class="big-logo">
          <a href="" target="_blank">
          
          </a>
        </div>
      </div>
      <!-- uiView: form-panel --><div ui-view="form-panel" class="ng-scope">   
    <div id="login-panel" class="span8 ng-scope">
      <div class="modal-header"><div id="default-title" class="ng-binding">Welcome</div></div>
      <div class="modal-body" style="overflow:visible;max-height:100vh;">
      <div ng-show="dataLogin.instruction" class="branding-controls modal-instruction ng-binding ng-hide"></div>
      <form name="formLogin" autocomplete="off" prevent-auto-complete="true" novalidate="" class="ng-isolate-scope ng-valid-email ng-dirty ng-valid-parse ng-valid ng-valid-required">
        <div class="branding-control-group ng-hide" ng-show="dataLogin.staticUsername">
          <div class="branding-control-label">
            <span class="branding-icon-user"></span>
          </div>
          <div class="branding-controls">
            <div class="text-input text-input-standard ng-binding" style="display: inline-block; line-height: 4;"></div>
          </div>
        </div>
        <div class="branding-control-group" ng-show="!dataLogin.staticUsername">
          <div class="branding-control-label">
            <span class="branding-icon-user" ng-click="focusLoginUser()"></span>
          </div>
          <div class="branding-controls">
            <input type="email" email-validation="" id="sel-input-username" name="username" class="text-input text-input-standard ng-valid-email ng-touched ng-not-empty ng-dirty ng-valid ng-valid-required" ng-model="dataLogin.username" kw-focus="isFocusLoginUser" kw-focus-lost="loseFocusLoginUser()" placeholder="Username" tabindex="101" ng-required="!dataLogin.staticUsername" value=" " required="required">
          </div>
        </div>
        <div class="divider"></div>
        <div class="branding-control-group">
          <div class="branding-control-label">
            <span class="branding-icon-password" ng-click="focusLoginPassword()"></span>
          </div>
          <div class="branding-controls">
            <input type="password" id="sel-input-password" name="password" class="text-input text-input-standard ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" ng-model="dataLogin.password" kw-focus="isFocusLoginPassword" kw-focus-lost="loseFocusLoginPassword()" placeholder="Password" tabindex="102" required="">
          </div>
        </div>
        <div class="modal-footer">
          <div class="pull-left">
            <div ng-show="loginConfig.external_sso_label" class="ng-hide">
              <a id="sel-link-register" href="" class="pull-left ng-binding" tabindex="104"></a><br>
            </div>
            
          </div>
          <span ng-bind-html="hiddenInput | unsafe" class="ng-binding"><input type="hidden" name="AuthState" value=""></span>
          <button id="sel-btn-login" ng-click="doLogin(0)" class="btn btn-primary pull-right ng-binding" tabindex="103" ng-disabled="formLogin.$invalid">Sign in</button>
        </div>
      </form>
      </div>
    </div>
</div>
     
    </div>
  </div><!-- end ngSwitchWhen: -->
</div></div>
</div>

end-----------------------------------------------------------------------------------------------------------------------
<div class="footer">
 
</div>
<input type="hidden" id="username" value="" ng-non-bindable="">
<input type="hidden" id="authstate" value="_fe3d3e83bab2b3813edca356d6d957981cc4828" ng-non-bindable="">
<input type="hidden" id="error" value="" ng-non-bindable="">
<input type="hidden" id="challenge_message" value="" ng-non-bindable="">
<input type="hidden" id="login_type" value="" ng-non-bindable="">
<input type="hidden" id="sender" value="" ng-non-bindable="">
<input type="hidden" id="entity_id" value="" ng-non-bindable="">
<input type="hidden" id="verify_type" value="" ng-non-bindable="">
<input type="hidden" id="username_readonly" value="">
<input type="hidden" id="vc" value="" ng-non-bindable="">
<input type="hidden" id="instruction" value="" ng-non-bindable="">
<!-- preload sprites -->

but i am getting in c# code when debugging is only a small part given below-

<div id="wrapper" class="cover">
  <div class="alert-zone ng-isolate-scope">
  <!-- ngIf: !config.forceRemove --><div ng-if="!config.forceRemove" class="ng-scope">
    <!-- ngIf: alerts.length > 0 -->
  </div><!-- end ngIf: !config.forceRemove -->
</div>
  <!-- Main Content-->
  <!-- uiView: -->
  <div ui-view="" class="ng-scope"></div>
</div>
<div class="footer">
 
</div>
<input type="hidden" id="username" value="" ng-non-bindable="">
<input type="hidden" id="authstate" value="_fe3d3e83bab2b3813edca356d6d957981cc4828" ng-non-bindable="">
<input type="hidden" id="error" value="" ng-non-bindable="">
<input type="hidden" id="challenge_message" value="" ng-non-bindable="">
<input type="hidden" id="login_type" value="" ng-non-bindable="">
<input type="hidden" id="sender" value="" ng-non-bindable="">
<input type="hidden" id="entity_id" value="" ng-non-bindable="">
<input type="hidden" id="verify_type" value="" ng-non-bindable="">
<input type="hidden" id="username_readonly" value="">
<input type="hidden" id="vc" value="" ng-non-bindable="">
<input type="hidden" id="instruction" value="" ng-non-bindable="">
<!-- preload sprites -->

could any help me in this , i am seriously no idea why i am not getting these elements given below-

<input type="email" email-validation="" id="sel-input-username" name="username" class="text-input text-input-standard ng-valid-email ng-touched ng-not-empty ng-dirty ng-valid ng-valid-required" ng-model="dataLogin.username" kw-focus="isFocusLoginUser" kw-focus-lost="loseFocusLoginUser()" placeholder="Username" tabindex="101" ng-required="!dataLogin.staticUsername" value=" " required="required">

<input type="password" id="sel-input-password" name="password" class="text-input text-input-standard ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" ng-model="dataLogin.password" kw-focus="isFocusLoginPassword" kw-focus-lost="loseFocusLoginPassword()" placeholder="Password" tabindex="102" required="">

What I have tried:

webBrowser1.Document.InvokeScript("eval", new[] { "angular.element($('input[name=email]')).val('your@email').triggerHandler('change')" });

//foreach (HtmlElement ele in allInputs)
                //    {
                //        if (ele.Name == "username")
                //            ele.SetAttribute("Value", "");
                //        else if (ele.Name == "password")
                //            ele.SetAttribute("Value", "");
                //        if (ele.Id == "login")
                //            loginBtn = ele;
                //    }
                //    loginBtn.InvokeMember("click");

Posted 20-Apr-18 1:35am

Gaurav Dixit

Add a Solution

Comments

F-ES Sitecore 20-Apr-18 7:39am

Whatever you're doing to access the elements in the webBrowser is probably acting on the source of the original document as downloaded, where the items you want to access have been created dynamically after the document has loaded. That's just a guess though, you haven't shown the relevant code.

Gaurav Dixit 20-Apr-18 12:01pm

Any of condition i. E. code is created dynamicly or not , we can find it in its dom. I am not sure you read my prob, i m using web browser control in c# window form project. Here i m not getting that elements

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)