Repository: ionic-team/ionic-framework
File: core/src/components/input/test/basic/input.e2e.ts (TypeScript)

Code before:
            label-placement="stacked"
            clear-input="true"
            value="Text"
          ></ion-input>
        `,
          config
        );
        const input = page.locator('ion-input');
        // Validates the display of an input with a clear button.
        await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button-stacked`));
      });
    });
    test.describe('input click behaviors', () => {
      test('should not have visual regressions', async ({ page }) => {
        await page.setContent(
          `
          <ion-input
            label="Label"
            clear-input="true"
            value="Text"
          ></ion-input>
        `,
          config
        );
        const input = page.locator('ion-input');
        input.dblclick();
        // Validates the display of an input with a clear button.
        await expect(input).toHaveScreenshot(screenshot(`input-dbclick`));
      });
      test('should not have visual regressions with stacked label', async ({ page, browserName }) => {
        if (browserName === 'firefox') {
          //TODO: Figure out why it's not working for firefox
          test.skip();
        }
        await page.setContent(
          `
          <ion-input
            label="Label"
            label-placement="stacked"
            clear-input="true"
            value="Text"
          ></ion-input>
        `,
          config
        );
        const input = page.locator('ion-input');
        input.dblclick();
        // Validates the display of an input with a clear button.
        await expect(input).toHaveScreenshot(screenshot(`input-dbclick-stacked`));
      });
    });

Review comment (suggestion):
I think the reason that the native input should be used to double click on is because we verify that the mouse actually is on top of the input. If we use just `ion-input` then the Playwright mouse might be clicking on the right area to trigger a focus when using specific browsers.

Also it helps to add the missing `await` to `dbclick`.

```suggestion
        const input = page.locator('ion-input');
        const nativeInput = input.locator('input');
        await nativeInput.dblclick();
```

Code after:
            label-placement="stacked"
            clear-input="true"
            value="Text"
          ></ion-input>
        `,
          config
        );
        const input = page.locator('ion-input');
        // Validates the display of an input with a clear button.
        await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button-stacked`));
      });
    });
    test.describe('input click behaviors', () => {
      test('should not have visual regressions when user double clicks', async ({ page }) => {
        await page.setContent(
          `
          <ion-input
            label="Label"
            clear-input="true"
            value="Text"
          ></ion-input>
        `,
          config
        );
        const input = page.locator('ion-input');
        const nativeInput = input.locator('input');
        await nativeInput.dblclick();
        // Validates the display of an input with a clear button.
        await expect(input).toHaveScreenshot(screenshot(`input-dbclick`));
      });
      test('should not have visual regressions with stacked label when user double clicks', async ({ page }) => {
        await page.setContent(
          `
          <ion-input
            label="Label"
            label-placement="stacked"
            clear-input="true"
            value="Text"
          ></ion-input>
        `,
          config
        );
        const input = page.locator('ion-input');
        const nativeInput = input.locator('input');
        await nativeInput.dblclick();
        // Validates the display of an input with a clear button.
        await expect(input).toHaveScreenshot(screenshot(`input-dbclick-stacked`));
      });
    });
  });
});