feat(reporting): Add hyperlink rendering for URL fields in HTML reports

[osohyun0224]

Hello, I am the contributor of the recently merged #30665 pull request. Following the merge, @pavelfeldman , the maintainer, suggested further implementation of the "rendering it in the HTML report and other reports" feature, which I have now added. I am requesting a review!

Description:
This pull request enhances the functionality introduced in previous updates by rendering URLs as clickable hyperlinks in HTML and other reports within Playwright tests. It builds on the existing capability to include URL fields in annotations by ensuring these URLs are interactive, thereby improving the accessibility and user experience of test reports.

Motivation:
Previous updates allowed URLs to be treated as hyperlinks within the description field, but with the addition of the url field, we can now more clearly and effectively display URLs in annotations. This change significantly enhances the usability and navigability of the reports, allowing users to interact directly with and easily navigate to related resources.

Changes:
Implemented hyperlink rendering in the HTML reporter and other report generators.

Expected Outcome:
With this update, URLs included in test annotations are now rendered as clickable hyperlinks. This change not only improves the interactivity of reports but also makes it easier for users to access related online resources directly from within the reports. Enhancing user engagement and providing direct access to necessary resources aligns with our goals of making test reports more informative and functional.

References:
Continues to address #30665 - "feat(test): add URL field to annotations for hyperlink display"

[dgozman]

@osohyun0224 Could you please attach a screenshot of the html report with the url annotation field rendered? Also, this change will need a test, probably in reporter-html.spec.ts file.

[osohyun0224]

@osohyun0224 Could you please attach a screenshot of the html report with the url annotation field rendered? Also, this change will need a test, probably in reporter-html.spec.ts file.

@dgozman hello :)
I'm sorry to reply your comment now. I can run the test on the url field in the reporter-html.spec.ts file and succeed.

�ScreenShots Image

I'm a novice developer,,, so I may be inexperienced. If there is anything missing, please let me know!

[github-actions]

Test results for "tests 1"

15 passed
✔️✔️✔️

Merge workflow run.

[dgozman]

@osohyun0224 In order to release v1.45, we had to revert #30665 in #31259. I'd recommend to start afresh with a new PR combining both the new API (as in #30665) and all related changes in the UI/reporters (as in this PR).

For UI changes, make sure to include a screenshot of the changed UI, not a screenshot of you running the tests. In this particular case, you probably want to run a simple test with url-enabled annotations, open the html report for it and make a screenshot of that.

Overall, this is moving in the right direction. Thank you for the contributions!

[osohyun0224]

@dgozman Thank you for reviewing my PR 🙆🏻‍♀️ Have a good day!