How to send text to the amount field within the Angular Page using Selenium and Java

Question

I want to enter Amount value as '123450'(For ex.) in the below url.

Steps -

1. Go to URL link
2. Click on 'Deposits' on the top menu bar
3. Click 'Fixed Deposit >'
4. You'll see the Fixed Deposit page with Amount field as 10,000 by default.

I want to change that field and enter any other amount.

Xpath I identified -

//This works when the site loaded for the first time with 10,000 as the default value
@FindBy(xpath = "//div[@class='ieco-blue-underline']/span/b")
WebElement amountField;

//The XPath changes when we enter Amount as '500' <Tab out>..the XPath becomes as per below-
@FindBy(xpath = "//div[@class='ieco-blue-underline']/input")
WebElement amountField;

Do I need to use 1st xpath when entering for the first time..and then use 2nd xpath when I enter values like 500,1000 ?

I have tried 3 ways but none of them worked so far -

public static void sendKeysWithWait(WebElement element, String text){
new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOf(element));

1. element.click(); element.clear(); //element.sendKeys(Keys.DELETE); element.sendKeys(text); //Pressing Tab key element.sendKeys(Keys.TAB);*/

2. Actions actions = new Actions(driver); actions.moveToElement(element); actions.click(); actions.sendKeys(text); actions.build().perform(); //Pressing Tab key element.sendKeys(Keys.TAB);

3. element.click(); JavascriptExecutor jse = (JavascriptExecutor)driver; jse.executeScript("arguments[0].value='2222';", element);

In each of these ways, Click is working..but sendkeys not working. I'm using chromedriver for execution, and Selenium version 3.141.59

Answer 1

To answer your first question, your first xpath is wrong as the event is bound to that div.

You xpath should be

@FindBy(xpath = "//div[@class='ieco-blue-underline']")
WebElement amountField;

Then try to use the first method of using click. Hope this works

Answer 2

To send the character sequence 123450 to the Amount field within the webpage, as the element is an Angular element you need to use WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

• cssSelector:

  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div.ieco-invest-rb20 span.ng-star-inserted>b"))).click();
  WebElement element = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input[name='investedAmt']")));
  element.clear();
  element.sendKeys("123450");
  

• xpath:

  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[contains(@class, 'ieco-invest-rb20')]//span[@class='ng-star-inserted']/b"))).click();
  WebElement element = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@name='investedAmt']")));
  element.clear();
  element.sendKeys("123450");
  

• Browser Snapshot: