puppeteer_tests: Extract a common function to fill forms.

Co-authored-by: Priyank Patel <priyankp390@gmail.com>

frontend_tests/puppeteer_lib/common.js

@@ -46,12 +46,49 @@ class CommonUtils {
         });
     }
 
+    /**
+     * This function takes a params object whose fields
+     * are referenced by name attribute of an input field and
+     * the input as a key.
+     *
+     * For example to fill:
+     *  <form id="#demo">
+     *     <input type="text" name="username">
+     *     <input type="checkbox" name="terms">
+     *  </form>
+     *
+     * You can call:
+     * common.fill_form(page, '#demo', {
+     *     username: 'Iago',
+     *     terms: true
+     * });
+     */
+    async fill_form(page, form_selector, params) {
+        for (const name of Object.keys(params)) {
+            const name_selector = `${form_selector} [name="${name}"]`;
+            const value = params[name];
+            if (typeof value === "boolean") {
+                await page.$eval(name_selector, (el, value) => {
+                    if (el.checked !== value) {
+                        el.click();
+                    }
+                });
+            } else {
+                await page.type(name_selector, params[name]);
+            }
+        }
+    }
+
     async log_in(page, credentials) {
         console.log("Logging in");
         await page.goto(this.realm_url + 'login/');
         assert.equal(this.realm_url + 'login/', page.url());
-        await page.type('#id_username', credentials.username);
+        // fill login form
-        await page.type('#id_password', credentials.password);
+        const params = {
+            username: credentials.username,
+            password: credentials.password,
+        };
+        await this.fill_form(page, '#login_form', params);
         await page.$eval('#login_form', form => form.submit());
     }
 

frontend_tests/puppeteer_tests/00-realm-creation.js

@@ -44,16 +44,17 @@ async function realm_creation_tests(page) {
     assert(text_in_pitch === "We just need you to do one last thing.");
 
     // fill the form.
-    await page.type('#id_team_name', organization_name);
+    const params = {
-    await page.type('#id_full_name', 'Alice');
+        realm_name: organization_name,
-
+        realm_subdomain: subdomain,
-    // For some reason, page.click() does not work this perticular checkbox
+        full_name: 'Alice',
+        password: 'passwordwhichisnotreallycomplex',
+        terms: true,
+    };
+    // For some reason, page.click() does not work this for particular checkbox
     // so use page.$eval here to call the .click method in the browser.
     await page.$eval('#realm_in_root_domain', el => el.click());
-
+    await common.fill_form(page, '#registration', params);
-    await page.type('#id_team_subdomain', subdomain);
-    await page.type('#id_password', 'passwordwhichisnotreallycomplex');
-    await page.click('#id_terms');
     await page.$eval('#registration', form => form.submit());
 
     // Check if realm is created and user is logged in by checking if