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

Code before:
  /**
   * Get all Dag names from the current page
   */
  public async getDagNames(): Promise<Array<string>> {
    await this.waitForDagList();
    const dagLinks = this.page.locator('[data-testid="dag-id"]');
    const texts = await dagLinks.allTextContents();

    return texts.map((text) => text.trim()).filter((text) => text !== "");
  }

  /**
   * Navigate to Dags list page
   */
  public async navigate(): Promise<void> {
    await this.navigateTo(DagsPage.dagsListUrl);
  }

  /**
   * Navigate to Dag detail page
   */
  public async navigateToDagDetail(dagName: string): Promise<void> {
    await this.navigateTo(DagsPage.getDagDetailUrl(dagName));
  }

  public async navigateToDagTasks(dagId: string = "example_bash_operator") {
    await this.page.goto(`/dags/${dagId}/tasks`);
  }

  /**
   * Trigger a Dag run
   */
  public async triggerDag(dagName: string): Promise<string | null> {
    await this.navigateToDagDetail(dagName);
    await expect(this.triggerButton).toBeVisible({ timeout: 10_000 });
    await this.triggerButton.click();
    const dagRunId = await this.handleTriggerDialog();

    return dagRunId;
  }

  /**
   * Navigate to details tab and verify Dag details are displayed correctly
   */
  public async verifyDagDetails(dagName: string): Promise<void> {
    await this.navigateToDagDetail(dagName);

    const detailsTab = this.page.locator('a[href$="/details"]');

    await expect(detailsTab).toBeVisible();
    await detailsTab.click();

Review comment (suggestion):
We do not need default here. We should also wait task to load

```suggestion
 public async navigateToDagTasks(dagId: string): Promise<void> {
  await this.page.goto(`/dags/${dagId}/tasks`);
  await this.taskCards.first().waitFor({ state: "visible", timeout: 10_000 });
}
```

Code after:
    await this.page.waitForTimeout(500);

    const controlsId = await filter.getAttribute("aria-controls");
    let options;

    if (controlsId === null) {
      const listbox = this.page.locator('div[role="listbox"]').first();

      await listbox.waitFor({ state: "visible", timeout: 5000 });
      options = listbox.locator('div[role="option"]');
    } else {
      options = this.page.locator(`[id="${controlsId}"] div[role="option"]`);
    }

    const count = await options.count();
    const dataValues: Array<string> = [];

    for (let i = 0; i < count; i++) {
      const value = await options.nth(i).getAttribute("data-value");

      if (value !== null && value.trim().length > 0) {
        dataValues.push(value);
      }
    }

    await this.page.keyboard.press("Escape");
    await this.page.waitForTimeout(300);

    return dataValues;
  }

  /**
   * Navigate to Dags list page
   */
  public async navigate(): Promise<void> {
    await this.navigateTo(DagsPage.dagsListUrl);
  }

  /**
   * Navigate to Dag detail page
   */
  public async navigateToDagDetail(dagName: string): Promise<void> {
    await this.navigateTo(DagsPage.getDagDetailUrl(dagName));
  }

  public async navigateToDagTasks(dagId: string): Promise<void> {
    await this.page.goto(`/dags/${dagId}/tasks`);
    await this.page
      .locator("h2")
      .filter({ hasText: /^Operator$/ })
      .first()