mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: overhaul remove-background with effects pipeline, consolidate color tools
Remove Background: - Two-phase flow: AI removes bg once, then effects adjust instantly - Blur background effect with real-time CSS preview (portrait mode) - Drop shadow effect with opacity control - Gradient backgrounds with presets, custom colors, and angle - Custom background image upload (including HEIC/HEIF) - Solid color backgrounds moved from Python to Node.js/Sharp - Effects-only API endpoint for instant re-renders without AI re-run - HEIC/HEIF input support (decoded before passing to Python/rembg) - Passport/ID photo checkbox defaults ON for People subject - Before/after slider preserved when no effects active - 15 comprehensive Playwright e2e tests Color Tools: - Consolidated 4 tools (brightness-contrast, saturation, color-channels, color-effects) into single "Adjust Colors" tool - Added exposure, temperature, tint, hue, sharpness controls - SVG filter-based live preview for all adjustments - Backward-compatible URL redirects from old tool paths Other fixes: - Favicon tool: download button instead of auto-download - Batch processing: HEIC filename extension fix - File store: processedFilename field for proper batch downloads
This commit is contained in:
Siddharth Kumar Sah
@@ -0,0 +1,272 @@
|
||||
import path from "node:path";
|
||||
import { expect, test } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Remove Background tool - comprehensive e2e tests.
|
||||
// Tests HEIC/JPG support, all background types, blur, shadow, and batch.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function fixturePath(name: string): string {
|
||||
return path.join(process.cwd(), "tests", "fixtures", name);
|
||||
}
|
||||
|
||||
async function uploadFile(page: import("@playwright/test").Page, filePath: string) {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
const dropzone = page.locator("[class*='border-dashed']").first();
|
||||
await dropzone.click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(filePath);
|
||||
await page.waitForTimeout(1000);
|
||||
}
|
||||
|
||||
/** Phase 1 helper: remove bg, wait for download button */
|
||||
async function removeBgAndWait(page: import("@playwright/test").Page) {
|
||||
await page.getByTestId("remove-background-submit").click();
|
||||
// After Phase 1, either download or download-effects button appears
|
||||
await expect(
|
||||
page
|
||||
.getByTestId("remove-background-download")
|
||||
.or(page.getByTestId("remove-background-download-effects")),
|
||||
).toBeVisible({ timeout: 120_000 });
|
||||
}
|
||||
|
||||
test.describe("Remove Background tool", () => {
|
||||
test("page loads with correct UI sections", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
|
||||
await expect(page.getByText("People")).toBeVisible();
|
||||
await expect(page.getByText("Products")).toBeVisible();
|
||||
await expect(page.getByText("General")).toBeVisible();
|
||||
await expect(page.getByText("Fast")).toBeVisible();
|
||||
await expect(page.getByText("Balanced")).toBeVisible();
|
||||
await expect(page.getByText("Best")).toBeVisible();
|
||||
|
||||
// Passport checkbox visible and checked by default
|
||||
const passportCheckbox = page.locator("input[type='checkbox']").first();
|
||||
await expect(passportCheckbox).toBeChecked();
|
||||
|
||||
// Background type buttons
|
||||
await expect(page.getByText("Transparent")).toBeVisible();
|
||||
await expect(page.getByText("Color")).toBeVisible();
|
||||
await expect(page.getByText("Gradient")).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Image" })).toBeVisible();
|
||||
|
||||
// Effects section
|
||||
await expect(page.getByText("Effects")).toBeVisible();
|
||||
});
|
||||
|
||||
test("passport checkbox defaults ON for people, OFF for other subjects", async ({
|
||||
loggedInPage: page,
|
||||
}) => {
|
||||
await page.goto("/remove-background");
|
||||
|
||||
const passportCheckbox = page.locator("input[type='checkbox']").first();
|
||||
await expect(passportCheckbox).toBeChecked();
|
||||
|
||||
await page.getByText("Products").click();
|
||||
await expect(page.getByText("Passport / ID photo")).not.toBeVisible();
|
||||
|
||||
await page.getByText("People").click();
|
||||
await expect(page.getByText("Passport / ID photo")).toBeVisible();
|
||||
await expect(passportCheckbox).toBeChecked();
|
||||
});
|
||||
|
||||
test("background type controls show/hide sub-options", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
|
||||
await page.getByRole("button", { name: "Color" }).click();
|
||||
await expect(page.locator("input[type='color']").first()).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Gradient" }).click();
|
||||
await expect(page.getByText("Direction")).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Image" }).click();
|
||||
await expect(page.getByText("Choose background image")).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Transparent" }).click();
|
||||
});
|
||||
|
||||
test("effects section expands with blur and shadow controls", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
|
||||
await page.getByText("Effects").click();
|
||||
await expect(page.getByText("Blur Background")).toBeVisible();
|
||||
await expect(page.getByText("Add Shadow")).toBeVisible();
|
||||
|
||||
await page.getByText("Blur Background").click();
|
||||
await expect(page.getByText("Intensity")).toBeVisible();
|
||||
|
||||
await page.getByText("Add Shadow").click();
|
||||
await expect(page.getByText("Opacity")).toBeVisible();
|
||||
});
|
||||
|
||||
test("JPG portrait - transparent background removal", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await removeBgAndWait(page);
|
||||
await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("HEIC portrait - processes without error", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.heic"));
|
||||
|
||||
await removeBgAndWait(page);
|
||||
await expect(page.locator("text=Background removal failed")).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("two-phase: remove bg then download with color background", async ({
|
||||
loggedInPage: page,
|
||||
}) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
// Phase 1
|
||||
await removeBgAndWait(page);
|
||||
|
||||
// Phase 2: Select color background
|
||||
await page.getByRole("button", { name: "Color" }).click();
|
||||
|
||||
// Download button should switch to effects mode
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
|
||||
// Button should show "Rendering..." briefly then return to "Download"
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("two-phase: remove bg then download with gradient", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await removeBgAndWait(page);
|
||||
|
||||
await page.getByRole("button", { name: "Gradient" }).click();
|
||||
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("two-phase: remove bg then download with blur", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await removeBgAndWait(page);
|
||||
|
||||
// Enable blur
|
||||
await page.getByText("Effects").click();
|
||||
await page.getByText("Blur Background").click();
|
||||
|
||||
// Preview should show blurred original background
|
||||
await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();
|
||||
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("two-phase: remove bg then download with shadow", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await removeBgAndWait(page);
|
||||
|
||||
await page.getByText("Effects").click();
|
||||
await page.getByText("Add Shadow").click();
|
||||
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("two-phase: remove bg then download with blur + shadow", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await removeBgAndWait(page);
|
||||
|
||||
await page.getByText("Effects").click();
|
||||
await page.getByText("Blur Background").click();
|
||||
await page.getByText("Add Shadow").click();
|
||||
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("two-phase: custom bg image + blur shows uploaded bg", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await page.getByRole("button", { name: "Image" }).click();
|
||||
const bgFileInput = page.locator("input[type='file'][accept*='image']");
|
||||
await bgFileInput.setInputFiles(fixturePath("test-200x150.png"));
|
||||
|
||||
await page.getByText("Effects").click();
|
||||
await page.getByText("Blur Background").click();
|
||||
const blurSlider = page.locator("input[type='range']").first();
|
||||
await blurSlider.fill("100");
|
||||
|
||||
await removeBgAndWait(page);
|
||||
|
||||
await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();
|
||||
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("two-phase: HEIC background image works for preview and download", async ({
|
||||
loggedInPage: page,
|
||||
}) => {
|
||||
await page.goto("/remove-background");
|
||||
await uploadFile(page, fixturePath("test-portrait.jpg"));
|
||||
|
||||
await page.getByRole("button", { name: "Image" }).click();
|
||||
const bgFileInput = page.locator("input[type='file'][accept*='image']");
|
||||
await bgFileInput.setInputFiles(fixturePath("test-portrait.heic"));
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
await removeBgAndWait(page);
|
||||
|
||||
await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible();
|
||||
|
||||
const dlBtn = page.getByTestId("remove-background-download-effects");
|
||||
await expect(dlBtn).toBeVisible();
|
||||
await dlBtn.click();
|
||||
await expect(dlBtn).not.toHaveText("Rendering...", { timeout: 30_000 });
|
||||
});
|
||||
|
||||
test("batch - JPG + HEIC processes both", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/remove-background");
|
||||
|
||||
const files = [fixturePath("test-portrait.jpg"), fixturePath("test-portrait.heic")];
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
const dropzone = page.locator("[class*='border-dashed']").first();
|
||||
await dropzone.click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(files);
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
await expect(page.getByText("Files (2)")).toBeVisible();
|
||||
await expect(page.getByText(/remove background.*2 files/i)).toBeVisible();
|
||||
|
||||
await page.getByTestId("remove-background-submit").click();
|
||||
|
||||
await expect(page.getByRole("button", { name: /download all/i })).toBeVisible({
|
||||
timeout: 180_000,
|
||||
});
|
||||
|
||||
await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user