After resolving the issue, I discovered that using XPath fixed it. However, figuring out where to make the fix and understanding why it needed to be done was a challenge when inspecting Dev Tools. In the following slides, I documented the data trail I followed and highlighted the gaps in my knowledge that were filled along the way.

I encountered confusion when attempting to modify the text in ng-reflect-model, which is where text entered into the textbox is stored:

https://i.sstatic.net/mP1qt8Ds.png

By closely reading this link about Selenium with Kendo UI, I took a leap of faith to explore the nested input within kendo-textbox below the span element. This led me to figure out the following x-path:

https://i.sstatic.net/2f1c79hM.png

Inspecting the form via Dev Tools and trying to piece everything together can quickly become overwhelming. There seems to be some Angular directive technology at play here, and trusting that 'The Kendo Team has this!' was a realization I had. Although the input element does not display the input, targeting it in the test will work.

================ New Content 21 Nov 13:35 =============

At 5:45 PM, I came across this Stack Overflow post: Selenium with Kendo UI

Is writing xpath the 'hard way' in C# using Se Web Driver the only option for this? The post is six years old - isn't there a better approach available?

I also posted this on the Kendo Textbox forum, hoping for an easier solution than running tests, letting them fail, mapping out x-paths, and repeating the process until success.

==================== Above New info as of 5:45 20 Nov =====================

When the test runs, the first name appears incorrectly due to no entry on the left, causing the error icon to show up. The first name should actually be in the

https://i.sstatic.net/FQZjNIVo.png

After running the test, I manually typed the text in the correct place myself.

https://i.sstatic.net/QX1xMDnZ.png

This is where the test should be placing the text. I'm unsure where the span.k-input-suffix comes from. Searching through the Visual Studio solution doesn't yield any results for such a class. When searching for span.k, many entries are found, none of which match the shown class.

Here is the code for the test:

        public class SeleniumCourseWebDriverTests
{
    [Fact]
    public void SimpleDoITWebDriverTests()
    {
        var driver = new EdgeDriver();
        driver.Manage().Window.Size = new Size(1200, 1087);
        driver.Navigate().GoToUrl("http://localhost:5000/login?returnUrl=%2Fhome");
        driver.FindElement(By.CssSelector(".flexbox-container")).Click();
        driver.FindElement(By.CssSelector(".btn")).Click();
        driver.FindElement(By.Id("WindowsAuthentication")).Click();
        driver.FindElement(By.Name("Recognize a Team Member")).Click();
        driver.FindElement(By.LinkText("Award Submission")).Click();
        driver.FindElement(By.Id("shouterFirstName")).Click();
        driver.FindElement(By.Name("First Name")).SendKeys("Michael");
        driver.FindElement(By.Id("shouterLastName")).Click();
        driver.FindElement(By.Id("shouterLastName")).SendKeys("Durthaler");

Text areas involve complex SCSS but function correctly:

https://i.sstatic.net/6LzqYDBM.png

These are the two lines of code for the text area:

            driver.FindElement(By.Id("awardCommentsText")).Click();
        driver.FindElement(By.Id("awardCommentsText")).SendKeys("Ian was a great help figuring out why my courses in my Edge browser were freezing up.");

It seems that SCSS takes control over text boxes and generates classes mysteriously, making them untraceable for some reason.

Here is the HTML for the First Name text box:

        <div class="col-md">
  <kendo-label text="First Name">
    <kendo-textbox
                   name="First Name"
                   id="shouterFirstName"
                   contenteditable="true"
                   >

    </kendo-textbox>
  </kendo-label>
</div>

This is the HTML for the comments text area, where rendering works:

    <div col-md>
  <kendo-label
               id="awardtext"
               [for]="awardtext"
               text="Comments">
  </kendo-label>
  <textarea kendoTextArea #awardtext id="awardCommentsText" contenteditable="true"> </textarea>
</div>

I'm unsure where the extra

If more information is needed or if further clarification is required, please let me know and I'll do my best to explain.

Additional information that may be helpful: The text appears crammed into the right end of text boxes in mysterious spans, where validation indicators are displayed.

The red outlines indicate that the form was typed correctly, while the checkmark signifies entries of a specific length. If there's no entry, a red exclamation mark appears instead of the checkmark.

During the Se test, even though ids are set for where the text should be displayed, the test locates where the validators reside and places the text inside their spans. The same issue occurs with the date picker, where the date string gets placed next to the calendar icon instead of inside the input field.

SCSS seems to determine that the text belongs in these locations and moves them accordingly. Maybe this insight could provide a new perspective for those observing this situation?

It's a peculiar scenario that requires us to step back and acknowledge that "Computers do what they're instructed to do, and only that." We must gather clues and understand the reasoning behind the behaviors. Thank you once again for any insights provided.

https://i.sstatic.net/kEoEXITb.png