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

Code before:
        `,
          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'), () => {
    test('should clear the input when pressed', async ({ page }) => {
      await page.setContent(
        `
        <ion-input label="my label" value="abc" clear-input="true"></ion-input>
      `,
        config
      );

      const input = page.locator('ion-input');
      const clearButton = input.locator('.input-clear-icon');

      await expect(input).toHaveJSProperty('value', 'abc');


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:
        `,
          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(
        `
        <ion-input label="my label" value="abc" clear-input="true"></ion-input>
      `,
        config
      );

      const input = page.locator('ion-input');
      const clearButton = input.locator('.input-clear-icon');

      await expect(input).toHaveJSProperty('value', 'abc');

      await clearButton.click();
      await page.waitForChanges();