add e2e tests

src/pages/image/png/change-colors-in-png/index.tsx

@@ -125,12 +125,12 @@ export default function ChangeColorsInPng() {
               <Box>
                 <ColorSelector
                   value={values.fromColor}
-                  onChange={(val) => updateField('fromColor', val)}
+                  onColorChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
                 />
                 <ColorSelector
                   value={values.toColor}
-                  onChange={(val) => updateField('toColor', val)}
+                  onColorChange={(val) => updateField('toColor', val)}
                   description={'With this color (to color)'}
                 />
                 <TextFieldWithDesc

src/pages/image/png/convert-jgp-to-png/convert-jgp-to-png.e2e.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+
+test.describe('Convert JPG to PNG tool', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/convert-jgp-to-png');
+  });
+
+  test('should convert jpg to png', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.jpg');
+    await fileInput?.setInputFiles(imagePath);
+
+    // Click on download
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save as').click();
+
+    // Intercept and read downloaded PNG
+    const download = await downloadPromise;
+    const downloadStream = await download.createReadStream();
+
+    const chunks = [];
+    for await (const chunk of downloadStream) {
+      chunks.push(chunk);
+    }
+    const fileContent = Buffer.concat(chunks);
+
+    expect(fileContent.length).toBeGreaterThan(0);
+
+    // Check that the first pixel is 0x808080ff
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(0x808080ff);
+  });
+
+  test('should apply transparency before converting jpg to png', async ({
+    page
+  }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.jpg');
+    await fileInput?.setInputFiles(imagePath);
+
+    // Enable transparency on color 0x808080
+    await page.getByLabel('Enable PNG Transparency').check();
+    await page.getByTestId('color-input').fill('#808080');
+
+    // Click on download
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save as').click();
+
+    // Intercept and read downloaded PNG
+    const download = await downloadPromise;
+    const downloadStream = await download.createReadStream();
+
+    const chunks = [];
+    for await (const chunk of downloadStream) {
+      chunks.push(chunk);
+    }
+    const fileContent = Buffer.concat(chunks);
+
+    expect(fileContent.length).toBeGreaterThan(0);
+
+    // Check that the first pixel is transparent
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(0);
+  });
+});

src/pages/image/png/convert-jgp-to-png/index.tsx

@@ -133,20 +133,21 @@ export default function ConvertJgpToPng() {
         compute={compute}
         getGroups={({ values, updateField }) => [
           {
-            title: 'From color and to color',
+            title: 'PNG Transparency Color',
             component: (
               <Box>
                 <CheckboxWithDesc
                   key="enableTransparency"
-                  title="PNG Transparency Color"
+                  title="Enable PNG Transparency"
                   checked={!!values.enableTransparency}
                   onChange={(value) => updateField('enableTransparency', value)}
                   description="Make the color below transparent."
                 />
                 <ColorSelector
                   value={values.color}
-                  onChange={(val) => updateField('color', val)}
+                  onColorChange={(val) => updateField('color', val)}
                   description={'With this color (to color)'}
+                  inputProps={{ 'data-testid': 'color-input' }}
                 />
                 <TextFieldWithDesc
                   value={values.similarity}

src/pages/image/png/create-transparent/index.tsx

@@ -118,7 +118,7 @@ export default function ChangeColorsInPng() {
               <Box>
                 <ColorSelector
                   value={values.fromColor}
-                  onChange={(val) => updateField('fromColor', val)}
+                  onColorChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
                 />
                 <TextFieldWithDesc