add e2e tests for all image tools

src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts

@@ -0,0 +1,41 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+
+test.describe('Change colors in png', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/change-colors-in-png');
+  });
+
+  test('should change pixel color', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.png');
+    await fileInput?.setInputFiles(imagePath);
+
+    await page.getByTestId('from-color-input').fill('#FF0000');
+    await page.getByTestId('to-color-input').fill('#0000FF');
+
+    // 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(0x0000ffff);
+  });
+});

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

@@ -127,11 +127,13 @@ export default function ChangeColorsInPng() {
                   value={values.fromColor}
                   onColorChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
+                  inputProps={{ 'data-testid': 'from-color-input' }}
                 />
                 <ColorSelector
                   value={values.toColor}
                   onColorChange={(val) => updateField('toColor', val)}
                   description={'With this color (to color)'}
+                  inputProps={{ 'data-testid': 'to-color-input' }}
                 />
                 <TextFieldWithDesc
                   value={values.similarity}

src/pages/image/png/create-transparent/create-transparent.e2e.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+
+test.describe('Create transparent PNG', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/create-transparent');
+  });
+
+  test('should make png color transparent', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.png');
+    await fileInput?.setInputFiles(imagePath);
+
+    await page.getByTestId('color-input').fill('#FF0000');
+
+    // 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/create-transparent/index.tsx

@@ -120,6 +120,7 @@ export default function ChangeColorsInPng() {
                   value={values.fromColor}
                   onColorChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
+                  inputProps={{ 'data-testid': 'color-input' }}
                 />
                 <TextFieldWithDesc
                   value={values.similarity}