When trying to extract text from a <textarea> in Playwright using methods like innerText or textContent, the result only shows plain text or appears empty in the console. Even when inspecting the element in the browser, no visible inner text is found. The user attempts commands like page.locator("(//div[@class='p-card p-component'])[1]").innerText() but cannot access the actual textarea content. The question seeks clarification on how to correctly retrieve the value of a textarea field in Playwright.
Having worked with Playwright for a good while now, this is something I see folks run into all the time. The main thing to understand is that a <textarea> doesn’t actually store its text inside the DOM the way a div does so when you try using innerText, textContent, or even playwright innerhtml, you’ll just get an empty string.
The browser stores textarea content in its value property. That’s why in Playwright the correct approach is:
const text = await page.locator('textarea#myTextarea').inputValue();
console.log(text);
This will always return whatever the user typed, or whatever script updated. Much more reliable than relying on DOM text nodes that don’t exist for <textarea>.
Yeah, adding in this because I’ve hit this exact issue myself. When I first tried using things like .innerText() or even checking playwright innerhtml, it felt like the textarea was “empty,” even though I could see the text on the screen.
That’s completely expected behavior <textarea> and <input> elements store everything in value, not the DOM tree. So Playwright gives us inputValue() as the proper, idiomatic way to read form field content. Once you use that instead of innerText/innerHTML checks, everything just works smoothly.
Adding to what @joe-elmoufak and @alveera.khn said since I’ve been automating UI flows for a long time, I’ll also mention that the same logic applies when setting text in a textarea. If you ever used .innerText() or playwright innerhtml hoping it would update the content, it won’t.
Playwright gives you a clean and consistent way to handle both writing and reading:
await page.locator('textarea#myTextarea').fill('New text');
const currentValue = await page.locator('textarea#myTextarea').inputValue();
fill() triggers proper browser events and updates the value property, while inputValue() confirms what’s actually inside. This keeps the flow stable and avoids relying on DOM text nodes that will never reflect user input in a textarea.