使用 javascript 自动填充表单

Posted 2023-02-22

【中文标题】使用 javascript 自动填充表单

【英文标题】：Autofill a form with javascript

【发布时间】：2020-10-18 19:30:34

【问题描述】：

我有一个带有 12 个未输入字段的公式的小型 vue 应用程序。 我的初始状态看起来像：

form =  
  first_name: "",
  last_name: "",
... 

我必须手动测试提交过程，这很糟糕，因为我必须填写所有 12 个字段。 有没有办法编写一个脚本，只是粘贴在控制台中并填写所有字段？

我试过document.querySelector('input[name="first_name"]').value = "First Name" 等等。 在浏览器中可以看到字段都填好了，但是状态没有改变（可以在vue devtools中看到）。如果我点击提交按钮，required-Validation 就会启动，表示必须填写这些字段。

所以我发现，我需要以某种方式输入实际值，例如 puppeteer 所做的那样。知道如何实现吗？

【参考方案1】：

Try to make a function handleSubmit for the rest 10 inputs which handle submit to true 

没有任何限制，并在 10 个输入和 10 个输入标记内调用它，将 onClick 引用到 this.handleSubmit 并将提交也设置为 在您允许在其他两个输入中提交的情况下为真，您想尝试它们，所以它 将在您验证所需的两个输入时提交表单。

【讨论】：

对不起这不是我想做的，我试图澄清：在我的例子中，我只使用了 2 个字段来显示，我在做什么而没有太多重复。我实际上在所有 12 个字段上都尝试了 document.querySelector('input[name="first_name"]').value = "First Name" document.querySelector('input[name="last_name"]').value = "Last Name" document.querySelector('input[name="date"]').value = "01-01-2000" 等等。它们都被填满了，但它们的状态并没有改变，这就是为什么尽管被填满，但每个字段的验证都失败了。

@Mario 这是个好主意，但我正在测试生产版本，所以如果人们会在输入字段中看到“John Does”，那就太难看了。

【参考方案2】：

我建议使用环境变量，例如类似的东西

const DEVELOPMENT = "development";
const PRODUCTION = "production";
const environment = DEVELOPMENT;
const data = 
  firstName: environment === DEVELOPMENT ? "John" : "",
  lastName: environment === DEVELOPMENT ? "Doe" : "",
;

console.log(data);

这样你可以根据你所处的环境来控制使用哪些数据，通过做一些小的修改来扩展其他环境也更容易一些

例如添加舞台环境

const DEVELOPMENT = "development";
const PRODUCTION = "production";
const STAGE = "stage";
const environment = STAGE;
const data = 
  firstName:
    environment === STAGE ? "***" : environment === DEVELOPMENT ? "John" : "",
  lastName:
    environment === STAGE ? "***" : environment === DEVELOPMENT ? "Doe" : "",
;

console.log(data);

虽然阅读示例变得困难，但一种解决方案可能是使用函数来获取属性值。

无论如何，这就是我为这种情况提出解决方案的建议，并让您更轻松地进行扩展

有关在 vue 中使用环境变量的信息，请阅读此 SO answer