We Keep Coding

Selenium Python Shadow DOM input text

The website I am interacting with uses shadow DOMs. I can successfully interact with them for clicking buttons and in some cases can input text but I am currently stumped on this one.
The HTML looks like this
firefox html inspector view of one shadow dom input text box
I can input in the text fields with the following but the continue button doesn't enable for me to go to the next screen and if I manually click and place a space in the first box I get an error saying that to continue to the next page I need to fill in the second and third boxes (which have text but for some reason the webpage doesn't recognize that text is present). table with shadow dom inputs
shadowDOM1 = driver_local.execute_script("return document.querySelector('WN-input').shadowRoot.querySelector('input')")
str_valToSet = "arguments[0].value = '" + partNum + "';"
driver_local.execute_script(str_valToSet, shadowDOM1)
shadowDOM2 = driver_local.execute_script("return document.querySelectorAll('WN-input')[2].shadowRoot.querySelector('input')")
str_valToSet = "arguments[0].value = '" + str(num2buy) + "';"
driver_local.execute_script(str_valToSet, shadowDOM2)
shadowDOM3 = driver_local.execute_script("return document.querySelectorAll('WN-input')[1].shadowRoot.querySelector('input')")
str_valToSet = "arguments[0].value = '" + "CUSTX" + "';"
driver_local.execute_script(str_valToSet, shadowDOM3)
I was also able to click the text box input that is in the shadow root but when i go to send keys i get an error that "element is not reachable by keyboard". There is not a temporary overlay preventing me from typing, as far as i can tell there is not a permanent overlay, and I see no evidence of any attributes that would make it invisible to selenium (org.openqa.selenium.ElementNotInteractableException: Element is not reachable by keyboard: while sending text to FirstName field in Facebook)
fields = driver.find_elements(By.XPATH, '//tbody/tr/td/WN-input')
print("fields", fields)
print("field", fields[0])
shadowEl = expand_shadow_element(driver_local, fields[0])
print("shadowEl", shadowEl)
isVisible = WebDriverWait(shadowEl[1], maxDelay).until(EC.visibility_of_element_located((By.XPATH, "//input")))
print("isVisible", isVisible)
shadowEl[1].click()
time.sleep(2)
shadowEl[1].send_keys("blahblah")
In a different location within my code I successfully interact with a similar object this this (WN-input tag name) and was able to get it to open up the "next" button by typing some garbage text in a different input field that wasn't within a shadow DOM. When I try that technique for this case it blows away my text within my shadow DOM text input fields. I am not sure why this case seems to work and the case in question doesn't.
shadowDOM1 = driver_local.execute_script("return document.querySelector('WN-add-to-cart').shadowRoot.querySelector('WN-input')")
str_valToSet = "arguments[0].value = '" + str(num2buy) + "';"
driver_local.execute_script(str_valToSet, shadowDOM1)
try:
inputBox = WebDriverWait(driver_local, maxDelay).until(EC.element_to_be_clickable((By.XPATH, "//input[#placeholder='Search']")))
#inputBox = local_driver.find_element_by_xpath("//input[#placeholder='Search']")
inputBox.click()
inputBox.send_keys("text")
time.sleep(3)
After days of failed attempts and google search after google search I am finally ready to ask for help. Any thoughts?

Set value of mail address input is not working

I'm trying to fill a text input of email address in signup website
I got the input element (on the second step after selecting the plan) and set its value to whatever I need by:
document.getElementsByTagName("input")[0].value = "somemail1231"
the input was filled but when I press "Next" to continue, it says "Please enter mail address" as the input field was empty.
How can I fix this?
P.S: after some hours of trying I guess its because there is no keyboard button press event, but I'm not sure about that and a simulation of keyboard key press isn't working for me.

You should fire an event for changes
let input = document.getElementsByTagName("input")[0]
input.click() // better than focus for your case
input.value = "sadsad"
var ev = new Event('input')
input.dispatchEvent(ev)

I want to disable the save button if any of the fields have red border

I want to disable the save button until all the fields are valid and not to enable if any one field border turns red. The jsp is included with more jsp's and I am finding it difficult to get the form/div into my java script function
I am triying to get the form/div id dynamically using the jquery but in the JavaScript it fails to the id of the form
onkeyup="checkFieldWithRegExp(jQuery('#SUM-03-inputnumberOfChildren'), jQuery('#teleNumeric'), jQuery('#FO-E012-tableShowMarketingConsent'));
function checkFieldWithRegExp(valueField, regExpField, formIdField) {
var regExp = regExpField.val();
var regNumber = valueField.val();
var formIdValue = $('#formIdField input:not(.hilightBorder)').length();
if (regExp !== null && !new RegExp(regExp).test(regNumber)) {
valueField.addClass('hilightBorder');
valueField.removeClass('hilightGreenBorder')
$('SUM00bSaveButton').disabled=false;
} else if(regExp !== null && new RegExp(regExp).test(regNumber)){
valueField.addClass('hilightGreenBorder');
valueField.removeClass('hilightBorder');
if(formIdValue){
$('SUM00bSaveButton').disabled=false;
}
} else {
valueField.removeClass('hilightBorder');
}
}
I expect to disable the save when page loads and if any of the fields have red border which user input is wrong. Can I please get some help

