feat: sync various improvements

src/PuppeteerRunnerExtension.ts

@@ -41,13 +41,16 @@ export class PuppeteerRunnerExtension extends RunnerExtension {
 
     const targetPage = await getTargetPageForStep(browser, page, step, timeout);
     let targetFrame: Frame | null = null;
-    if (!targetPage) {
+    if (!targetPage && step.target) {
       const frames = page.frames();
       for (const f of frames) {
         if (f.isOOPFrame() && f.url() === step.target) {
           targetFrame = f;
         }
       }
+      if (!targetFrame) {
+        targetFrame = await page.waitForFrame(step.target, { timeout });
+      }
     }
     const pageOrFrame = targetPage || targetFrame;
     if (!pageOrFrame) {
@@ -114,11 +117,26 @@ export class PuppeteerRunnerExtension extends RunnerExtension {
             (el: Element) => (el as HTMLInputElement).type
           );
           if (typeableInputTypes.has(inputType)) {
-            await element.evaluate((el: Element) => {
-              /* c8 ignore next 1 */
-              (el as HTMLInputElement).value = '';
-            });
-            await element.type(step.value);
+            const textToType = await element.evaluate(
+              (el: Element, newValue: string) => {
+                /* c8 ignore next 10 */
+                const input = el as HTMLInputElement;
+                if (
+                  newValue.length > input.value.length &&
+                  newValue.startsWith(input.value)
+                ) {
+                  const originalValue = input.value;
+                  // Move cursor to the end of the common prefix.
+                  input.value = '';
+                  input.value = originalValue;
+                  return newValue.substring(originalValue.length);
+                }
+                input.value = '';
+                return newValue;
+              },
+              step.value
+            );
+            await element.type(textToType);
           } else {
             await element.focus();
             await element.evaluate((el: Element, value: string) => {
@@ -566,6 +584,7 @@ interface Page {
   $$<T extends Element = Element>(
     selector: string
   ): Promise<Array<ElementHandle<T>>>;
+  waitForFrame(url: string, opts: { timeout: number }): Promise<Frame>;
 }
 
 interface Frame {

test/resources/input.html

@@ -33,6 +33,7 @@
 <input id="url" type="url">
 <input id="week" type="week">
 <input id="prefilled" value="abc">
+<input id="partially-prefilled" value="abc">
 <pre id="log"></div>
 <script>
   window.addEventListener('input', (e) => {

test/runner_test.ts

@@ -296,6 +296,33 @@ describe('Runner', () => {
     assert.strictEqual(value, 'cba');
   });
 
+  it('should be able to override the value in text inputs that are partially prefilled', async () => {
+    const runner = await createRunner(
+      {
+        title: 'test',
+        steps: [
+          {
+            type: 'navigate',
+            url: `${HTTP_PREFIX}/input.html`,
+          },
+          {
+            type: 'change',
+            target: 'main',
+            selectors: ['#partially-prefilled'],
+            value: 'abcdef',
+          },
+        ],
+      },
+      new PuppeteerRunnerExtension(browser, page)
+    );
+    await runner.run();
+    const value = await page.$eval(
+      '#partially-prefilled',
+      (e) => (e as HTMLSelectElement).value
+    );
+    assert.strictEqual(value, 'abcdef');
+  });
+
   it('should be able to replay viewport change', async () => {
     const runner = await createRunner(
       {