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

Code before:
        description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
      });

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

      const datetime = page.locator('ion-datetime');
      const monthYearButton = datetime.locator('.calendar-month-year-toggle');

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

      expect(backgroundColor).toBe('rgb(173, 216, 230)');
    });

    test('should be able to customize prev/next buttons part within the grid style', async ({ page }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
      });

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

      const datetime = page.locator('ion-datetime');
      const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
      const nextButton = datetime.locator('.calendar-next-prev ion-button').last();

      const prevBackgroundColor = await prevButton.evaluate((el) => {
        return window.getComputedStyle(el).backgroundColor;
      });


Review comment (suggestion):
Could we combine this test with the previous & next button part tests? Maybe the one targeting both could apply background color while the individual parts could apply text color.

Code after:
            }
          </style>
          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
        `,
        config
      );

      const datetime = page.locator('ion-datetime');
      const header = datetime.locator('.calendar-header');

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

      expect(backgroundColor).toBe('rgb(255, 165, 0)');
    });

    test('should be able to customize month/year picker part', async ({ page }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
      });

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

      const datetime = page.locator('ion-datetime');
      const monthYearButton = datetime.locator('.calendar-month-year-toggle');

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

      expect(backgroundColor).toBe('rgb(173, 216, 230)');
    });

    test('should be able to customize navigation button parts', async ({ page }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
      });