fix: align typing behaviour between runner and stringifier (#342)

.mocharc.cjs

@@ -1,11 +1,10 @@
 module.exports = {
-  reporter: 'dot',
+  reporter: 'spec',
   // Allow `console.log`s to show up during test execution
   logLevel: 'debug',
   exit: !!process.env.CI,
   spec: 'test/**/*.test.ts',
   extension: ['ts'],
   timeout: 25 * 1000,
-  reporter: process.env.CI ? 'spec' : 'dot',
   loader: 'ts-node/esm',
 };

__snapshots__/PuppeteerStringifyExtension.test.ts.js

@@ -59,18 +59,13 @@ exports[
   const targetPage = page;
   await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
   const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
-  const type = await element.evaluate(el => el.type);
-  if (["select-one"].includes(type)) {
-    await element.select("Hello World");
-  } else if (["textarea","text","url","tel","search","password","number","email"].includes(type)) {
-    await element.type("Hello World");
+  const inputType = await element.evaluate(el => el.type);
+  if (inputType === 'select-one') {
+    await changeSelectElement(element, "Hello World")
+  } else if (["textarea","text","url","tel","search","password","number","email"].includes(inputType)) {
+    await typeIntoElement(element, "Hello World");
   } else {
-    await element.focus();
-    await element.evaluate((el, value) => {
-      el.value = value;
-      el.dispatchEvent(new Event('input', { bubbles: true }));
-      el.dispatchEvent(new Event('change', { bubbles: true }));
-    }, "Hello World");
+    await changeElementValue(element, "Hello World");
   }
 }
 
@@ -83,18 +78,13 @@ exports[
   const targetPage = page;
   await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
   const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
-  const type = await element.evaluate(el => el.type);
-  if (["select-one"].includes(type)) {
-    await element.select("#333333");
-  } else if (["textarea","text","url","tel","search","password","number","email"].includes(type)) {
-    await element.type("#333333");
+  const inputType = await element.evaluate(el => el.type);
+  if (inputType === 'select-one') {
+    await changeSelectElement(element, "#333333")
+  } else if (["textarea","text","url","tel","search","password","number","email"].includes(inputType)) {
+    await typeIntoElement(element, "#333333");
   } else {
-    await element.focus();
-    await element.evaluate((el, value) => {
-      el.value = value;
-      el.dispatchEvent(new Event('input', { bubbles: true }));
-      el.dispatchEvent(new Event('change', { bubbles: true }));
-    }, "#333333");
+    await changeElementValue(element, "#333333");
   }
 }
 

__snapshots__/lighthouse-e2e.test.ts.js

@@ -246,6 +246,40 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     }
     throw new Error('Timed out');
   }
+
+  async function changeSelectElement(element, value) {
+    await element.select(value);
+    await element.evaluateHandle((e) => {
+      e.blur();
+      e.focus();
+    });
+  }
+
+  async function changeElementValue(element, value) {
+    await element.focus();
+    await element.evaluate((input, value) => {
+      input.value = value;
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    }, value);
+  }
+
+  async function typeIntoElement(element, value) {
+    const textToType = await element.evaluate((input, newValue) => {
+      if (
+        newValue.length <= input.value.length ||
+        !newValue.startsWith(input.value)
+      ) {
+        input.value = '';
+        return newValue;
+      }
+      const originalValue = input.value;
+      input.value = '';
+      input.value = originalValue;
+      return newValue.substring(originalValue.length);
+    }, value);
+    await element.type(textToType);
+  }
 })().catch(err => {
   console.error(err);
   process.exit(1);