使用 javascript 自动填充表单答案

【问题标题】：Autofill a form with javascript使用 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 所做的那样。知道如何实现吗？

【问题讨论】：

标签： javascript input 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

【讨论】：