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

Code before:
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('picker-column-internal', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/src/components/picker-column-internal/test/basic');
  });

  test('should render a picker item for each item', async ({ page }) => {
    const columns = await page.$$('ion-picker-column-internal .picker-item:not(.picker-item-empty)');
    expect(columns.length).toEqual(24);
  });

  test('should render 6 empty picker items', async ({ page }) => {
    const columns = await page.$$('ion-picker-column-internal .picker-item-empty');
    expect(columns.length).toEqual(6);
  });

  test('should not have an active item when value is not set', async ({ page }) => {
    const activeColumn = await page.$$('ion-picker-column-internal .picker-item-active');
    expect(activeColumn.length).toEqual(0);
  });

  test('should have an active item when value is set', async ({ page }) => {
    await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => {
      el.value = '12';
    });
    await page.waitForChanges();

    const activeColumn = await page.$('ion-picker-column-internal .picker-item-active');

    expect(activeColumn).not.toBeNull();
  });

  test('scrolling should change the active item', async ({ page }) => {

Review comment (suggestion):
Playwright [recommends](https://playwright.dev/docs/locators#locator-vs-elementhandle) using `locator` instead of `$$` and `$`. While the tests here are small and won't have to worry about timing issues or elements moving around, it would make the logic easier to extend or re-use elsewhere.

You can use `expect(locator).toHaveCount()` to check the number of elements.

Code after:
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('picker-column-internal', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/src/components/picker-column-internal/test/basic');
  });

  test('should render a picker item for each item', async ({ page }) => {
    const columns = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty)');
    expect(columns).toHaveCount(24);
  });

  test('should render 6 empty picker items', async ({ page }) => {
    const columns = page.locator('ion-picker-column-internal .picker-item-empty');
    expect(columns).toHaveCount(6);
  });

  test('should not have an active item when value is not set', async ({ page }) => {
    const activeColumn = page.locator('ion-picker-column-internal .picker-item-active');
    expect(activeColumn).toHaveCount(0);
  });

  test('should have an active item when value is set', async ({ page }) => {
    await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => {
      el.value = '12';
    });
    await page.waitForChanges();

    const activeColumn = page.locator('ion-picker-column-internal .picker-item-active');

    expect(activeColumn).not.toBeNull();
  });

  test('scrolling should change the active item', async ({ page, browserName }) => {