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

Code before:
  }

  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();
    await this.page.waitForTimeout(1000);
  }

  public async clickPauseButton(): Promise<void> {
    await expect(this.pauseButton).toBeVisible({ timeout: 10_000 });
    await this.pauseButton.click();
    await this.page.waitForTimeout(1000);
  }

  public async createBackfill(dagName: string, options: CreateBackfillOptions): Promise<void> {
    const { fromDate, reprocessBehavior, toDate } = options;

    await this.navigateToDagDetail(dagName);
    await this.waitForNoActiveBackfill();
    await this.openBackfillDialog();

    await this.backfillFromDateInput.click();
    await this.backfillFromDateInput.fill(fromDate);
    await this.backfillFromDateInput.dispatchEvent("change");

    await this.backfillToDateInput.click();
    await this.backfillToDateInput.fill(toDate);
    await this.backfillToDateInput.dispatchEvent("change");

    await this.page.waitForTimeout(500);


Review comment (suggestion):
Replace `waitForTimeout(1000)` with explicit state waits like `await expect(button).not.toBeVisible()`

Code after:
  }

  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 this.waitForBackdropClosed();
    await expect(this.cancelButton).toBeVisible({ timeout: 10_000 });
    await this.cancelButton.click();
    await expect(this.cancelButton).not.toBeVisible({ timeout: 30_000 });
  }

  public async clickPauseButton(): Promise<void> {
    await this.pauseButton.waitFor({ state: "visible", timeout: 30_000 });
    await this.pauseButton.scrollIntoViewIfNeeded();
    await expect(this.pauseButton).toBeEnabled({ timeout: 10_000 });
    const wasPaused = await this.isBackfillPaused();

    const responsePromise = this.page
      .waitForResponse(
        (response) => {
          const url = response.url();
          const status = response.status();

          return url.includes("/backfills/") && (status === 200 || status === 204);
        },
        { timeout: 10_000 },
      )
      .catch(() => undefined);

    await this.pauseButton.click();
    await responsePromise;

    // Wait for aria-label to change