Angular Textbox get value using querySelector

[Jaime]

Hi,

We are writing some end to end tests for our application and we wanted to use our custom testing library which utilizes basic HTML & Javascript functionality. We use this library for all our web applications, regardless of the framework it was written in.

We are currently having issues on how to get the value of a Angular UI Kendo Textbox. We can get the element by doing document.querySelector('#myField') and returns the element...

<input _ngcontent-ng-c1188706083="" kendotextbox="" formcontrolname="my_field" type="text" id="myField" 
qa-target="user-my-field-input" ng-reflect-name="my_field" 
class="ng-untouched ng-pristine ng-valid k-textbox k-input k-input-md k-rounded-md k-input-solid">

Doing document.querySelector('#myField').innerHTML or document.querySelector('#myField').innerText just gives a value of "".

How do I get the value that was entered in the textbox?

Thanks!

PS. This textbox is part of a form and looks like this in the template

<form [formGroup]="theForm" class="k-form">
        <fieldset class="k-form-fieldset">
            <h4 class="k-pb-4">Some Information</h4>

            <div class="name-wrapper k-pb-3">
                <kendo-formfield>
                    <kendo-label for="myField" text="My Field*"></kendo-label>
                    <input
                        kendoTextBox
                        formControlName="my_field"
                        type="text"
                        id="myField"
                        qa-target="user-my-field-input" />
                    <kendo-formerror>My field is required</kendo-formerror>
                </kendo-formfield>

[Zornitsa]

Hi Jaime,

In general, all components in the Kendo UI for Angular library undergo some extensive testing with both unit and E2E tests as a way to ensure that all of them operate according to the expectations. Testing the components is an essential part of the value that we try to provide to our customers as we try to ensure that all components pass the highest quality standards.

For reference, the developer can obtain our source code to see all the available tests for our components and how they are set up:

• https://www.telerik.com/kendo-angular-ui-develop/components/installation/source-code/

In this line of thought, by conducting internal testing for the Kendo components, we intend to save you time by sparing the need to perform additional testing but we understand that this also depends on the particular project requirements.

Nevertheless, to address your question about obtaining the value of the TextBox using querySelector, the developer can target the input element and use the value property to retrieve its value. For example:

const input: HTMLInputElement = document.querySelector('#myField');
console.log(input.value);

Here is also a StackBlitz example demonstrating the results from the above approach:

• https://stackblitz.com/edit/angular-8x142zje

On a side note, since I can see that the kendoTextBox directive is used on your side instead of the actual <kendo-textbox> component, I want to mention that the kendoTextBox directive is intended to provide styling options for the input elements. The <kendo-textbox> component, on the other hand, should be used for implementing fully functional inputs.

In the scenario when a TextBox component is used, the above-suggested logic for acquiring its value should be adjusted as follows:

<kendo-textbox
   id="myField"
   ...
></kendo-textbox>

const input: HTMLInputElement = document.querySelector('#myField input');
console.log(input.value);

I hope the provided information is helpful. Please let me know if any additional questions on the matter arise.

Regards,
Zornitsa
Progress Telerik

[Jaime]

This is fantastic Zornitsa! This is what our QA team is looking for.

Thank you so much! Really. aprreciate it.

 

Cheers!

Jaime