I am try to create a test case that accesses edits some Equipment for an application of ours. There are many input fields on this Edit Equipment page, but there are some “special” ones as they format the numeric text provided into a currency format (e.g., $1,234,456).
I have used keyword SetText successfully for almost all fields in our application, however when trying to use SetText on these currency input fields, the previous value is not cleared with the new text. Instead, the text I want the field set to is appended to the end of the current input value. So if the current value in the field is “$1,000” and I try to set it as “$999”, the new text will be “$1,000,999”.
The weird thing is this issue is only present in Chrome, while it works as expected in Firefox. SendKeys() will also append the value instead of replacing the value within the input field, while in Firefox it does replace the previous input value. ClearText() won’t even clear these input fields either. I’ve tried to use Focus() on these fields prior to setting/clearing text or sending keys, but I still had no success.
Can anyone explain why this is occurring and what workarounds can be used?
Seems odd that it works in Firefox but not Chrome. And it seems like a hassle having to use a weird JavaScript workaround instead of the keyword designed for inputting text into an input field. Is is this a Katalon, browser, or application (by dev’s) issue?
Removing the call to onchange will set “1000” into the input field for both FF and Chrome. It remains as “1000” until a click is made somewhere on the screen or “Save” is clicked, saving changes and being redirected to the Detail page, which then displays the correctly formatted value of “$1,000”.
No error was thrown. With elem.blur(), it does the same thing as my previous response where I used no function.
Removing the call to onchange will set “1000” into the input field for both FF and Chrome. It remains as “1000” until a click is made somewhere on the screen or “Save” is clicked, saving changes and being redirected to the Detail page, which then displays the correctly formatted value of “$1,000”.
What do the functions of elem.change() or blur() accomplish for this issue?
And if this is the way it has to be done, is there a way of simplifying the JavaScript argument or turning it into a keyword that can be used consistently across different, but similar, test objects (i.e., these currency input fields)?
My guess: They’re using keypress and keyup/down to effect the behaviors you’re seeing. It’s a shame you couldn’t get sendKeys to work - that might have given you the behavior you’re expecting.
Without seeing the underlying code, I can only guess (based on web coding experience since the www got started). That’s where I guessed they would be doing their “magic” (i.e. the changes you see when you operate the page manually).
It seems like it. But I don’t know another sure-fire way.
My guess: They’re using keypress and keyup/down to effect the behaviors you’re seeing.
Yeah, the behavior is basically the following. As you type into the input field, it will start formatting as you type. So a $ sign appear, and as you add more digits, the necessary commas will appear.
Not sure if it’s been mentioned already (too lazy to read through every post), but Selenium has an element.clear() method. You could try and call this before setting any new values.
Using the Selenium method clear() did not work on either FF or Chrome. No change is made to the value in the input field.
In my initial post, I do mention that the Katalon keyword Clear Text won’t even clear these input fields so I figured the Selenium method won’t work either.
I tried using your JS workaround again, except I changed the value to be nothing (i.e., ‘’ not even a space character).
It does clear the input field, however when I try to use keyword SetText, the new value is appended again to the previous value that was just cleared. So it seems like the input field element is retaining the previous value.
So I found a workaround that uses the Selenium Keys package to send keystrokes to the browser.
WebDriver driver = DriverFactory.getWebDriver()
'Using Selenium, find element to clear its input field'
WebElement costNew = driver.findElement(By.xpath('//input[@id=\'CostNew\']'))
costNew.sendKeys(Keys.CONTROL + "a")
costNew.sendKeys(Keys.DELETE)
This workaround appears to work as expected. The value within the input field is highlighted and deleted. Then I’m able to use keyword Set Text after it and the expected value is set in the input field.
I would like to take the Custom Keyword route to create some method that can clear these currency fields and set some text, however I’m a little lost on how I can convert a Katalon test object into a Selenium web element since I’m using the Selenium sendKeys() method which is able to take in Keys.
Is there a way to extract the selector out of a Test Object? If so, I imagine I can then use that selector as a parameter for Selenium to find the element of type WebElement.
