title: Selenium with Power Apps
body: <p>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 <strong>Experimental</strong> mode and not recommended to use for production environment.</p>
  <p>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.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;canvasContentDiv appmagic-control-view appmagic-content- 
  control-name _vst_&quot; data-control-id=&quot;17&quot; data-control-name=&quot;TextInput1&quot; 
  style=&quot;width: 419px; height: 60px; z-index: 17; position: absolute; top: 
  517px; left: 105px;&quot;&gt;&lt;div class=&quot;appmagic-borderfill-container&quot; 
  style=&quot;background-color: rgb(186, 202, 226); border-style: solid; border- 
  width: 2px; border-color: rgb(0, 18, 107); border-radius: 5px; margin: 
  -1px;&quot;&gt;&lt;div class=&quot;appmagic-border-inner&quot; style=&quot;margin: -1px;&quot;&gt;&lt;div 
  class=&quot;react-knockout-control&quot; spellcheck=&quot;false&quot; style=&quot;position: 
  absolute; inset: 0px;&quot;&gt; 
   &lt;div class=&quot;appmagic-textbox&quot; touch-action=&quot;pan-x pan-y&quot; appmagic- 
  control=&quot;TextInput1&quot;&gt;
  &lt;!-- ko if: (mode() === &quot;multiline&quot;) --&gt;&lt;!-- /ko --&gt;
  &lt;!-- ko if: (mode() !== &quot;multiline&quot;) --&gt;
  &lt;input appmagic-control=&quot;TextInput1textbox&quot; class=&quot;appmagic-text mousetrap 
  block-undo-redo&quot; maxlength=&quot;10000&quot; data-bind=&quot;
    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&quot; type=&quot;text&quot; placeholder=&quot;Team 
   name...&quot; contenteditable=&quot;true&quot; data-control-part=&quot;text&quot; inputmode=&quot;text&quot; 
   tabindex=&quot;15&quot; style=&quot;font-family: &amp;quot;Open Sans&amp;quot;, 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;&quot;&gt; 
  
   &lt;div class=&quot;appmagic-text-clear-container&quot;&gt;
   &lt;button class=&quot;appmagic-text-clear-button&quot; data-control-part=&quot;clear&quot; data- 
    bind=&quot;
      visible: isFocused() &amp;amp;&amp;amp; properties.Clear() &amp;amp;&amp;amp; 
   properties.Text() &amp;amp;&amp;amp; mode() !== 'password' &amp;amp;&amp;amp; 
   viewState.displayMode() === AppMagic.Constants.DisplayMode.Edit,
      event: {click: handleClearClick},
      attr: {'aria-label': AppMagic.Strings.TextInputClearButtonLabel}&quot; aria- 
   label=&quot;Clear value&quot; tabindex=&quot;16&quot; style=&quot;display: none;&quot;&gt;
      &lt;svg class=&quot;appmagic-text-clear-svg&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; 
  viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
        &lt;polygon points=&quot;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&quot; data-bind=&quot;style: {fill: 
  autoProperties.Color}&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
      &lt;/svg&gt;
  &lt;/button&gt;
   &lt;/div&gt;
  &lt;!-- /ko --&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
  </code></pre>
  <p><strong>Tried below to find the web element-</strong></p>
  <p>driver.findElement(By.xpath(&quot;//div[@class='appmagic-textbox']&quot;)).sendKeys(&quot;test&quot;);</p>
  <p>driver.findElement(By.xpath(&quot;//input[@class='appmagic-text mousetrap block-undo-redo']&quot;)).sendKeys(&quot;Test&quot;);</p>
  <p>Following is the error returned by Selenium-</p>
  <p><a href="https://i.stack.imgur.com/8oCkt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8oCkt.jpg" alt="enter image description here" /></a>
  Any help or suggestions around this would be very helpful.</p>
  <p>Thanks In Advance.</p>