So I have a form with input elements that have a type of 'text' that prevent any characters aside from numbers being entered. I have found that the only thing I can get to actually enter in the numbers into these input fields is by using the JSExectutor function, but this does not trigger a change in state of the 'Save' button, and the data will not persist after using additional input methods into the form that follow the number inputs. When I run the two methods alone, the data is entered in successfully, but with others the data seems to revert back to its previous state. I am not sure how to get the data to stay correctly in the input field and allow it to be submitted.
The input elements are as follows:
Zipcode -
<input aria-invalid="false" id="company-profile-zip-code-txt-field-txt-field" name="zipcode" type="text" maxlength="5" class="MuiInputBase-input MuiOutlinedInput-input css-xdyop8" value="12345">
Phone Number -
<input aria-invalid="false" id="company-profile-phn-numbr-txt-field-txt-field" name="phoneNumber" type="text" maxlength="12" minlength="12" class="MuiInputBase-input MuiOutlinedInput-input css-xdyop8" value="111-111-1111">
I have tried using sendKeys and also the JSExecutor, and it seems the only way that works is using the JSExectutor. When using the JSExecutor script, the numbers are entered in successfully, but the data does not persist within the form likely due to the JS validations not being triggered. I have tried to force a 'Change' event using JS, but this seems to not change anything either.
Methods are as follows:
(for reference, I am using the POM, 'Splash' is the name of the class I have called for the page objects.)
Zipcode -
public void editZipcode() {
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
Splash.clickZipCode().click();
boolean result6 = action.isDisplayed(driver, Splash.clickZipCode());
if (result6) {
JavascriptExecutor jse = (JavascriptExecutor)driver;
action.JSClick(driver, Splash.clickZipCode());
Splash.clickZipCode().clear();
jse.executeScript("arguments[0].value = '90210'; arguments[0].dispatchEvent(new Event('change'));", Splash.clickZipCode());
ExtentTestManager.getTest().log(Status.PASS, "Zipcode has been clicked and edited");
}
}
Phone -
public void editPhoneNumber() {
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
Splash.clickPhoneNumber().click();
boolean result7 = action.isDisplayed(driver, Splash.clickPhoneNumber());
if (result7) {
JavascriptExecutor jse = (JavascriptExecutor)driver;
action.JSClick(driver, Splash.clickPhoneNumber());
jse.executeScript("arguments[0].value='999-999-9999';", Splash.clickPhoneNumber());
ExtentTestManager.getTest().log(Status.PASS, "Phone Number has been clicked and edited.");
}
}