I believe you are approaching the problem wrong.
From my understanding of what you are trying to do, you are enabling a button once the form input is valid. (correct me if i'm wrong)
You should being writing a function in the background to check and validate the the input data that the user is filling out. If all the data is valid, then enable the button. If not valid, disable it.
You can run this function every time there is an "onKeyUp" event that is attached to each form input element.

CRM 2013 field changes are not recognized in Custom Button JavaScript

I have a text field that should be filled before custom saving through HTML custom button.
When a user fills this field and tries to save through custom button, the text inside this field is null even if the user fills it.
Any suggestions Please?

Many Thanks for replying to my query. Actually, I am calling the below function from custom HTML button and I saw the result from alert message as NULL value until I leave the text box. Once I click some other Field then I am getting right value and saving the record successfully. I have posted my code below please have a look and suggest me how I can achieve it. So how to get the text value if a user doesn't leave the text box and click on the Save button?
function createRecord() {
var oDescription = Xrm.Page.getAttribute("new_description").getValue();
if (oDescription != null) {
var callentity = {};
var activityId;
var currentUserId = Xrm.Page.context.getUserId();
var oLeadId = Xrm.Page.getAttribute("new_lead").getValue()[0].id;
callentity.Subject = "Call Activity";
callentity.Description = oDescription ;
XrmSvcToolkit.createRecord({....Some more functions here...
})
}
HTML Button code for calling above function
<input id="SaveCall" onclick="parent.createRecord()" type="button" value="Save Phonecall"></p>

Xrm.Page.getAttribute(arg).getValue(val) won't return a value until focus is lost from the arg attribute (as you've found out).
Some options you could try:
document.getElementById('new_description_i')[0].value
Removing focus from "new_description" on click of your button.

Pass Selected Radio Value to PHP using onclick, then opening php file to use value in SQL query

I am pretty new to coding php and javascript but have manged to scrape my way through so far. However, I have hit a wall. I'm not 100% sure that what I'm trying to do can be done, or that I'm even attempting it in an effective way.
I have a dynamically filled table, made of rows from a SQL statement using php. On each row is a radio button, each one given a unique value based on the row number (a unique value in one of the database columns). I am attempting to program a button that enables the user to pass a selected radio button value to a separate php enabled page that will allow the user to edit the row information using the unique row value. Also, i used the confirm option, because I would also like to add an if else statement that allows the user to cancel, if the wrong row was selected (I haven't attempted that yet because I haven't been able to get the value to pass).
Page button
<input type="button" id="edit_order_button" value="Edit Order"></input>
JQuery page
$(document).ready(function(){
$("#edit_order_button").click(function(){
var selected = $("input[name ='order_edit_select']:checked").val();
var r = confirm("Confirm Order Number to edit: " + selected);
$.post("php/editOrder.php", {
selected1: selected
}, function(data,status) {
//alert("Data: " + data + "\nStatus: " + status);
window.open("php/editOrder.php","Edit Order","menubar=1,resizable=1,width=750,height=600, left=250, top=50");
});
});
});
PHP end destination
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
require('config.php');
$selected2= isset($_POST['selected1']) ? $_POST['selected1'] : ''; // Fetching Values from URL
echo "Selected Row number is ".$selected2.".";
mysqli_close($connection); // Connection Closed.
?>
I have tried a few things but have so far been unsuccessful in getting the new window to load with the value of the radio button passed. Currently, the window loads, but the new window only displays the echo text, no variable. When I run with the alert popup, the data shows me the value of the selected row but it does not seem to be posting to the new page prior to the window.open command. Any tips would be appreciated, or if i'm approaching the problem from a wrong angle, any insights would also be great. I have also tried debugging, thinking I was missing a parentheses or semicolon but I wasn't able to find anything. Thanks

Looks to me like you can get rid of the post statement altogether and just pass the selection to the newly opened window.
$(document).ready(function(){
$("#edit_order_button").click(function(){
var selected = $("input[name ='order_edit_select']:checked").val();
// only open window if order okayed
if ( confirm("Confirm Order Number to edit: " + selected) ) {
window.open("php/editOrder.php?selected1=" + selected,"Edit Order","menubar=1,resizable=1,width=750,height=600, left=250, top=50");
}
});
});
php/editOrder.php:
$selected2 = $_GET['selected1'];
echo "Selected Row number is $selected2.";