angularprimengplaywright

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?


Solution

  • How about to use in the following format? await page.locator('[@data-qa="login-password"]').locator('input').fill('your password');