Added UI tests for all HTML operations

src/core/operations/FrequencyDistribution.mjs

@@ -91,7 +91,7 @@ Number of bytes not represented: ${256 - freq.bytesRepresented}
 
 <script>
     var canvas = document.getElementById("chart-area"),
-        parentRect = canvas.parentNode.getBoundingClientRect(),
+        parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
         scores = ${JSON.stringify(freq.percentages)};
 
     canvas.width = parentRect.width * 0.95;

src/core/operations/ShowOnMap.mjs

@@ -90,7 +90,20 @@ class ShowOnMap extends Operation {
             leafletUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.js",
             leafletCssUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.css";
         return `<link rel="stylesheet" href="${leafletCssUrl}" crossorigin=""/>
-<style>#output-html { white-space: normal; padding: 0; }</style>
+<style>
+    #output-text .cm-content,
+    #output-text .cm-line,
+    #output-html {
+        display: block;
+        white-space: normal;
+        padding: 0;
+        height: 100%;
+    }
+    #output-text .cm-line .cm-widgetBuffer,
+    #output-text .cm-line br {
+        display: none;
+    }
+</style>
 <div id="presentedMap" style="width: 100%; height: 100%;"></div>
 <script type="text/javascript">
 var mapscript = document.createElement('script');

src/core/operations/TranslateDateTimeFormat.mjs

@@ -24,7 +24,7 @@ class TranslateDateTimeFormat extends Operation {
         this.description = "Parses a datetime string in one format and re-writes it in another.<br><br>Run with no input to see the relevant format string examples.";
         this.infoURL = "https://momentjs.com/docs/#/parsing/string-format/";
         this.inputType = "string";
-        this.outputType = "string";
+        this.outputType = "html";
         this.args = [
             {
                 "name": "Built in formats",
@@ -58,7 +58,7 @@ class TranslateDateTimeFormat extends Operation {
     /**
      * @param {string} input
      * @param {Object[]} args
-     * @returns {string}
+     * @returns {html}
      */
     run(input, args) {
         const [inputFormat, inputTimezone, outputFormat, outputTimezone] = args.slice(1);
@@ -71,7 +71,7 @@ class TranslateDateTimeFormat extends Operation {
             return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
-        return date.tz(outputTimezone).format(outputFormat);
+        return date.tz(outputTimezone).format(outputFormat.replace(/[<>]/g, ""));
     }
 
 }

src/web/stylesheets/layout/_io.css

@@ -14,6 +14,11 @@
     margin: 0;
     background-color: transparent;
     overflow: hidden;
+    user-select: auto;
+}
+
+#output-html {
+    user-select: auto;
 }
 
 .cm-editor {

tests/browser/02_ops.js

@@ -1,5 +1,12 @@
 /**
- * Tests for operations to ensure they output something sensible where expected
+ * Tests for operations.
+ * The primary purpose for these test is to ensure that the operations
+ * output something vaguely expected (i.e. they aren't completely broken
+ * after a dependency update or changes to the UI), rather than to confirm
+ * that this output is actually accurate. Accuracy of output and testing
+ * of edge cases should be carried out in the operations test suite found
+ * in /tests/operations as this is much faster and easier to configure
+ * than the UI tests found here.
  *
  * @author n1474335 [n1474335@gmail.com]
  * @copyright Crown Copyright 2021
@@ -50,7 +57,7 @@ module.exports = {
         testOp(browser, "Blowfish Decrypt", "10884e15427dd84ec35204e9c8e921ae", "test_output", [{"option": "Hex", "string": "1234567801234567"}, {"option": "Hex", "string": "0011223344556677"}, "CBC", "Hex", "Raw"]);
         testOp(browser, "Blowfish Encrypt", "test input", "f0fadbd1d90d774f714248cf26b96410", [{"option": "Hex", "string": "1234567801234567"}, {"option": "Hex", "string": "0011223344556677"}, "CBC", "Raw", "Hex"]);
         testOp(browser, ["From Hex", "Blur Image", "To Base64"], Images.PNG_HEX, Images.PNG_BLUR_B64);
-        // testOp(browser, "Bombe", "test input", "test_output");
+        testOpHtml(browser, "Bombe", "XTSYN WAEUG EZALY NRQIM AMLZX MFUOD AWXLY LZCUZ QOQBQ JLCPK NDDRW F", "table tr:last-child td:first-child", "ECG", ["3-rotor", "LEYJVCNIXWPBQMDRTAKZGFUHOS", "BDFHJLCPRTXVZNYEIWGAKMUSQO<W", "AJDKSIRUXBLHWTMCQGZNPYFVOE<F", "ESOVPZJAYQUIRHXLNFTGKDCMWB<K", "AY BR CU DH EQ FS GL IP JX KN MO TZ VW", "HELLO CYBER CHEFU SER", 0, true]);
         testOp(browser, ["Bzip2 Compress", "To Hex"], "test input", "42 5a 68 39 31 41 59 26 53 59 cf 96 82 1d 00 00 03 91 80 40 00 02 21 4e 00 20 00 21 90 c2 10 c0 88 33 92 8e df 17 72 45 38 50 90 cf 96 82 1d");
         testOp(browser, ["From Hex", "Bzip2 Decompress"], "425a68393141592653597b0884b7000003038000008200ce00200021a647a4218013709517c5dc914e14241ec2212dc0", "test_output", [[], [true]]);
         testOp(browser, "CRC-16 Checksum", "test input", "77c7");
@@ -68,23 +75,23 @@ module.exports = {
         // testOp(browser, "CipherSaber2 Encrypt", "test input", "test_output");
         // testOp(browser, "Citrix CTX1 Decode", "test input", "test_output");
         // testOp(browser, "Citrix CTX1 Encode", "test input", "test_output");
-        // testOp(browser, "Colossus", "test input", "test_output");
+        testOpHtml(browser, "Colossus", "CTBKJUVXHZ-H3L4QV+YEZUK+SXOZ/N", "table tr:last-child td:first-child", "30", ["", "KH Pattern", "Z", "", "", "None", "Select Program", "Letter Count", "", "", "", "", "", "", false, "", "", "", "", "", "", false, "", "", "", "", "", "", false, "", false, "", false, false, false, false, false, "", false, false, "", "", 0, "", "", 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
         // testOp(browser, "Comment", "test input", "test_output");
         // testOp(browser, "Compare CTPH hashes", "test input", "test_output");
         // testOp(browser, "Compare SSDEEP hashes", "test input", "test_output");
-        // /testOp(browser, "Conditional Jump", "test input", "test_output");
+        // testOp(browser, "Conditional Jump", "test input", "test_output");
-        // testOp(browser, "Contain Image", "test input", "test_output");
+        testOpImage(browser, "Contain Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Convert area", "test input", "test_output");
-        // /testOp(browser, "Convert co-ordinate format", "test input", "test_output");
+        // testOp(browser, "Convert co-ordinate format", "test input", "test_output");
         // testOp(browser, "Convert data units", "test input", "test_output");
         // testOp(browser, "Convert distance", "test input", "test_output");
-        // testOp(browser, "Convert Image Format", "test input", "test_output");
+        testOpImage(browser, "Convert Image Format", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Convert mass", "test input", "test_output");
         // testOp(browser, "Convert speed", "test input", "test_output");
         // testOp(browser, "Convert to NATO alphabet", "test input", "test_output");
         // testOp(browser, "Count occurrences", "test input", "test_output");
-        // testOp(browser, "Cover Image", "test input", "test_output");
+        testOpImage(browser, "Cover Image", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Crop Image", "test input", "test_output");
+        testOpImage(browser, "Crop Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "DES Decrypt", "test input", "test_output");
         // testOp(browser, "DES Encrypt", "test input", "test_output");
         // testOp(browser, "DNS over HTTPS", "test input", "test_output");
@@ -96,15 +103,15 @@ module.exports = {
         // testOp(browser, "Derive EVP key", "test input", "test_output");
         // testOp(browser, "Derive PBKDF2 key", "test input", "test_output");
         // testOp(browser, "Detect File Type", "test input", "test_output");
-        // testOp(browser, "Diff", "test input", "test_output");
+        testOpHtml(browser, "Diff", "The cat sat on the mat\n\nThe mat cat on the sat", ".hl5:first-child", "mat", ["\\n\\n", "Word", true, true, false, false]);
         // testOp(browser, "Disassemble x86", "test input", "test_output");
-        // testOp(browser, "Dither Image", "test input", "test_output");
+        testOpImage(browser, "Dither Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Divide", "test input", "test_output");
         // testOp(browser, "Drop bytes", "test input", "test_output");
         // testOp(browser, "Encode NetBIOS Name", "test input", "test_output");
         // testOp(browser, "Encode text", "test input", "test_output");
         // testOp(browser, "Enigma", "test input", "test_output");
-        // testOp(browser, "Entropy", "test input", "test_output");
+        testOpHtml(browser, "Entropy", "test input", "", /Shannon entropy: 2.8464393446710154/);
         // testOp(browser, "Escape string", "test input", "test_output");
         // testOp(browser, "Escape Unicode Characters", "test input", "test_output");
         // testOp(browser, "Expand alphabet range", "test input", "test_output");
@@ -113,7 +120,8 @@ module.exports = {
         // testOp(browser, "Extract EXIF", "test input", "test_output");
         // testOp(browser, "Extract email addresses", "test input", "test_output");
         // testOp(browser, "Extract file paths", "test input", "test_output");
-        // testOp(browser, "Extract Files", "test input", "test_output");
+        testOpFile(browser, "Extract Files", "files/Hitchhikers_Guide.jpeg", ".card:last-child .collapsed", "extracted_at_0x3d38.zlib");
+        testOpFile(browser, "Extract ID3", "files/mp3example.mp3", "tr:last-child td:last-child", "Kevin MacLeod");
         // testOp(browser, "Extract IP addresses", "test input", "test_output");
         // testOp(browser, "Extract LSB", "test input", "test_output");
         // testOp(browser, "Extract MAC addresses", "test input", "test_output");
@@ -125,10 +133,10 @@ module.exports = {
         // testOp(browser, "Fletcher-32 Checksum", "test input", "test_output");
         // testOp(browser, "Fletcher-64 Checksum", "test input", "test_output");
         // testOp(browser, "Fletcher-8 Checksum", "test input", "test_output");
-        // testOp(browser, "Flip Image", "test input", "test_output");
+        testOpImage(browser, "Flip Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Fork", "test input", "test_output");
         // testOp(browser, "Format MAC addresses", "test input", "test_output");
-        // testOp(browser, "Frequency distribution", "test input", "test_output");
+        testOpHtml(browser, "Frequency distribution", "test input", "", /Number of bytes not represented: 248/);
         // testOp(browser, "From BCD", "test input", "test_output");
         // testOp(browser, "From Base", "test input", "test_output");
         // testOp(browser, "From Base32", "test input", "test_output");
@@ -151,13 +159,14 @@ module.exports = {
         // testOp(browser, "From Punycode", "test input", "test_output");
         // testOp(browser, "From Quoted Printable", "test input", "test_output");
         // testOp(browser, "From UNIX Timestamp", "test input", "test_output");
+        testOpHtml(browser, "Fuzzy Match", "test input", "b:last-child", "in", ["tein", 15, 30, 30, 15, -5, -15, -1]);
         // testOp(browser, "GOST hash", "test input", "test_output");
         // testOp(browser, "Generate all hashes", "test input", "test_output");
         // testOp(browser, "Generate HOTP", "test input", "test_output");
-        // testOp(browser, "Generate Image", "test input", "test_output");
+        testOpHtml(browser, "Generate Image", "test input", "img", "");
         // testOp(browser, "Generate Lorem Ipsum", "test input", "test_output");
         // testOp(browser, "Generate PGP Key Pair", "test input", "test_output");
-        // testOp(browser, "Generate QR Code", "test input", "test_output");
+        testOpHtml(browser, "Generate QR Code", "test input", "img", "");
         // testOp(browser, "Generate TOTP", "test input", "test_output");
         // testOp(browser, "Generate UUID", "test input", "test_output");
         // testOp(browser, "Generic Code Beautify", "test input", "test_output");
@@ -171,18 +180,18 @@ module.exports = {
         // testOp(browser, "Hamming Distance", "test input", "test_output");
         // testOp(browser, "Haversine distance", "test input", "test_output");
         // testOp(browser, "Head", "test input", "test_output");
-        // testOp(browser, "Heatmap chart", "test input", "test_output");
+        testOpHtml(browser, "Heatmap chart", "X Y\n0 1\n1 2", "svg", /X/);
-        // testOp(browser, "Hex Density chart", "test input", "test_output");
+        testOpHtml(browser, "Hex Density chart", "X Y\n0 1\n1 2", "svg", /X/);
         // testOp(browser, "Hex to Object Identifier", "test input", "test_output");
         // testOp(browser, "Hex to PEM", "test input", "test_output");
-        // testOp(browser, "Image Brightness / Contrast", "test input", "test_output");
+        testOpImage(browser, "Image Brightness / Contrast", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Image Filter", "test input", "test_output");
+        testOpImage(browser, "Image Filter", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Image Hue/Saturation/Lightness", "test input", "test_output");
+        testOpImage(browser, "Image Hue/Saturation/Lightness", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Image Opacity", "test input", "test_output");
+        testOpImage(browser, "Image Opacity", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Index of Coincidence", "test input", "test_output");
+        testOpHtml(browser, "Index of Coincidence", "test input", "", /Index of Coincidence: 0.08333333333333333/);
-        // testOp(browser, "Invert Image", "test input", "test_output");
+        testOpImage(browser, "Invert Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "JPath expression", "test input", "test_output");
-        // testOp(browser, "JSON Beautify", "test input", "test_output");
+        testOpHtml(browser, "JSON Beautify", "{a:1}", ".json-dict .json-literal", "1");
         // testOp(browser, "JSON Minify", "test input", "test_output");
         // testOp(browser, "JSON to CSV", "test input", "test_output");
         // testOp(browser, "JWT Decode", "test input", "test_output");
@@ -215,7 +224,7 @@ module.exports = {
         // testOp(browser, "Numberwang", "test input", "test_output");
         // testOp(browser, "OR", "test input", "test_output");
         // testOp(browser, "Object Identifier to Hex", "test input", "test_output");
-        // testOp(browser, "Offset checker", "test input", "test_output");
+        testOpHtml(browser, "Offset checker", "test input\n\nbest input", ".hl5", "est input");
         // testOp(browser, "Optical Character Recognition", "test input", "test_output");
         // testOp(browser, "PEM to Hex", "test input", "test_output");
         // testOp(browser, "PGP Decrypt", "test input", "test_output");
@@ -226,21 +235,22 @@ module.exports = {
         // testOp(browser, "PHP Deserialize", "test input", "test_output");
         // testOp(browser, "Pad lines", "test input", "test_output");
         // testOp(browser, "Parse ASN.1 hex string", "test input", "test_output");
-        // testOp(browser, "Parse colour code", "test input", "test_output");
+        testOpHtml(browser, "Parse colour code", "#000", ".colorpicker-preview", "rgb(0, 0, 0)");
-        // testOp(browser, "Parse DateTime", "test input", "test_output");
+        testOpHtml(browser, "Parse DateTime", "01/12/2000 13:00:00", "", /Date: Friday 1st December 2000/);
         // testOp(browser, "Parse IP range", "test input", "test_output");
-        // testOp(browser, "Parse IPv4 header", "test input", "test_output");
+        testOpHtml(browser, "Parse IPv4 header", "45 c0 00 c4 02 89 00 00 ff 11　1e 8c c0 a8 0c 01 c0 a8 0c 02", "tr:last-child td:last-child", "192.168.12.2");
         // testOp(browser, "Parse IPv6 address", "test input", "test_output");
         // testOp(browser, "Parse ObjectID timestamp", "test input", "test_output");
         // testOp(browser, "Parse QR Code", "test input", "test_output");
         // testOp(browser, "Parse SSH Host Key", "test input", "test_output");
+        testOpHtml(browser, "Parse TCP", "c2eb0050a138132e70dc9fb9501804025ea70000", "tr:nth-of-type(2) td:last-child", "49899");
         // testOp(browser, "Parse TLV", "test input", "test_output");
-        // testOp(browser, "Parse UDP", "test input", "test_output");
+        testOpHtml(browser, "Parse UDP", "04 89 00 35 00 2c 01 01", "tr:last-child td:last-child", "0x0101");
         // testOp(browser, "Parse UNIX file permissions", "test input", "test_output");
         // testOp(browser, "Parse URI", "test input", "test_output");
         // testOp(browser, "Parse User Agent", "test input", "test_output");
         // testOp(browser, "Parse X.509 certificate", "test input", "test_output");
-        // testOp(browser, "Play Media", "test input", "test_output");
+        testOpFile(browser, "Play Media", "files/mp3example.mp3", "audio", "");
         // testOp(browser, "Power Set", "test input", "test_output");
         // testOp(browser, "Protobuf Decode", "test input", "test_output");
         // testOp(browser, "Pseudo-Random Number Generator", "test input", "test_output");
@@ -254,22 +264,22 @@ module.exports = {
         // testOp(browser, "ROT8000", "test input", "test_output");
         // testOp(browser, "Rail Fence Cipher Decode", "test input", "test_output");
         // testOp(browser, "Rail Fence Cipher Encode", "test input", "test_output");
-        // testOp(browser, "Randomize Colour Palette", "test input", "test_output");
+        testOpImage(browser, "Randomize Colour Palette", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Raw Deflate", "test input", "test_output");
         // testOp(browser, "Raw Inflate", "test input", "test_output");
         // testOp(browser, "Register", "test input", "test_output");
-        // testOp(browser, "Regular expression", "test input", "test_output");
+        testOpHtml(browser, "Regular expression", "The cat sat on the mat", ".hl2:last-child", "mat", ["User defined", ".at", true, true, false, false, false, false, "Highlight matches"]);
         // testOp(browser, "Remove Diacritics", "test input", "test_output");
         // testOp(browser, "Remove EXIF", "test input", "test_output");
         // testOp(browser, "Remove line numbers", "test input", "test_output");
         // testOp(browser, "Remove null bytes", "test input", "test_output");
         // testOp(browser, "Remove whitespace", "test input", "test_output");
-        // testOp(browser, "Render Image", "test input", "test_output");
+        testOpImage(browser, "Render Image", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Render Markdown", "test input", "test_output");
+        testOpHtml(browser, "Render Markdown", "# test input", "h1", "test input");
-        // testOp(browser, "Resize Image", "test input", "test_output");
+        testOpImage(browser, "Resize Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Return", "test input", "test_output");
         // testOp(browser, "Reverse", "test input", "test_output");
-        // testOp(browser, "Rotate Image", "test input", "test_output");
+        testOpImage(browser, "Rotate Image", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Rotate left", "test input", "test_output");
         // testOp(browser, "Rotate right", "test input", "test_output");
         // testOp(browser, "SHA0", "test input", "test_output");
@@ -281,21 +291,21 @@ module.exports = {
         // testOp(browser, "SSDEEP", "test input", "test_output");
         // testOp(browser, "SUB", "test input", "test_output");
         // testOp(browser, "Scan for Embedded Files", "test input", "test_output");
-        // testOp(browser, "Scatter chart", "test input", "test_output");
+        testOpHtml(browser, "Scatter chart", "a b\n1 2", "svg", /a/);
         // testOp(browser, "Scrypt", "test input", "test_output");
-        // testOp(browser, "Series chart", "test input", "test_output");
+        testOpHtml(browser, "Series chart", "1 2 3\n4 5 6", "svg", /3/);
         // testOp(browser, "Set Difference", "test input", "test_output");
         // testOp(browser, "Set Intersection", "test input", "test_output");
         // testOp(browser, "Set Union", "test input", "test_output");
         // testOp(browser, "Shake", "test input", "test_output");
-        // testOp(browser, "Sharpen Image", "test input", "test_output");
+        testOpImage(browser, "Sharpen Image", "files/Hitchhikers_Guide.jpeg");
-        // testOp(browser, "Show Base64 offsets", "test input", "test_output");
+        testOpHtml(browser, "Show Base64 offsets", "test input", "span:nth-last-of-type(2)", "B");
-        // testOp(browser, "Show on map", "test input", "test_output");
+        testOpHtml(browser, "Show on map", "51.5007° N, 0.1246° W", "#presentedMap .leaflet-popup-content", "51.5007,-0.1246");
         // testOp(browser, "Sleep", "test input", "test_output");
         // testOp(browser, "Snefru", "test input", "test_output");
         // testOp(browser, "Sort", "test input", "test_output");
         // testOp(browser, "Split", "test input", "test_output");
-        // testOp(browser, "Split Colour Channels", "test input", "test_output");
+        // testOpImage(browser, "Split Colour Channels", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Standard Deviation", "test input", "test_output");
         // testOp(browser, "Streebog", "test input", "test_output");
         // testOp(browser, "Strings", "test input", "test_output");
@@ -307,12 +317,12 @@ module.exports = {
         // testOp(browser, "Sum", "test input", "test_output");
         // testOp(browser, "Swap endianness", "test input", "test_output");
         // testOp(browser, "Symmetric Difference", "test input", "test_output");
-        // testOp(browser, "Syntax highlighter", "test input", "test_output");
+        testOpHtml(browser, "Syntax highlighter", "var a = [4,5,6]", ".hljs-selector-attr", "[4,5,6]");
         // testOp(browser, "TCP/IP Checksum", "test input", "test_output");
         // testOp(browser, "Tail", "test input", "test_output");
         // testOp(browser, "Take bytes", "test input", "test_output");
         testOp(browser, "Tar", "test input", /^file\.txt\x00{92}/);
-        // testOp(browser, "Text Encoding Brute Force", "test input", "test_output");
+        testOpHtml(browser, "Text Encoding Brute Force", "test input", "tr:nth-of-type(4) td:last-child", /t\u2400e\u2400s\u2400t\u2400/);
         // testOp(browser, "To BCD", "test input", "test_output");
         // testOp(browser, "To Base", "test input", "test_output");
         // testOp(browser, "To Base32", "test input", "test_output");
@@ -338,7 +348,7 @@ module.exports = {
         // testOp(browser, "To Punycode", "test input", "test_output");
         // testOp(browser, "To Quoted Printable", "test input", "test_output");
         // testOp(browser, "To Snake case", "test input", "test_output");
-        // testOp(browser, "To Table", "test input", "test_output");
+        testOpHtml(browser, "To Table", "a,b,c\n1,2,3", "", /| a | b | c |/);
         // testOp(browser, "To UNIX Timestamp", "test input", "test_output");
         // testOp(browser, "To Upper case", "test input", "test_output");
         // testOp(browser, "Translate DateTime Format", "test input", "test_output");
@@ -351,11 +361,11 @@ module.exports = {
         // testOp(browser, "Unescape string", "test input", "test_output");
         // testOp(browser, "Unescape Unicode Characters", "test input", "test_output");
         // testOp(browser, "Unique", "test input", "test_output");
-        // testOp(browser, "Untar", "test input", "test_output");
+        testOpHtml(browser, ["Tar", "Untar"], "test input", ".float-right", /10 bytes/);
         testOpHtml(browser, ["Zip", "Unzip"], "test input", "#files span.float-right", /10 bytes/);
         // testOp(browser, "VarInt Decode", "test input", "test_output");
         // testOp(browser, "VarInt Encode", "test input", "test_output");
-        // testOp(browser, "View Bit Plane", "test input", "test_output");
+        testOpImage(browser, "View Bit Plane", "files/Hitchhikers_Guide.jpeg");
         // testOp(browser, "Vigenère Decode", "test input", "test_output");
         // testOp(browser, "Vigenère Encode", "test input", "test_output");
         testOp(browser, "Whirlpool", "test input", "8a0ee6885ba241353d17cbbe5f06538a7f04c8c955d376c20d6233fd4dd41aaffd13291447090ce781b5f940da266ed6d02cf8b79d4867065d10bdfc04166f38");
@@ -411,7 +421,7 @@ function testOp(browser, opName, input, output, args=[]) {
 }
 
 /** @function
- * Clears the current recipe and tests a new operation.
+ * Clears the current recipe and tests a new operation with HTML output.
  *
  * @param {Browser} browser - Nightwatch client
  * @param {string|Array<string>} opName - name of operation to be tested array for multiple ops
@@ -429,3 +439,51 @@ function testOpHtml(browser, opName, input, cssSelector, output, args=[]) {
         browser.expect.element("#output-html " + cssSelector).text.that.matches(output);
     }
 }
+
+/** @function
+ * Clears the current recipe and tests a new Image-based operation.
+ *
+ * @param {Browser} browser - Nightwatch client
+ * @param {string|Array<string>} opName - name of operation to be tested array for multiple ops
+ * @param {string} filename - filename of image file from samples directory
+ * @param {Array<string>|Array<Array<string>>} args - arguments, nested if multiple ops
+ */
+function testOpImage(browser, opName, filename, args) {
+    browser.perform(function() {
+        console.log(`Current test: ${opName}`);
+    });
+    utils.loadRecipe(browser, opName, "", args);
+    utils.uploadFile(browser, filename);
+    browser.waitForElementVisible("#stale-indicator", 5000);
+    utils.bake(browser);
+
+    browser
+        .waitForElementVisible("#output-html img")
+        .expect.element("#output-html img").to.have.css("width").which.matches(/^[^0]\d*px/);
+}
+
+/** @function
+ * Clears the current recipe and tests a new File-based operation.
+ *
+ * @param {Browser} browser - Nightwatch client
+ * @param {string|Array<string>} opName - name of operation to be tested array for multiple ops
+ * @param {string} filename - filename of file from samples directory
+ * @param {string} cssSelector - CSS selector for HTML output
+ * @param {string} output - expected output
+ * @param {Array<string>|Array<Array<string>>} args - arguments, nested if multiple ops
+ */
+function testOpFile(browser, opName, filename, cssSelector, output, args) {
+    browser.perform(function() {
+        console.log(`Current test: ${opName}`);
+    });
+    utils.loadRecipe(browser, opName, "", args);
+    utils.uploadFile(browser, filename);
+    browser.pause(100).waitForElementVisible("#stale-indicator", 5000);
+    utils.bake(browser);
+
+    if (typeof output === "string") {
+        browser.expect.element("#output-html " + cssSelector).text.that.equals(output);
+    } else if (output instanceof RegExp) {
+        browser.expect.element("#output-html " + cssSelector).text.that.matches(output);
+    }
+}