使用 PlayWright 找到 PrimeNG 组件的正确输入

Question

我有一种情况，我需要使用 Playwright 来测试使用 PrimeNG 创建的简单密码组件

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

我想使用 testId

data-qa

在 Playwright 中获取它

await page.getByTestId('login-password').fill([email protected]);

问题是 Playwright 无法找到输入，因为它的渲染方式如下：

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

并且 testID 位于密码上，而不是输入的内容上。不使用 testID 不是一个选项，我如何深入到组件中找到该输入并填写它？

Answer 1

await page.getByTestId('login-password')

返回的对象类型是

Locator

对象。您可以轻松地从这些对象中链接函数，以继续在 DOM 中搜索子元素。

在您的具体情况下，使用类似

.locator()

的内容来查找子

<input>

元素即使不是最漂亮的，也可能是最简单的。

await page.getByTestId('login-password')
          .locator('input')
          .fill([email protected]);

Answer 2

尝试设置 primeng 属性

inputId

:

<div class="card flex justify-center">
<p-password [(ngModel)]="value" [feedback]="false" inputId="login-password" />
</div>

然后你可以将你的测试用例转换为：

await page.getByTestId('login-password').fill([email protected]);