mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtter
a0556772e8
14-agent parallel test expansion covering integration, unit, E2E, E2E-Docker, cross-format matrix, adversarial, GUI navigation/tools/settings/visual/a11y/perf. - Integration: expand 23 tool test files with HEIC, stress, batch, edge cases - Unit: close coverage gaps in image-engine, stores, lib (metadata, auto-enhance, connection-store, lazy-with-retry, collage/file-store HEIC preview) - AI bridge: 141 new tests for dispatcher buffering, crash recovery, OOM/segfault - Cross-format: 794 parameterized tests (16 formats x 12 tools + no-crash matrix) - Adversarial: memory stress (50x large file), zero-byte, corrupted headers, unicode - E2E-Docker: expand 8 spec files with dimension verification, pipeline chains - GUI E2E: tool UI settings/interactions for all 47 tools, remove all test.skip, RBAC per-role verification, visual screenshot naming, cross-browser smoke tests, a11y ARIA/focus/contrast, performance budgets, 15-tool stability test - Fix: replace-color.ts tolerance=0 caused division-by-zero producing NaN pixels Total: 8,958 tests passing across 202 files. Zero failures, zero skips.
638 lines
24 KiB
TypeScript
638 lines
24 KiB
TypeScript
import path from "node:path";
|
|
import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// GUI E2E: Essential Tools (resize, crop, rotate, convert, compress)
|
|
// Covers settings UI, control interactions, processing flow, and download.
|
|
// ---------------------------------------------------------------------------
|
|
|
|
test.describe("GUI Essential Tools", () => {
|
|
// ========================================================================
|
|
// RESIZE
|
|
// ========================================================================
|
|
test.describe("Resize", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await expect(page.getByText("Resize").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
await expect(page.getByText("Settings").first()).toBeVisible();
|
|
});
|
|
|
|
test("shows custom size tab with width/height inputs after upload", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
// Custom Size tab is active by default
|
|
await expect(page.getByText("Custom Size")).toBeVisible();
|
|
await expect(page.locator("#resize-width")).toBeVisible();
|
|
await expect(page.locator("#resize-height")).toBeVisible();
|
|
});
|
|
|
|
test("tab switching between Custom Size, Scale, and Presets", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
// Switch to Scale tab
|
|
await page.getByText("Scale").click();
|
|
await expect(page.locator("#resize-scale")).toBeVisible();
|
|
// Verify percentage quick buttons
|
|
await expect(page.getByRole("button", { name: "25%" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "50%" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "75%" })).toBeVisible();
|
|
|
|
// Switch to Presets tab
|
|
await page.getByText("Presets").click();
|
|
await expect(page.getByText("Instagram").first()).toBeVisible();
|
|
|
|
// Switch back to Custom Size
|
|
await page.getByText("Custom Size").click();
|
|
await expect(page.locator("#resize-width")).toBeVisible();
|
|
});
|
|
|
|
test("fit mode buttons work in custom tab", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Fit Mode")).toBeVisible();
|
|
await expect(page.getByText("Crop to fit")).toBeVisible();
|
|
await expect(page.getByText("Fit inside")).toBeVisible();
|
|
await expect(page.getByText("Stretch")).toBeVisible();
|
|
|
|
// Click Fit inside
|
|
await page.getByText("Fit inside").click();
|
|
});
|
|
|
|
test("content-aware toggle reveals advanced options", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
// Toggle content-aware switch (label is a sibling span, not aria-label)
|
|
const toggle = page.locator("button[role='switch'][aria-checked]").first();
|
|
await toggle.click();
|
|
|
|
// Advanced options should appear
|
|
await expect(page.getByText("Resize to square")).toBeVisible();
|
|
await expect(page.getByText("Protect faces")).toBeVisible();
|
|
await expect(page.getByText("Smoothing")).toBeVisible();
|
|
await expect(page.getByText("Edge sensitivity")).toBeVisible();
|
|
});
|
|
|
|
test("submit disabled without dimensions, enabled with width", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
// Submit should be disabled without dimensions
|
|
const submitBtn = page.getByTestId("resize-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
// Set width
|
|
await page.locator("#resize-width").fill("50");
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("processes image and shows download link", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
await page.locator("#resize-width").fill("50");
|
|
await page.getByTestId("resize-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(page.getByTestId("resize-download")).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
|
|
test("scale tab processes image at 25%", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByText("Scale").click();
|
|
await page.getByRole("button", { name: "25%" }).click();
|
|
await page.getByTestId("resize-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(page.getByTestId("resize-download")).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
|
|
test("aspect ratio link button toggles", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
// The link/unlink button for aspect ratio should be visible
|
|
const linkBtn = page.locator("button[title*='aspect']").first();
|
|
if (await linkBtn.isVisible()) {
|
|
await linkBtn.click();
|
|
}
|
|
});
|
|
|
|
test("download link has correct data-testid", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
await page.locator("#resize-width").fill("50");
|
|
await page.getByTestId("resize-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
const downloadLink = page.getByTestId("resize-download");
|
|
await expect(downloadLink).toBeVisible({ timeout: 15_000 });
|
|
await expect(downloadLink).toHaveText(/Download/);
|
|
});
|
|
|
|
test("width and height inputs accept numeric values", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
await page.locator("#resize-width").fill("200");
|
|
await expect(page.locator("#resize-width")).toHaveValue("200");
|
|
});
|
|
|
|
test("scale percentage quick buttons are interactive", async ({ loggedInPage: page }) => {
|
|
await page.goto("/resize");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByText("Scale").click();
|
|
await page.getByRole("button", { name: "50%" }).click();
|
|
// Scale value should update
|
|
await expect(page.locator("#resize-scale")).toHaveValue("50");
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// CROP
|
|
// ========================================================================
|
|
test.describe("Crop", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await expect(page.getByText("Crop").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows aspect ratio presets after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Aspect Ratio")).toBeVisible();
|
|
// Verify preset buttons
|
|
await expect(page.getByRole("button", { name: "Free" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "1:1" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "4:3" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "16:9" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Custom" })).toBeVisible();
|
|
});
|
|
|
|
test("shows position and size inputs after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Position & Size")).toBeVisible();
|
|
await expect(page.locator("#crop-x")).toBeVisible();
|
|
await expect(page.locator("#crop-y")).toBeVisible();
|
|
await expect(page.locator("#crop-width")).toBeVisible();
|
|
await expect(page.locator("#crop-height")).toBeVisible();
|
|
});
|
|
|
|
test("custom aspect ratio reveals input fields", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByRole("button", { name: "Custom" }).click();
|
|
// Custom mode shows two number inputs for ratio
|
|
const customInputs = page.locator("input[type='number']");
|
|
await expect(customInputs.first()).toBeVisible();
|
|
});
|
|
|
|
test("rule of thirds grid toggle", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Rule of Thirds")).toBeVisible();
|
|
});
|
|
|
|
test("crop submit button uses data-testid", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page.getByTestId("crop-submit")).toBeVisible();
|
|
});
|
|
|
|
test("aspect ratio presets change the active button", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
|
|
// Click 1:1 aspect ratio
|
|
await page.getByRole("button", { name: "1:1" }).click();
|
|
// Click 16:9
|
|
await page.getByRole("button", { name: "16:9" }).click();
|
|
// Switch back to Free
|
|
await page.getByRole("button", { name: "Free" }).click();
|
|
});
|
|
|
|
test("processes crop and shows download", async ({ loggedInPage: page }) => {
|
|
await page.goto("/crop");
|
|
await uploadTestImage(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Set crop dimensions via number inputs
|
|
const widthInputs = page.locator("input[type='number']");
|
|
if ((await widthInputs.count()) >= 4) {
|
|
await widthInputs.nth(2).fill("50");
|
|
await widthInputs.nth(3).fill("50");
|
|
}
|
|
|
|
await page.getByTestId("crop-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(page.getByTestId("crop-download")).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
|
|
test("tall portrait image (200x4000) fits within viewport without overflow", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/crop");
|
|
|
|
const portraitPath = path.join(process.cwd(), "tests", "fixtures", "test-portrait-tall.png");
|
|
const fileChooserPromise = page.waitForEvent("filechooser");
|
|
await page.locator("[class*='border-dashed']").first().click();
|
|
const fileChooser = await fileChooserPromise;
|
|
await fileChooser.setFiles(portraitPath);
|
|
await page.waitForTimeout(1000);
|
|
|
|
const img = page.locator(".ReactCrop img");
|
|
await expect(img).toBeVisible();
|
|
|
|
const viewport = page.viewportSize();
|
|
expect(viewport).not.toBeNull();
|
|
const box = await img.boundingBox();
|
|
expect(box).not.toBeNull();
|
|
if (box && viewport) {
|
|
expect(box.y + box.height).toBeLessThanOrEqual(viewport.height);
|
|
expect(box.y).toBeGreaterThanOrEqual(0);
|
|
}
|
|
});
|
|
|
|
test("extremely tall portrait image (100x6000) fits within viewport without overflow", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/crop");
|
|
|
|
const extremePath = path.join(
|
|
process.cwd(),
|
|
"tests",
|
|
"fixtures",
|
|
"test-portrait-extreme.png",
|
|
);
|
|
const fileChooserPromise = page.waitForEvent("filechooser");
|
|
await page.locator("[class*='border-dashed']").first().click();
|
|
const fileChooser = await fileChooserPromise;
|
|
await fileChooser.setFiles(extremePath);
|
|
await page.waitForTimeout(1000);
|
|
|
|
const img = page.locator(".ReactCrop img");
|
|
await expect(img).toBeVisible();
|
|
|
|
const viewport = page.viewportSize();
|
|
expect(viewport).not.toBeNull();
|
|
const box = await img.boundingBox();
|
|
expect(box).not.toBeNull();
|
|
if (box && viewport) {
|
|
expect(box.y + box.height).toBeLessThanOrEqual(viewport.height);
|
|
expect(box.y).toBeGreaterThanOrEqual(0);
|
|
}
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// ROTATE
|
|
// ========================================================================
|
|
test.describe("Rotate", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await expect(page.getByText("Rotate").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows rotate controls after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
// Quick rotate buttons
|
|
await expect(page.getByTestId("rotate-left")).toBeVisible();
|
|
await expect(page.getByTestId("rotate-right")).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "180" })).toBeVisible();
|
|
});
|
|
|
|
test("shows flip buttons", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Flip").first()).toBeVisible();
|
|
await expect(page.getByTestId("rotate-flip-h")).toBeVisible();
|
|
await expect(page.getByTestId("rotate-flip-v")).toBeVisible();
|
|
});
|
|
|
|
test("shows straighten slider", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Straighten")).toBeVisible();
|
|
await expect(page.locator("#rotate-straighten")).toBeVisible();
|
|
});
|
|
|
|
test("angle input updates on rotate-right click", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByTestId("rotate-right").click();
|
|
await expect(page.locator("input[inputmode='numeric']")).toHaveValue("90", {
|
|
timeout: 2000,
|
|
});
|
|
});
|
|
|
|
test("submit disabled without changes, enabled after rotation", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
// Submit should be disabled with no changes
|
|
const submitBtn = page.getByTestId("rotate-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
// Rotate 90 degrees
|
|
await page.getByTestId("rotate-right").click();
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("reset all changes button appears after modification", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByTestId("rotate-right").click();
|
|
await expect(page.getByText("Reset all changes")).toBeVisible();
|
|
});
|
|
|
|
test("flip horizontal enables submit", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
const submitBtn = page.getByTestId("rotate-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
await page.getByTestId("rotate-flip-h").click();
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("flip vertical enables submit", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
const submitBtn = page.getByTestId("rotate-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
await page.getByTestId("rotate-flip-v").click();
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("180 degree button sets correct angle", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByRole("button", { name: "180" }).click();
|
|
await expect(page.locator("input[inputmode='numeric']")).toHaveValue("180", {
|
|
timeout: 2000,
|
|
});
|
|
});
|
|
|
|
test("straighten slider is interactive", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
const slider = page.locator("#rotate-straighten");
|
|
await expect(slider).toBeVisible();
|
|
await expect(slider).toHaveAttribute("type", "range");
|
|
});
|
|
|
|
test("processes rotation and shows result", async ({ loggedInPage: page }) => {
|
|
await page.goto("/rotate");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByTestId("rotate-right").click();
|
|
await page.getByTestId("rotate-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(
|
|
page
|
|
.getByRole("button", { name: /^download$/i })
|
|
.or(page.getByRole("link", { name: /download/i }))
|
|
.first(),
|
|
).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// CONVERT
|
|
// ========================================================================
|
|
test.describe("Convert", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await expect(page.getByText("Convert").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows source format and target format selector after upload", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Source Format")).toBeVisible();
|
|
await expect(page.locator("#convert-target-format")).toBeVisible();
|
|
});
|
|
|
|
test("format selector contains all output formats", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
const select = page.locator("#convert-target-format");
|
|
const options = select.locator("option");
|
|
await expect(options).toHaveCount(8); // jpg, png, webp, avif, tiff, gif, heic, heif
|
|
});
|
|
|
|
test("quality slider appears for lossy formats", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
// Select JPG (lossy)
|
|
await page.selectOption("#convert-target-format", "jpg");
|
|
await expect(page.locator("#convert-quality")).toBeVisible();
|
|
|
|
// Switch to PNG (lossless) - quality should disappear
|
|
await page.selectOption("#convert-target-format", "png");
|
|
await expect(page.locator("#convert-quality")).not.toBeVisible();
|
|
});
|
|
|
|
test("quality slider appears for WebP format", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
await page.selectOption("#convert-target-format", "webp");
|
|
await expect(page.locator("#convert-quality")).toBeVisible();
|
|
});
|
|
|
|
test("quality slider appears for AVIF format", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
await page.selectOption("#convert-target-format", "avif");
|
|
await expect(page.locator("#convert-quality")).toBeVisible();
|
|
});
|
|
|
|
test("submit button uses data-testid", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByTestId("convert-submit")).toBeVisible();
|
|
});
|
|
|
|
test("quality slider hidden for TIFF lossless format", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
await page.selectOption("#convert-target-format", "tiff");
|
|
await expect(page.locator("#convert-quality")).not.toBeVisible();
|
|
});
|
|
|
|
test("changing format resets quality slider visibility", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
// Start with JPG (lossy, shows quality)
|
|
await page.selectOption("#convert-target-format", "jpg");
|
|
await expect(page.locator("#convert-quality")).toBeVisible();
|
|
|
|
// Switch to PNG (lossless, hides quality)
|
|
await page.selectOption("#convert-target-format", "png");
|
|
await expect(page.locator("#convert-quality")).not.toBeVisible();
|
|
|
|
// Switch back to WebP (lossy, shows quality)
|
|
await page.selectOption("#convert-target-format", "webp");
|
|
await expect(page.locator("#convert-quality")).toBeVisible();
|
|
});
|
|
|
|
test("processes conversion and shows download", async ({ loggedInPage: page }) => {
|
|
await page.goto("/convert");
|
|
await uploadTestImage(page);
|
|
|
|
await page.selectOption("#convert-target-format", "webp");
|
|
await page.getByTestId("convert-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(page.getByTestId("convert-download")).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// COMPRESS
|
|
// ========================================================================
|
|
test.describe("Compress", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await expect(page.getByText("Compress").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows compression mode toggle after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText("Compression Mode")).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Quality" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Target Size" })).toBeVisible();
|
|
});
|
|
|
|
test("quality mode shows quality slider", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.locator("#compress-quality")).toBeVisible();
|
|
await expect(page.getByText("Smallest file")).toBeVisible();
|
|
await expect(page.getByText("Best quality")).toBeVisible();
|
|
});
|
|
|
|
test("target size mode shows size input", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByRole("button", { name: "Target Size" }).click();
|
|
await expect(page.locator("#compress-target-size")).toBeVisible();
|
|
});
|
|
|
|
test("quality slider is interactive", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
const slider = page.locator("#compress-quality");
|
|
await expect(slider).toBeVisible();
|
|
await expect(slider).toHaveAttribute("type", "range");
|
|
});
|
|
|
|
test("target size mode shows size input and unit", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByRole("button", { name: "Target Size" }).click();
|
|
await expect(page.locator("#compress-target-size")).toBeVisible();
|
|
});
|
|
|
|
test("submit button uses data-testid", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByTestId("compress-submit")).toBeVisible();
|
|
});
|
|
|
|
test("switching between Quality and Target Size modes", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
// Switch to Target Size
|
|
await page.getByRole("button", { name: "Target Size" }).click();
|
|
await expect(page.locator("#compress-target-size")).toBeVisible();
|
|
|
|
// Switch back to Quality
|
|
await page.getByRole("button", { name: "Quality" }).click();
|
|
await expect(page.locator("#compress-quality")).toBeVisible();
|
|
});
|
|
|
|
test("submit disabled without file, enabled with file", async ({ loggedInPage: page }) => {
|
|
await page.goto("/compress");
|
|
|
|
const submitBtn = page.getByTestId("compress-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
await uploadTestImage(page);
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("processes compression and shows download with size info", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/compress");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByTestId("compress-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(page.getByTestId("compress-download")).toBeVisible({ timeout: 15_000 });
|
|
// Verify size comparison is displayed
|
|
await expect(page.getByText("Saved:")).toBeVisible();
|
|
});
|
|
});
|
|
});
|