cyberchef/tests/browser/app.spec.mjs
consigcody94 1ac3190dae Modernize CyberChef build system, dependencies, UI, and testing
Build System:
- Replace Grunt with npm scripts and Node.js helper scripts
- Remove worker-loader, use native Webpack 5 worker syntax
- Add Rspack config as faster alternative bundler (5-23x faster)
- Replace platform-specific sed postinstall hacks with cross-platform Node.js script
- Update browser targets from Chrome 50/Firefox 38 to Chrome 80/Firefox 78/Safari 14
- Fix import assertions (assert -> with) for Node 24 compatibility

Dependencies:
- Replace deprecated crypto-js with native RC4 implementation and @noble/hashes EVP KDF
- Replace blakejs with @noble/hashes/blake2b and blake2s
- Add @noble/hashes for MD5, SHA1/2/3, RIPEMD160, HMAC, HKDF (crypto-api fallback for legacy algos)
- Replace lodash with native CaseConvert.mjs utility
- Replace moment.js in web layer with date-fns
- Add date-fns and date-fns-tz dependencies
- Remove jquery, snackbarjs, arrive, bootstrap-colorpicker, bootstrap-material-design, popper.js v1, lodash, blakejs, crypto-js

UI Modernization:
- Upgrade Bootstrap 4.6.2 to Bootstrap 5.3 (87 data attribute renames)
- Remove bootstrap-material-design (unmaintained)
- Remove jQuery dependency entirely (38 calls replaced with native DOM + BS5 JS API)
- Add custom Snackbar.mjs notification utility (replaces snackbarjs)
- Replace bootstrap-colorpicker with native HTML color input

Testing:
- Add Vitest config and adapter for running existing TestRegister tests
- Add Playwright config and E2E test replacing Nightwatch
- Update CI workflows to use npm scripts and Playwright
2026-03-23 13:59:24 -04:00

76 lines
2.6 KiB
JavaScript

/**
* Playwright E2E tests for CyberChef.
* Replaces Nightwatch browser tests.
*
* @author CyberChef Modernization
* @copyright Crown Copyright 2023
* @license Apache-2.0
*/
import { test, expect } from "@playwright/test";
test.describe("CyberChef App", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/");
// Wait for the app to fully load
await page.waitForSelector("#preloader", { state: "hidden", timeout: 30000 });
});
test("should load the app", async ({ page }) => {
await expect(page).toHaveTitle(/CyberChef/);
});
test("should have operations panel", async ({ page }) => {
const opsPanel = page.locator("#operations");
await expect(opsPanel).toBeVisible();
});
test("should have input and output panels", async ({ page }) => {
await expect(page.locator("#input")).toBeVisible();
await expect(page.locator("#output")).toBeVisible();
});
test("should search for operations", async ({ page }) => {
const searchBox = page.locator("#search");
await searchBox.fill("Base64");
// Wait for search results
await page.waitForTimeout(500);
const results = page.locator("#search-results .op-title");
await expect(results.first()).toBeVisible();
});
test("should encode to Base64", async ({ page }) => {
// Type input
const inputEditor = page.locator("#input-text .cm-content");
await inputEditor.click();
await page.keyboard.type("Hello, World!");
// Search and add the operation
const searchBox = page.locator("#search");
await searchBox.fill("To Base64");
await page.waitForTimeout(500);
// Click on the operation to add it
const toBase64Op = page.locator("#search-results .op-title").filter({ hasText: "To Base64" });
await toBase64Op.first().dblclick();
// Wait for bake
await page.waitForTimeout(2000);
// Check output
const outputEditor = page.locator("#output-text .cm-content");
await expect(outputEditor).toContainText("SGVsbG8sIFdvcmxkIQ==");
});
test("should handle recipe URL loading", async ({ page }) => {
// Navigate to a recipe URL
await page.goto("/#recipe=To_Base64('A-Za-z0-9%2B/%3D')&input=SGVsbG8");
await page.waitForSelector("#preloader", { state: "hidden", timeout: 30000 });
await page.waitForTimeout(2000);
// Verify the recipe loaded
const recipeList = page.locator("#rec-list .op-title");
await expect(recipeList.first()).toContainText("To Base64");
});
});