如何使用Playwright启用禁用输入框并测试低权限用户篡改后的表单提交

需求说明 #

我有一个带禁用状态输入框的表单，需要模拟低权限用户通过开发者工具启用该输入框，验证提交表单时是否会被后端拦截或失败，且无法直接调用API测试。对应的HTML结构如下：

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" disabled>
  <input type="submit" value="Submit">
</form>

实现步骤 #

用Playwright模拟开发者工具修改DOM的操作，完整测试代码如下（以Node.js版本为例）：

const { test, expect } = require('@playwright/test');

test('验证禁用输入框启用后的表单提交结果', async ({ page }) => {
  // 访问目标页面
  await page.goto('你的页面实际URL');

  // 定位输入框，移除disabled属性——完全模拟用户在开发者工具里的操作
  await page.locator('#fname').evaluate(el => el.removeAttribute('disabled'));

  // 确认输入框已成功启用
  const inputIsEnabled = await page.locator('#fname').isEnabled();
  expect(inputIsEnabled).toBe(true);

  // 填写测试内容
  await page.locator('#fname').fill('低权限用户测试内容');

  // 提交表单
  await page.locator('input[type="submit"]').click();

  // 根据后端校验逻辑编写断言，示例如下：
  // 情况1：如果后端拦截提交，页面可能停留在原页面
  const currentUrl = await page.url();
  expect(currentUrl).not.toContain('/action_page.php');

  // 情况2：如果后端返回错误提示，检查提示元素是否可见
  // await expect(page.locator('.auth-error')).toBeVisible();
});

关键说明 #

• 必须使用evaluate方法直接操作DOM属性，这和用户手动在开发者工具中修改元素属性的行为完全一致，能准确模拟低权限用户的操作场景。
• 断言逻辑需要和实际的后端权限校验规则匹配：如果后端仅做前端禁用限制，提交会成功跳转；如果后端有权限校验，提交后会出现拦截（如停留在原页面、显示错误提示等）。

内容的提问来源于stack exchange，提问作者I.sh.