Autofill a form with javascript

Question

I have a small vue-app with a formular with 12 unput fields. My initial state looks smth like:

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

I have to test the submit process manually, which sucks, because I have to fill in all 12 fields. Is there a way to write a script which is just pasted in the console and fills in all the fields?

I tried document.querySelector('input[name="first_name"]').value = "First Name" and so on. It can be seen in the browser that the fields are filled in, but the state doesn't change (can be seen in vue devtools). If I click the Submit-Button the required-Validation kicks in, saying the fields have to be filled in.

So I figured out, that I need to somehow input the actual values, like for example puppeteer does. Any idea how it can be achieved?

score 0 · Answer 1 · answered Jun 28 '20 at 15:33

0

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

without any restrictions and call it inside the 10 inputs and inside the 10 inputs tag refer onClick to {this.handleSubmit} and set submit also to true inside the case you allow submit in the other two inputs you want to try them so it will submit the form whenever you validate the two inputs you want.

answered Jun 28 '20 at 15:33

Mariam Amr

11
1

Sorry It is not what I want to do, I try to claryfy: In my example I used only 2 fields just to show, what am I doing without too much repitition. I actually tried `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"` and so on on all 12 fields. They are ALL filled in, but the state doesn't change in all of them, thats why the validation fails in every field despite being filled in. – mitchK Jun 28 '20 at 15:43
@Mario It is a good idea, but I am testing the production version, so it would be pretty ugly if people would see "John Does" in their input fields. – mitchK Jun 28 '20 at 18:01

score 0 · Answer 2 · answered Jun 28 '20 at 16:26

I would suggest using environment variables, for example something similar to this

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

console.log(data);

In this way you can control what data to use depending on the environment you are in, it is also a little easier to extend other environments by making small modifications

For example adding the stage environment

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);

Although it becomes difficult to read the example, one solution might be to use functions to get the property values.

Anyway, this is how I suggest solutions to this case and allowing you to scale with a little more ease

For information about the use of environment variables in vue read this SO answer

Autofill a form with javascript

2 Answers2