如何使用 Playwright 测试 Stencil Web 组件输入标签 'readonly' 属性？

Question

我有一个带有多个 prop 的 Stencil 自定义 input 组件，我在测试 readonly 属性时遇到了重大问题。

模板 class 看起来像这样：

@Component({
  tag: 'my-input',
  shadow: true,
})
export class Input {
  @Prop() readonly: boolean = false;
  .
  .
   render() {
    return (
        .
        .
        .
        <input readonly={this.readonly}
        .
        .

实际呈现的 HTML 是什么样的： [![在此处输入图片描述][1]][1]
有趣的是，如果我编辑 HTML 它看起来好像 readonly 属性是空的：

<input maxlength="524288" type="text" id="input" placeholder="Enter text" readonly="">

剧作家测试：

test('input is readonly', async ({ page }) => {
    const myinput = await page.locator('my-input');
    await myinput.evaluate((el) => {
        el.setAttribute('readonly', 'true');
    });

    const input = await page.locator('my-input >> input');
    const attrs = await input.evaluate(async (el) => el.getAttributeNames()); // doesnt work
    await expect(attrs.includes('readonly')).toBeTruthy(); // doesnt work
    await expect(input).toHaveAttribute('readonly', 'true'); // doesnt work
});

如果我在元素 上测试可用 attributes，有时 readonly 不存在。为什么如此不一致？ ☹️ [1]: https://i.stack.imgur.com/H5WD0.png

Answer 1

您的示例存在一些问题：

test('input is readonly', async ({ page }) => {
  // Dont't forget to open the page with the input
  // await page.goto('http://localhost:52330/index.html');

  // 1. remove await ↓           ↓ 2. provide valid selector            
  const myinput = page.locator('#input');

  await myinput.evaluate((el) => {
    el.setAttribute('readonly', 'true');
  });

  // 3. remove await ↓           ↓ 4. provide valid selector  
  const input = page.locator('#input');
  const attrs = await input.evaluate(async (el) => el.getAttributeNames());
  // 5. remove await ↓ 
  expect(attrs.includes('readonly')).toBeTruthy();
  await expect(input).toHaveAttribute('readonly', 'true');
});

已使用您的 HTML 代码对其进行测试：

<input maxlength="524288" type="text" id="input" placeholder="Enter text" readonly="">

有效

如何使用 Playwright 测试 Stencil Web 组件输入标签 'readonly' 属性？

How to test Stencil web component input tag 'readonly' attribute with Playwright?

stenciljs

playwright