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

Code before:
            <ion-input
              label="Label"
              label-placement="stacked"
              clear-input="true"
              value="Text"
            ></ion-input>
          </div>
        `,
        config
      );

      const input = page.locator('ion-input');
      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
      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

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

Code after:
              label-placement="stacked"
              clear-input="true"
              value="Text"
            ></ion-input>
          </div>
        `,
        config
      );

      const input = page.locator('ion-input');
      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
      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 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>
        `,