test(e2e): verify DAG code is displayed in Code tab

[Coding-Alchemist-Abhijay]

---

What this PR does

This PR adds an end-to-end (E2E) Playwright test to verify that the DAG source
code is correctly displayed in the Code tab on the DAG detail page.

The test logs in, navigates to a DAG detail view, opens the Code tab, and asserts
that the DAG code container is visible and rendered. This helps prevent UI
regressions related to DAG code rendering in the Airflow UI.

Related issue

Closes #59546

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

• Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
• In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
• Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
• Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
• Be sure to read the Airflow Coding style.
• Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
  Apache Airflow is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: dev@airflow.apache.org
  Slack: https://s.apache.org/airflow-slack

[vatsrahul1001]

Thanks for the PR @Coding-Alchemist-Abhijay, I will review it soon.

[Coding-Alchemist-Abhijay]

Thanks for the PR @Coding-Alchemist-Abhijay, I will review it soon.

thanks @vatsrahul1001 ! Looking forward to solve more issues!

[choo121600]

Thanks for PR🙌
It seems that the tests are failing.
Could you let me know if the tests passed when you ran them locally?

[Coding-Alchemist-Abhijay]

Thanks for PR🙌 It seems that the tests are failing. Could you let me know if the tests passed when you ran them locally?

Hi @choo121600 ,

I hope you’re doing well. I ran into some issues while trying to run the tests locally on my Windows machine, so I switched to GitHub Codespaces. Unfortunately, I encountered similar difficulties there as well, which is why I wasn’t able to successfully run the tests locally for this PR.

As I’m still new to open-source contributions, I’m in the process of learning the project’s setup and testing workflow. I kindly request a bit of time to debug the environment issues, fix them, and re-run the tests locally before updating the PR.

Thank you for your patience and understanding.

[choo121600]

If you’re a Windows user, you can follow the instructions in this section to get set up😉
https://github.com/apache/airflow/blob/main/contributing-docs/03_contributors_quick_start.rst#local-machine-development

[vatsrahul1001]

@Coding-Alchemist-Abhijay did you get a chance to fix the review comment?

[Coding-Alchemist-Abhijay]

@Coding-Alchemist-Abhijay did you get a chance to fix the review comment?

Hi @vatsrahul1001 ,
sorry for the delay in addressing this.

I tried my best to cleanly address and fix all the review comments you mentioned (removing explicit login due to auth sharing, avoiding non-existent selectors, following the page object pattern, and adding a proper assertion for DAG code visibility.

I spent some time trying to run the UI E2E tests locally so I could properly validate and debug the failure around
getByRole("tab", { name: "Code" }). Unfortunately, I ran into multiple issues setting up Airflow locally on my Windows environment. At different points, my WSL/bash environment broke, and I also faced Breeze-related issues (Docker/Breeze commands failing or not being recognized), which prevented me from getting a stable local setup to iterate on the test.

From reviewing the behavior and the UI implementation, the failure does not seem to be with the Code tab itself, but rather with the selector. getByRole("tab", { name: "Code" }) relies on ARIA roles and accessible names, which may not be immediately available or consistent during initial render/hydration. Because of that, the selector can fail even when the Code tab is visibly present and functional in the UI.

Being able to run Airflow locally would have allowed me to confirm the exact timing/ARIA behavior and adjust the selector accordingly, but I wasn’t able to get a working local setup despite several attempts. I’m still learning the Airflow + Breeze workflow on Windows, and I apologize for the delay this caused.

If you have suggestions on how best to handle or stabilize the getByRole("tab", { name: "Code" }) selector in this context, I’d really appreciate the guidance and will be happy to update the test accordingly.

Thanks for your patience and for the review.

[vatsrahul1001]

@Coding-Alchemist-Abhijay did you get a chance to fix the review comment?

Hi @vatsrahul1001 , sorry for the delay in addressing this.

I tried my best to cleanly address and fix all the review comments you mentioned (removing explicit login due to auth sharing, avoiding non-existent selectors, following the page object pattern, and adding a proper assertion for DAG code visibility.

I spent some time trying to run the UI E2E tests locally so I could properly validate and debug the failure around getByRole("tab", { name: "Code" }). Unfortunately, I ran into multiple issues setting up Airflow locally on my Windows environment. At different points, my WSL/bash environment broke, and I also faced Breeze-related issues (Docker/Breeze commands failing or not being recognized), which prevented me from getting a stable local setup to iterate on the test.

From reviewing the behavior and the UI implementation, the failure does not seem to be with the Code tab itself, but rather with the selector. getByRole("tab", { name: "Code" }) relies on ARIA roles and accessible names, which may not be immediately available or consistent during initial render/hydration. Because of that, the selector can fail even when the Code tab is visibly present and functional in the UI.

Being able to run Airflow locally would have allowed me to confirm the exact timing/ARIA behavior and adjust the selector accordingly, but I wasn’t able to get a working local setup despite several attempts. I’m still learning the Airflow + Breeze workflow on Windows, and I apologize for the delay this caused.

If you have suggestions on how best to handle or stabilize the getByRole("tab", { name: "Code" }) selector in this context, I’d really appreciate the guidance and will be happy to update the test accordingly.

Thanks for your patience and for the review.

@Coding-Alchemist-Abhijay Thanks for fixes. I have added review comments that should help with your concerns

Also I see some tests are missing

1. Verify syntax highlighting is applied - Check that code has highlighting classes/styles
2. Verify code is scrollable for long files - Test scroll behavior on a DAG code
3. Verify line numbers are displayed - Check line numbers are visible
4. Verify wrap works

[vatsrahul1001]

@Coding-Alchemist-Abhijay can you take a look at failing tests

[Coding-Alchemist-Abhijay]

@Coding-Alchemist-Abhijay can you take a look at failing tests

Yeah i am constantly looking at the error logs from time to time and trying to fix it !

[choo121600]

For the comments, you may mark the ones that have already been addressed as resolved.
This would help reviewers better follow the review flow ;)

[Coding-Alchemist-Abhijay]

For the comments, you may mark the ones that have already been addressed as resolved. This would help reviewers better follow the review flow ;)

Ok i will take care from next Time ..

[vatsrahul1001]

@Coding-Alchemist-Abhijay tests are failing can you have a look?

[vatsrahul1001]

@Coding-Alchemist-Abhijay tests are failing can you have a look?

@Coding-Alchemist-Abhijay how are we progressing on this?

[Coding-Alchemist-Abhijay]

@Coding-Alchemist-Abhijay tests are failing can you have a look?

@Coding-Alchemist-Abhijay how are we progressing on this?

Hi @vatsrahul1001 ,

Apologies for the delay — I was tied up with a hackathon over the past few days. I’m back now and actively working on this again. I’m consistently reviewing the CI failures and pushing fixes to address them.

Thanks for your patience, and I appreciate your continued guidance on this PR.

[vatsrahul1001]

@Coding-Alchemist-Abhijay tests are failing can you have a look?

@Coding-Alchemist-Abhijay how are we progressing on this?

Hi @vatsrahul1001 ,

Apologies for the delay — I was tied up with a hackathon over the past few days. I’m back now and actively working on this again. I’m consistently reviewing the CI failures and pushing fixes to address them.

Thanks for your patience, and I appreciate your continued guidance on this PR.

Thanks @Coding-Alchemist-Abhijay I will review soon