Find correct input of PrimeNG component using PlayWright

I have a situation where I need to use Playwright to test a simple password component created using PrimeNG

<p-iftalabel>
<p-password
data-qa="login-password"
id="password"
formControlName="password"
></p-password>
<label for="password">Password</label>
</p-iftalabel>


And I want to use the testId data-qa to get it in Playwright

await page.getByTestId('login-password').fill(some.email@examp.le);

Problem is that Playwright is unable to find the input cause it gets rendered like this:

<p-iftalabel>
<p-password>
<div>
<input>
...


and the testID is on the password, not the input. Not using the testID is not an option, how can I drill down into the component to find that input and fill it in?

Continue reading...