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

Code before:

      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));

      await timeButton.click();
      await ionPopoverDidPresent.next();

      await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
    });

    test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
      const datetime = page.locator('#custom-calendar-days');

      // Wait for calendar days to be rendered
      await page.waitForFunction(() => {
        const datetime = document.querySelector('#custom-calendar-days');
        const calendarDays = datetime?.shadowRoot?.querySelectorAll('.calendar-day');
        return calendarDays && calendarDays.length > 0;
      });

      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
    });
  });

  test.describe(title('CSS shadow parts'), () => {
    test('should be able to customize wheel part', async ({ page }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
      });

      await page.setContent(
        `
          <style>
            ion-datetime::part(wheel) {
              background-color: red;
            }
          </style>
          <ion-datetime
            prefer-wheel="true"
            value="2020-03-14T14:23:00.000Z"
          ></ion-datetime>
        `,
        config
      );

      const datetime = page.locator('ion-datetime');
      const pickerColumn = datetime.locator('ion-picker-column').first();

      const backgroundColor = await pickerColumn.evaluate((el) => {
        return window.getComputedStyle(el).backgroundColor;

Review comment (suggestion):
Optional: should we break this up into the different ways where you can customize the wheel part? 

1) Month/year picker
2) Wheel style (`prefer-wheel`) picker
3) Time picker

Code after:

      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));

      await timeButton.click();
      await ionPopoverDidPresent.next();

      await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
    });

    test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
      const datetime = page.locator('#custom-calendar-days');

      // Wait for calendar days to be rendered
      await page.waitForFunction(() => {
        const datetime = document.querySelector('#custom-calendar-days');
        const calendarDays = datetime?.shadowRoot?.querySelectorAll('.calendar-day');
        return calendarDays && calendarDays.length > 0;
      });

      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
    });
  });

  test.describe(title('CSS shadow parts'), () => {
    test('should be able to customize wheel part within the wheel style', async ({ page }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
      });

      await page.setContent(
        `
          <style>
            ion-datetime::part(wheel) {
              background-color: red;
            }
          </style>
          <ion-datetime
            prefer-wheel="true"
            value="2020-03-14T14:23:00.000Z"
          ></ion-datetime>
        `,
        config
      );

      const datetime = page.locator('ion-datetime');
      const pickerColumn = datetime.locator('ion-picker-column').first();

      const backgroundColor = await pickerColumn.evaluate((el) => {
        return window.getComputedStyle(el).backgroundColor;