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?
How about to use in the following format?
await page.locator('[@data-qa="login-password"]').locator('input').fill('your password');