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

Code before:

      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):
This isn't needed because we have the `await` on `dbclick`.

```suggestion
```

Code after:

      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');
      await expect(clearButton).toBeFocused();