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

Code before:
        // 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`));
      });
    });
  });
});

/**
 * This behavior does not vary across modes/directions.
 */
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  test.describe(title('input: clear button'), () => {

Review comment (suggestion):
Once I used the native input to click on then the Firefox tests were passing as expected.

```suggestion
```

Code after:
        // 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`));
      });
    });
  });
});

/**
 * This behavior does not vary across modes/directions.
 */
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  test.describe(title('input: clear button'), () => {
    test('should clear the input when pressed', async ({ page }) => {
      await page.setContent(