Playwright Testing get TelerikTextArea Value

1 Answer 32 Views
General Discussions
Hernando
Top achievements
Rank 1
Iron
Iron
Hernando asked on 21 Mar 2025, 08:59 AM

Hi,  I am creating E2E testing using Playwright , but I am having issues getting the value of the textearea.

As you can see on the screenshot below when using the playwright code generator it picks the label  "This project is unique because…" but I want the Value "test user 5.1"  , looking at he HTML generated the value "test user 5.1" is not there , how do I get the value ? 

I also tried using the data-testid tag on the components  but it wont work .

 <TelerikTextArea data-testid="test1" @bind-Value="@extendedData.UniqueBecause"
 MaxLength="1000"
 Rows="3">
 </TelerikTextArea>

What's the best recommendation to test using Playwright ? 


 

Thanks .

1 Answer, 1 is accepted

Sort by
1
Accepted
Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
answered on 21 Mar 2025, 10:49 AM | edited on 21 Mar 2025, 10:50 AM
I think that the root cause of the issue is that you cannot select a <textarea> by its value (text) using something like a CSS selector. This is not a limitation of Telerik components but rather how HTML and selectors work.

Since Telerik components do not support the data-testid attribute directly, you won't be able to use it on the <textarea> itself. However, you can wrap the TelerikTextArea inside an HTML element like a <span> or <div> with a data-testid attribute and then target that wrapper element in Playwright.

Additionally, TelerikTextArea component supports Id and Class attributes. You can assign values to these attributes and use them to locate the element in your Playwright E2E tests.


Regards,
Anislav Atanasov

Hernando
Top achievements
Rank 1
Iron
Iron
commented on 21 Mar 2025, 07:18 PM

Hi ,

Thanks for your answer , yes I can use the Id to tag components , is Id supported by all components ? 

Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
commented on 21 Mar 2025, 08:08 PM

I believe that Telerik's BaseComponent is at the root of the inheritance hierarchy and defines the Class property. Then most components inherit from a more specialized base component (e.g., https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.common.telerikinputbase-1), which adds an Id parameter.

Therefore, all components should have the Class parameter, and most should also have an Id. At the moment, I can't think of any component that lacks an Id parameter, but there may be some exceptions.

Regards,
Anislav Atanasov
Tags
General Discussions
Asked by
Hernando
Top achievements
Rank 1
Iron
Iron
Answers by
Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
Share this question
or