Selenium with Power Apps - selenium

Question

We have a client requirement to implement a test automation in Power apps.
Power apps has its own Testing framework but that is still in Experimental mode and not recommended to use for production environment.
I've experience around Selenium but I'm facing issues while locating web elements for Power Apps.
I'm trying to locate a Text box and enter any value, even though the web elements are unique the selenium is not able to find those.
HTML
<div class="canvasContentDiv appmagic-control-view appmagic-content-
control-name _vst_" data-control-id="17" data-control-name="TextInput1"
style="width: 419px; height: 60px; z-index: 17; position: absolute; top:
517px; left: 105px;"><div class="appmagic-borderfill-container"
style="background-color: rgb(186, 202, 226); border-style: solid; border-
width: 2px; border-color: rgb(0, 18, 107); border-radius: 5px; margin:
-1px;"><div class="appmagic-border-inner" style="margin: -1px;"><div
class="react-knockout-control" spellcheck="false" style="position:
absolute; inset: 0px;">
<div class="appmagic-textbox" touch-action="pan-x pan-y" appmagic-
control="TextInput1">
<!-- ko if: (mode() === "multiline") --><!-- /ko -->
<!-- ko if: (mode() !== "multiline") -->
<input appmagic-control="TextInput1textbox" class="appmagic-text mousetrap
block-undo-redo" maxlength="10000" data-bind="
attr: {
type: mode() === 'password' ? 'password' : 'text',
title: properties.Tooltip() || null,
'aria-label': properties.AccessibleLabel() || null,
placeholder: properties.HintText,
readonly: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.View,
contenteditable: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.Edit,
'data-control-part': properties.Clear() ? 'text clearable' : 'text',
inputmode: keyboardMode
},
css: {
underline: properties.Underline,
strikethrough: properties.Strikethrough,
readonly: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.View
},
value: text,
event: {
click: handleClick,
change: handleOnChange
},
style: {
fontFamily: properties.Font,
fontSize: properties.Size,
color: autoProperties.Color,
fontWeight: properties.FontWeight,
fontStyle: properties.Italic,
textAlign: properties.Align,
lineHeight: properties.LineHeight,
paddingTop: properties.PaddingTop,
paddingRight: properties.PaddingRight,
paddingBottom: properties.PaddingBottom,
paddingLeft: properties.PaddingLeft
},
disable: viewState.displayMode() ===
AppMagic.Constants.DisplayMode.Disabled" type="text" placeholder="Team
name..." contenteditable="true" data-control-part="text" inputmode="text"
tabindex="15" style="font-family: "Open Sans", sans-serif; font-
size: 21pt; color: rgb(0, 0, 0); font-weight: normal; font-style: normal;
text-align: left; line-height: 1.2; padding: 5px 5px 5px 12px;">
<div class="appmagic-text-clear-container">
<button class="appmagic-text-clear-button" data-control-part="clear" data-
bind="
visible: isFocused() && properties.Clear() &&
properties.Text() && mode() !== 'password' &&
viewState.displayMode() === AppMagic.Constants.DisplayMode.Edit,
event: {click: handleClearClick},
attr: {'aria-label': AppMagic.Strings.TextInputClearButtonLabel}" aria-
label="Clear value" tabindex="16" style="display: none;">
<svg class="appmagic-text-clear-svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12" aria-hidden="true" focusable="false">
<polygon points="12,1.1 10.9,0 6,4.9 1.1,0 0,1.1 4.9,6 0,10.9 1.1,12
6,7.1 10.9,12 12,10.9 7.1,6" data-bind="style: {fill:
autoProperties.Color}" style="fill: rgb(0, 0, 0);"></polygon>
</svg>
</button>
</div>
<!-- /ko -->
</div>
</div></div></div></div>
Tried below to find the web element-
driver.findElement(By.xpath("//div[#class='appmagic-textbox']")).sendKeys("test");
driver.findElement(By.xpath("//input[#class='appmagic-text mousetrap block-undo-redo']")).sendKeys("Test");
Following is the error returned by Selenium-
Any help or suggestions around this would be very helpful.
Thanks In Advance.