Playwright+Angular15中如何修改input元素的value属性值

给定的HTML结构如下：

<table>
    <thead>
        <tr>...</tr>
    </thead>
    <tbody>
        <tr>...</tr>
        <tr>
            <td>Test</td>
            <td><input type="text" id="id_1" name="test_name_1" value="John"></td>
            <td><input type="text" id="id_2" name="test_n_2" value="Student"></td>
        </tr>
    </tbody>
</table>

你已经通过expect(await page.locator('td:has-text("John")')).toBeTruthy();验证了元素存在，以下是两种修改input值的可靠方案：

方案一：模拟用户输入填充（推荐） #

Playwright的fill()方法会自动清空原有内容并填入新值，同时触发页面的输入、变更等事件，完全模拟真实用户操作，适配大部分前端逻辑：

修改"John"为"Paul" #

两种定位方式可选，id定位更精准稳定：

// 通过td文本关联定位input
await page.locator('td:has-text("John") input').fill('Paul');

// 直接通过input的id定位（优先推荐）
await page.locator('#id_1').fill('Paul');

修改"Student"为"Teacher" #

同理操作：

// 通过td文本关联定位input
await page.locator('td:has-text("Student") input').fill('Teacher');

// 直接通过input的id定位
await page.locator('#id_2').fill('Teacher');

方案二：直接修改DOM属性 #

如果不需要模拟用户交互，仅需修改属性值本身，可以用evaluate()直接操作DOM元素：

修改"John"为"Paul" #

// 通过td文本关联修改
await page.locator('td:has-text("John") input').evaluate(el => el.value = 'Paul');

// 通过id修改
await page.locator('#id_1').evaluate(el => el.value = 'Paul');

修改"Student"为"Teacher" #

// 通过td文本关联修改
await page.locator('td:has-text("Student") input').evaluate(el => el.value = 'Teacher');

// 通过id修改
await page.locator('#id_2').evaluate(el => el.value = 'Teacher');

注意：优先使用方案一，因为方案二仅修改DOM属性，不会触发前端依赖的输入事件，可能导致页面逻辑不生效（比如实时校验、数据同步等）。

内容的提问来源于stack exchange，提问作者Kent