[Good First Issue] Add data-testid attributes to key UI elements

[magic-peach]

Overview

Add data-testid attributes to key UI elements to make the codebase ready for automated testing with Playwright or React Testing Library.

Task

Add data-testid to these elements across the component files:

Element	data-testid value
File upload zone	file-upload-zone
Export button	export-button
Progress bar	export-progress
Download button	download-button
Reset button	reset-button
Quality slider	quality-slider
Speed slider	speed-slider

Acceptance Criteria

• All listed elements have data-testid attributes
• No visual or functional changes

Good first issue — estimated effort: 20 minutes

[TanviHanda]

Hi @magic-peach , I reviewed the issue and would like to work on it.

I can add the required data-testid attributes to the specified UI elements without affecting the existing UI or functionality.

Could you please assign this issue to me?

[YAM1234-B]

Hi @magic-peach, I’m interested in working on this issue as part of GSSoC'26. I have experience with React and can add the required data-testid attributes to the UI elements as specified. Could you please assign this to me?

[suryanshsingh-creator]

Hello! I am a GSSoC '26 contributor and I'm very interested in working on this issue. I have reviewed the issue and am ready to implement a standardized structure. Could you please assign this issue to me.

[bsreeharrshine]

Hi @magic-peach
I would like to work on this issue under GSSoC ’26.
Please assign this issue to me.

[devyani-8085]

Hi @magic-peach 👋
I'm a GSSoC 2026 contributor and I'd love to work on this issue!
My approach is like:
I'll go through the component files and add data-testid attributes to all 7 listed elements (file-upload-zone, export-button, export-progress, download-button, reset-button, quality-slider, speed-slider)
I'll make sure all acceptance criteria are met before submitting the PR
Could you please assign this issue to me??

[Srilakshmi-Bathula]

/assign gssoc

Hi @magic-peach, I'm a 2nd-year CSE student and I'm very interested in helping make the codebase testing-ready.

I have a strong handle on React components and I can quickly add the data-testid attributes to all 7 UI elements specified (from the file upload zone to the speed slider). I'll ensure that the implementation strictly follows the acceptance criteria with zero visual or functional changes to the UI.

I can submit the PR within the hour. Please assign this to me! #GSSOC26

[periakshaya]

hey @magic-peach ,I’d like to work on this issue. I’ll add the required data-testid attributes to the specified UI elements to improve automated testing support without affecting functionality or styling.

[sandeepparupoodi]

Hi @magic-peach,

I want to work on this issue as part of GSSoC26.
I am a beginner contributor, and this issue looks suitable for me because it is a small testing-related task. I will add the required 'data-testid' attributes to the listed UI elements without changing the UI design or existing functionality.

Planned changes:
Add 'data-testid="file-upload-zone"' to the file upload zone
Add 'data-testid="export-button"' to the export button
Add 'data-testid="export-progress"' to the export progress bar
Add 'data-testid="download-button"' to the download button
Add 'data-testid="reset-button"' to the reset button
Add 'data-testid="quality-slider"' to the quality slider
Add 'data-testid="speed-slider"' to the speed slider

Please assign this issue to me.