Repository: apache/airflow
File: airflow-core/src/airflow/ui/tests/e2e/pages/BackfillPage.ts (TypeScript)

Code before:
function datesMatch(date1: string, date2: string): boolean {
  return normalizeDate(date1) === normalizeDate(date2);
}

export class BackfillPage extends BasePage {
  public readonly backfillDateError: Locator;
  public readonly backfillFromDateInput: Locator;
  public readonly backfillModeRadio: Locator;
  public readonly backfillRunButton: Locator;
  public readonly backfillsTable: Locator;
  public readonly backfillToDateInput: Locator;
  public readonly cancelButton: Locator;
  public readonly pauseButton: Locator;
  public readonly triggerButton: Locator;

  public constructor(page: Page) {
    super(page);
    this.triggerButton = page.locator('button[aria-label="Trigger Dag"]:has-text("Trigger")');
    this.backfillModeRadio = page.locator('label:has-text("Backfill")');
    this.backfillFromDateInput = page.locator('input[type="datetime-local"]').first();
    this.backfillToDateInput = page.locator('input[type="datetime-local"]').nth(1);
    this.backfillRunButton = page.locator('button:has-text("Run Backfill")');
    this.backfillsTable = page.locator("table");
    this.backfillDateError = page.locator('text="Start Date must be before the End Date"');
    this.cancelButton = page.locator('button[aria-label="Cancel backfill"]');
    this.pauseButton = page.locator('button[aria-label="Pause backfill"], button[aria-label="Unpause backfill"]');
  }

  public static findColumnIndex(columnMap: Map<string, number>, possibleNames: Array<string>): number {
    for (const name of possibleNames) {
      const index = columnMap.get(name);

      if (index !== undefined) {
        return index;
      }
    }

    return -1;
  }

  public static getBackfillsUrl(dagName: string): string {
    return `/dags/${dagName}/backfills`;
  }

  public static getDagDetailUrl(dagName: string): string {
    return `/dags/${dagName}`;
  }

  public async clickCancelButton(): Promise<void> {
    await expect(this.cancelButton).toBeVisible({ timeout: 10_000 });
    await this.cancelButton.click();

Review comment (suggestion):
```suggestion
    this.cancelButton = page.locator('button[aria-label="Cancel backfill"]');
    this.pauseButton = page.locator(
      'button[aria-label="Pause backfill"], button[aria-label="Unpause backfill"]',
    );
```

Code after:
function datesMatch(date1: string, date2: string): boolean {
  return normalizeDate(date1) === normalizeDate(date2);
}

export class BackfillPage extends BasePage {
  public readonly backfillDateError: Locator;
  public readonly backfillFromDateInput: Locator;
  public readonly backfillModeRadio: Locator;
  public readonly backfillRunButton: Locator;
  public readonly backfillsTable: Locator;
  public readonly backfillToDateInput: Locator;
  public readonly cancelButton: Locator;
  public readonly pauseButton: Locator;
  public readonly triggerButton: Locator;

  public constructor(page: Page) {
    super(page);
    this.triggerButton = page.locator('button[aria-label="Trigger Dag"]:has-text("Trigger")');
    this.backfillModeRadio = page.locator('label:has-text("Backfill")');
    this.backfillFromDateInput = page.locator('input[type="datetime-local"]').first();
    this.backfillToDateInput = page.locator('input[type="datetime-local"]').nth(1);
    this.backfillRunButton = page.locator('button:has-text("Run Backfill")');
    this.backfillsTable = page.locator("table");
    this.backfillDateError = page.locator('text="Start Date must be before the End Date"');
    this.cancelButton = page.locator('button[aria-label="Cancel backfill"]');
    this.pauseButton = page.locator(
      'button[aria-label="Pause backfill"], button[aria-label="Unpause backfill"]',
    );
  }

  public static findColumnIndex(columnMap: Map<string, number>, possibleNames: Array<string>): number {
    for (const name of possibleNames) {
      const index = columnMap.get(name);

      if (index !== undefined) {
        return index;
      }
    }

    return -1;
  }

  public static getBackfillsUrl(dagName: string): string {
    return `/dags/${dagName}/backfills`;
  }

  public static getDagDetailUrl(dagName: string): string {
    return `/dags/${dagName}`;
  }

  public async clickCancelButton(): Promise<void> {