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

Code before:
      await page.waitForChanges();

      await pageUtils.pressKeys('Tab');

      const container = page.locator('#container');
      await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`));
    });

    test('should not have visual regressions when user dbclicks', async ({ page, browserName }) => {
      if (browserName === 'firefox' || browserName === 'webkit') {
        //TODO: Figure out why it's not working for webkit & 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');
      await input.dblclick();
      await page.waitForChanges();
      await expect(input).toHaveScreenshot(screenshot(`input-dbclick`));
    });
  });
});

configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
  test.describe(title('input: clear button in ionic theme, functionality checks'), () => {
    test('should show clear button when any part of input is focused', async ({ page, pageUtils }) => {
      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 clearButton = input.locator('.input-clear-icon');

      await expect(clearButton).not.toBeVisible();

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.

```suggestion
      const input = page.locator('ion-input');
      const nativeInput = input.locator('input');
      await nativeInput.dblclick();
```

Code after:
      await pageUtils.pressKeys('Tab');

      const container = page.locator('#container');
      await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`));
    });

    test('should not have visual regressions 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();
      await expect(input).toHaveScreenshot(screenshot(`input-dbclick`));
    });
  });
});

configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
  test.describe(title('input: clear button in ionic theme, functionality checks'), () => {
    test('should show clear button when any part of input is focused', async ({ page, pageUtils }) => {
      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 clearButton = input.locator('.input-clear-icon');

      await expect(clearButton).not.toBeVisible();

      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
      await expect(clearButton).toBeVisible();

      // ensure blurring native input doesn't immediately hide clear button
      await pageUtils.pressKeys('Tab');