如何使用Selenium和Java将文本发送到Angular页面中的金额字段

huangapple go评论79阅读模式
英文:

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

问题

我想在以下网址的URL中输入金额值为'123450'(例如)。

步骤 -

  1. 转到链接 link
  2. 在顶部菜单栏上点击“存款”
  3. 点击“定期存款 >”
  4. 您将看到定期存款页面,默认情况下金额字段为10,000。

我想更改该字段并输入其他金额。

我识别的XPath -

//当网站第一次加载时,默认值为10,000时,此XPath有效
@FindBy(xpath = "//div[@class='ieco-blue-underline']/span/b")
WebElement amountField;

//当我们输入金额为'500' <Tab out> 时,XPath会更改,变为以下内容 -
@FindBy(xpath = "//div[@class='ieco-blue-underline']/input")
WebElement amountField;

在第一次输入时是否需要使用第一个XPath,然后在输入诸如500、1000之类的值时是否需要使用第二个XPath?

我尝试了3种方法,但都没有成功 -

element.click();
element.clear();
//element.sendKeys(Keys.DELETE);
element.sendKeys(text);
//按Tab键
element.sendKeys(Keys.TAB);*/
Actions actions = new Actions(driver);
actions.moveToElement(element);
actions.click();
actions.sendKeys(text);
actions.build().perform();
//按Tab键
element.sendKeys(Keys.TAB);
element.click();
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].value='2222';", element);

在这些方法中,点击是有效的,但sendkeys不起作用。
我正在使用chromedriver进行执行,Selenium版本为3.141.59。

英文:

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 = &quot;//div[@class=&#39;ieco-blue-underline&#39;]/span/b&quot;)
WebElement amountField;

//The XPath changes when we enter Amount as &#39;500&#39; &lt;Tab out&gt;..the XPath becomes as per below-
@FindBy(xpath = &quot;//div[@class=&#39;ieco-blue-underline&#39;]/input&quot;)
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));
element.click();
element.clear();
//element.sendKeys(Keys.DELETE);
element.sendKeys(text);
//Pressing Tab key 
element.sendKeys(Keys.TAB);*/
Actions actions = new Actions(driver);
actions.moveToElement(element);
actions.click();
actions.sendKeys(text);
actions.build().perform();
//Pressing Tab key 
element.sendKeys(Keys.TAB);
element.click();
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript(&quot;arguments[0].value=&#39;2222&#39;;&quot;, 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

答案1

得分: 0

回答你的第一个问题,你的第一个 xpath 是错误的,因为事件是绑定在那个 div 上的。

你的 xpath 应该是

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

然后尝试使用第一种点击方法。
希望这能起效。

英文:

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

You xpath should be

@FindBy(xpath = &quot;//div[@class=&#39;ieco-blue-underline&#39;]&quot;)
WebElement amountField;

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

答案2

得分: 0

代码部分不要翻译,只返回翻译好的内容:

发送字符序列 123450网页中的 Amount 字段,由于该元素是一个Angular元素,您需要使用WebDriverWait来进行 elementToBeClickable(),您可以使用以下任一定位策略

  • 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");

  • 浏览器快照:

如何使用Selenium和Java将文本发送到Angular页面中的金额字段

英文:

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(&quot;div.ieco-invest-rb20 span.ng-star-inserted&gt;b&quot;))).click();
    WebElement element = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector(&quot;input[name=&#39;investedAmt&#39;]&quot;)));
    element.clear();
    element.sendKeys(&quot;123450&quot;);
    
  • xpath:

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

如何使用Selenium和Java将文本发送到Angular页面中的金额字段

huangapple
  • 本文由 发表于 2020年7月26日 16:26:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/63097827.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定