Implement E2E UI tests for the website critical flows

[devilkiller-ag]

Description

Add E2E tests for the website UI, so that we can able to test critical user flows or actions, that will be required to create good UX experience.

Tasks to complete in this issue

• Create a setup for the E2E testing inside the website
• Add E2E tests for the critical flows of the website
• Add workflow to test E2E tests in each PR

Tech Stack required

Typescript, Node js, Testing, Github Actions

Difficulty

Medium/Hard

Duration of the project

350+ hours

Mentor assigned to this project

@sambhavgupta0705

Contribution guidelines

• We have added this issue under GSoC, hence contributor will be assigned as per the proposal basis. Please avoid asking to assign this issue to yourself.
• The proposal format will be the same as we have specified in the community repo.

[PraverBajaj]

Hi, can you please elaborate and explain how I can get started with this issue?
What specific critical flows are you referring to?

[PayalKumari10]

Hey @sambhavgupta0705 ,

I'm interested in contributing to this E2E testing project for the AsyncAPI website under GSoC 2025.

Could you please provide more details on the critical user flows that need testing? Also, is there any existing setup or preferred framework for E2E tests, or should we define it from scratch?

Looking forward to your guidance on getting started! 🚀

[chandkaurati]

@devilkiller-ag

I’m interested in working on this project for GSoC.
Setting up E2E tests to improve the website’s user experience sounds exciting, and I believe it’s a great opportunity to contribute and learn.
I’ve gone through the requirements and started drafting my proposal.

I noticed the tech stack includes TypeScript, Node.js, Testing, and GitHub Actions.

I’d love to know if there are any preferred E2E testing tools (like Cypress or Playwright) and details on how the current tech stack is structured to integrate testing effectively.

It would also be helpful if you could share more information about the critical user flows to prioritize and any guidelines to follow.

Looking forward to your guidance and further discussion!

[NalinDalal]

Hey @sambhavgupta0705 I would love to work on this issue, i have previously work with jest, node.js and typescript,
looking forward to connect

[sambhavgupta0705]

Hello everyone!!
I will add all the requirements and prerequisite for this project by the end of this week,till the time you can start researching about E2E testing and learn how other projects implement it

[chandkaurati]

@sambhavgupta0705 okey

[chandkaurati]

Hey @sambhavgupta0705

I would love to discuss more about this project. I’m particularly interested in understanding which testing tool you think would be the best fit for this setup. From my side, I believe Playwright could be a great option for E2E testing due to its reliability, cross-browser support, and built-in test runner.

Could you please share your thoughts on this? Looking forward to your response.

[shivasankaran18]

hello @sambhavgupta0705 .. I would like to work on this issue as a part of GSOC 2025.. I am someone who have been into open source for a while and I have gone through the project requirements and it very well aligns with my tech stack .. I would love to know which E2E testing tool is supposed to be used so that I can start contributing to the project .

[sambhavgupta0705]

Hey Everyone!!
You can drop your approach in the comment section only
The selection will be proposal based and will be sharing the expectations from the mentee and project by the EOD and what tasks you need to work on

[shivasankaran18]

ok @sambhavgupta0705 .. waiting and eager to contribute after you share more about project details

[sambhavgupta0705]

For the project we just expect the mentee to have a good understanding of the project and what needs to be done to achieve the goal which should be reflected in the proposal.

The selection will be based on proposal + communication + contribution to the organisatiion,
Please avoid spamming the issues and PRs

[sudarsan2k5]

Hello @sambhavgupta0705,

To better understand this project, I have set up E2E testing inside the website, added E2E tests for its critical flows, and implemented a workflow to run these tests in each PR.

I have created a demo where I tested the Concepts Page using Cypress. The test navigates to the page, verifies its existence, checks if button clicks work as expected, tests the feedback form, and then returns to the home page.

I’d like to know more about the critical flows of the website that we should prioritize for testing. Could you provide some guidance on this?

Here are the changes I've made. Please have a look and share any suggestions on how we can further improve.

master...sudarsan2k5:async-website:cypress_integration

Demo Video:-

Screen.Recording.2025-03-04.at.1.28.24.PM.mov

[ShrutiChhikara]

Hi @sambhavgupta0705 ,
I’m interested in contributing to this issue as part of my GSoC proposal. To implement E2E testing for the website, we can approach this by selecting a suitable testing framework that best aligns with the project’s tech stack and requirements.
Choosing a Testing Framework
For E2E testing, we have several options:
Cypress: Easy to set up and provides great debugging tools but runs only in a browser environment, limiting backend interaction and often leading to flaky tests.
Selenium: A powerful cross-browser testing tool but requires more setup and is slower compared to modern alternatives.
Jest: Primarily a unit testing framework, not ideal for full-fledged E2E testing.
Playwright (Recommended): Supports multiple browsers and languages, offers great debugging tools, handles complex user interactions, runs efficiently in headless mode, and allows parallel execution.
Why Playwright?
Playwright is well-suited for this project because:

1. It supports Chromium, Firefox, and WebKit, ensuring cross-browser compatibility.
2. It allows testing of multiple user interactions, including authentication, navigation, and form handling.
3. It integrates seamlessly with CI/CD pipelines using GitHub Actions.
4. Parallel execution in pipelines optimizes time and resource usage.
5. It is fully open-source, unlike Cypress, which requires a paid plan for cloud dashboard testing. Playwright allows testing in all environments without restrictions.
6. It handles flaky tests better than any other framework.
7. The Codegen feature in Playwright makes test writing more efficient by automatically generating scripts.
   Proposed Implementation Approach
8. Proof of Concept (POC)
   • Set up Playwright in the project and configure the testing environment.
   • Implement a sample test case for a critical flow, such as a key homepage feature.
9. Defining Critical User Flows
   • Identify key functionalities like authentication, forms, and CRUD operations.
   • Write test cases to ensure stability and reliability.
10. Expanding Test Coverage
    • Extend the POC approach to cover all major user flows.
    • Implement comprehensive tests with assertions for expected outcomes.
11. CI/CD Integration
    • Configure GitHub Actions to run E2E tests on every PR.
    • Ensure test reports are generated for debugging failures.

I have already set up and configured Playwright in the repository and implemented tests for a few features on the homepage. This serves as an initial POC to validate the approach.
The homepage test includes test for AsyncAPI website's homepage. The tests verify the functionality of the navigation bar elements, the quick search feature, and the "Want to Sponsor Us?" section. Each test ensures that the respective elements are present, clickable, and navigate to the correct URLs.
Here’s the link to the added changes: [(https://github.com/asyncapi/website/compare/master...ShrutiChhikara:website:master)]

Screen.Recording.2025-03-10.at.12.32.39.AM.mp4

Next Steps:

• Expand the coverage to all essential user flows.
• Fine-tune the tests to ensure robustness.
  Would love to hear your feedback on whether this approach aligns with the project’s vision. Am I heading in the right direction? If this works for you, I will proceed with submitting a formal proposal.
  Looking forward to your response!
  Thanks!