excel - Need help to fill number into Chrome input box with Selenium

Question

Hi I've been trying to fill a number in an input box in Chrome (v 75.0.3770.142) using Selenium Basic ChromeDriver (v 75.0.3770.140) in Excel (2013) VBE I've tried the below but get error message:

obj.FindElementById("cartPrdQtyBtn0").Value = ("100000")
obj.FindElementByCss("input.form-control.ng-pristine.ng-untouched.ng- 
invalid.ng-invalid-required#cartPrdQtyBtn0").SendKeys ("10000")
obj.FindElementByXPath("//input[@class='form-control ng-pristine ng- 
untouched ng-invalid ng-invalid-required' and 
@id='cartPrdQtyBtn0']").SendKeys ("100000") 

(1) HTML before clicking within the input element:

<div class="form-group" ng-class="{'has-error': 
(entryItem.invalidProductQuantity || entryItem.invalidPallet || 
entryItem.pumpingQtyError || entryItem.lineItemQtyError)}" ng- 
hide="entryItem.isPalletEnabled || entryItem.isCancelled"><!-- ngIf: !entryItem.isDecimal --><input id="cartPrdQtyBtn0" type="text"class="form-control ng-pristine ng-untouched ng-invalid ng-invalid- 
required" 
  restrict="number" restrict-max="100000" required="" ng- 
  model="entryItem.productDisplayQuantity" ng- 
  readonly="entryItem.isReadOnly" 
  ng-blur="updateCartProduct(entryItem, $index)" ng- 
  if="!entryItem.isDecimal"> 
  <!-- end ngIf: !entryItem.isDecimal -->
  <!-- ngIf: entryItem.isDecimal -->
  </div>
  <p ng-bind="entryItem.productDisplayQuantity" ng-show="entryItem.isCancelled" class="ng-hide"></p>

(2) HTML after clicking within the input element:

  <div class="form-group has-error" ng-class="{'has-error': 
  (entryItem.invalidProductQuantity || entryItem.invalidPallet || 
  entryItem.pumpingQtyError || entryItem.lineItemQtyError)}" ng- 
  hide="entryItem.isPalletEnabled || entryItem.isCancelled">
  <!-- ngIf: !entryItem.isDecimal -->
  <input id="cartPrdQtyBtn0" type="text"
  class="form-control ng-pristine ng- 
  invalid ng-invalid-required ng-touched" restrict="number" restrict- 
  max="100000" required="" ng-model="entryItem.productDisplayQuantity" ng- 
  readonly="entryItem.isReadOnly" ng-blur="updateCartProduct(entryItem, 
  $index)" ng-if="!entryItem.isDecimal">
  <!-- end ngIf: !entryItem.isDecimal -->
  <!-- ngIf: entryItem.isDecimal -->
  </div>
  <p ng-bind="entryItem.productDisplayQuantity" ng-show="entryItem.isCancelled" class="ng-hide"></p>

(3) HTML after sending some text manually (100000):

  <div class="form-group" ng-class="{'has-error': 
  (entryItem.invalidProductQuantity || entryItem.invalidPallet || 
  entryItem.pumpingQtyError || entryItem.lineItemQtyError)}" ng- 
  hide="entryItem.isPalletEnabled || entryItem.isCancelled">
  <input id="cartPrdQtyBtn0" type="text" class="form-control ng-pristine
  ng-untouched ng-valid ng-valid-required" restrict="number" restrict- 
  max="100000" required="" ng-model="entryItem.productDisplayQuantity" ng- 
  readonly="entryItem.isReadOnly" ng-blur="updateCartProduct(entryItem, 
  $index)" ng-if="!entryItem.isDecimal">
 <p ng-bind="entryItem.productDisplayQuantity" ng-show="entryItem.isCancelled" class="ng-hide">100000</p>

Answer 1

To send a character sequence within the input field you can use either of the following Locator Strategies:

• cssSelector:

  obj.FindElementByCss("input.form-control.ng-pristine.ng-untouched.ng-invalid.ng-invalid-required[id^='cartPrdQtyBtn']").Click
  obj.FindElementByCss("input.form-control.ng-pristine.ng-invalid.ng-invalid-required.ng-touched[id^='cartPrdQtyBtn']").SendKeys("10000")
  

• xpath:

  obj.FindElementByXPath("//input[@class='form-control ng-pristine ng-untouched ng-invalid ng-invalid-required' and starts-with(@id, 'cartPrdQtyBtn')]").Click
  obj.FindElementByXPath("//input[@class='form-control ng-pristine ng-invalid ng-invalid-required ng-touched' and starts-with(@id, 'cartPrdQtyBtn')]").SendKeys("10000")
  

Note: As it is a dynamic element you need to induce a waiter for the element to be clickable

---

Reference

You can find a couple of relevant discussions in:

• How to send text to some HTML elements?
• Trying to fill text in input box with dynamic drop down