feat: screenshot api and tests

Author: abose

src/index.html

@@ -27,7 +27,7 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy"
           content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: asset: https://asset.localhost localhost:* ws://localhost:* ws://127.0.0.1:* https://storage.googleapis.com https://platform.twitter.com https://buttons.github.io https://unpkg.com/@aicore/ https://www.googletagmanager.com;
-           img-src * data: localhost:* asset: https://asset.localhost ;
+           img-src * data: blob: localhost:* asset: https://asset.localhost ;
            media-src * data: localhost:* asset: https://asset.localhost ;
            font-src * data: localhost:* asset: https://asset.localhost ;
            frame-src * localhost:* asset: https://asset.localhost ;

src/phoenix/shell.js

@@ -147,6 +147,41 @@ Phoenix.libs = {
 // global API is only usable/stable after App init
 Phoenix.globalAPI = {};
 
+async function _capturePageBinary(rect) {
+    if (!Phoenix.isNativeApp) {
+        throw new Error("Screenshot capture is not supported in browsers");
+    }
+    if (rect !== undefined) {
+        if (rect.x === undefined || rect.y === undefined ||
+            rect.width === undefined || rect.height === undefined) {
+            throw new Error("rect must include all fields: x, y, width, height");
+        }
+        if (typeof rect.x !== 'number' || typeof rect.y !== 'number' ||
+            typeof rect.width !== 'number' || typeof rect.height !== 'number') {
+            throw new Error("rect fields x, y, width, height must be numbers");
+        }
+        if (rect.x < 0 || rect.y < 0 || rect.width < 0 || rect.height < 0) {
+            throw new Error("rect fields x, y, width, height must be non-negative");
+        }
+        if (rect.width <= 0 || rect.height <= 0) {
+            throw new Error("rect width and height must be greater than 0");
+        }
+        if (rect.x + rect.width > window.innerWidth) {
+            throw new Error("rect x + width exceeds window innerWidth");
+        }
+        if (rect.y + rect.height > window.innerHeight) {
+            throw new Error("rect y + height exceeds window innerHeight");
+        }
+    }
+    if (window.__TAURI__) {
+        const bytes = await window.__TAURI__.invoke('capture_page', { rect });
+        return new Uint8Array(bytes);
+    }
+    if (window.__ELECTRON__) {
+        return window.electronAPI.capturePage(rect);
+    }
+}
+
 Phoenix.app = {
     getNodeState: function (cbfn){
         cbfn(new Error('Node cannot be run in phoenix browser mode'));
@@ -794,6 +829,28 @@ Phoenix.app = {
             return window.electronAPI.onWindowEvent(eventName, callback);
         }
         return () => {}; // No-op for unsupported platforms
+    },
+    screenShotBinary: function (rect) {
+        return _capturePageBinary(rect);
+    },
+    screenShotToBlob: async function (rect) {
+        const bytes = await _capturePageBinary(rect);
+        return new Blob([bytes], { type: "image/png" });
+    },
+    screenShotToPNGFile: async function (filePathToSave, rect) {
+        if (!filePathToSave || typeof filePathToSave !== 'string') {
+            throw new Error("filePathToSave must be a non-empty string");
+        }
+        const bytes = await _capturePageBinary(rect);
+        return new Promise((resolve, reject) => {
+            fs.writeFile(filePathToSave, bytes.buffer, 'binary', (err) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve();
+                }
+            });
+        });
     }
 };
 

test/spec/Native-platform-test.js

@@ -390,6 +390,162 @@ define(function (require, exports, module) {
             });
         });
 
+        describe("Screenshot Capture API Tests", function () {
+            const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10]; // PNG magic bytes
+
+            function isPNG(bytes) {
+                if (bytes.length < 8) {
+                    return false;
+                }
+                for (let i = 0; i < PNG_SIGNATURE.length; i++) {
+                    if (bytes[i] !== PNG_SIGNATURE[i]) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+
+            describe("screenShotBinary", function () {
+                it("Should return a Uint8Array of PNG data for full page capture", async function () {
+                    const bytes = await Phoenix.app.screenShotBinary();
+                    expect(bytes instanceof Uint8Array).toBeTrue();
+                    expect(bytes.length).toBeGreaterThan(0);
+                    expect(isPNG(bytes)).withContext("Result should be valid PNG data").toBeTrue();
+                });
+
+                it("Should return a Uint8Array of PNG data for bounded capture", async function () {
+                    const bytes = await Phoenix.app.screenShotBinary({x: 0, y: 0, width: 100, height: 100});
+                    expect(bytes instanceof Uint8Array).toBeTrue();
+                    expect(bytes.length).toBeGreaterThan(0);
+                    expect(isPNG(bytes)).withContext("Result should be valid PNG data").toBeTrue();
+                });
+
+                it("Should throw when rect is missing required fields", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: 0, y: 0})
+                    ).toBeRejectedWithError("rect must include all fields: x, y, width, height");
+                });
+
+                it("Should throw when rect fields are not numbers", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: "0", y: 0, width: 100, height: 100})
+                    ).toBeRejectedWithError("rect fields x, y, width, height must be numbers");
+                });
+
+                it("Should throw when rect fields are negative", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: -1, y: 0, width: 100, height: 100})
+                    ).toBeRejectedWithError("rect fields x, y, width, height must be non-negative");
+                });
+
+                it("Should throw when rect width is 0", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: 0, y: 0, width: 0, height: 100})
+                    ).toBeRejectedWithError("rect width and height must be greater than 0");
+                });
+
+                it("Should throw when rect height is 0", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: 0, y: 0, width: 100, height: 0})
+                    ).toBeRejectedWithError("rect width and height must be greater than 0");
+                });
+
+                it("Should throw when rect exceeds window width bounds", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: 0, y: 0, width: 999999, height: 100})
+                    ).toBeRejectedWithError("rect x + width exceeds window innerWidth");
+                });
+
+                it("Should throw when rect exceeds window height bounds", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotBinary({x: 0, y: 0, width: 100, height: 999999})
+                    ).toBeRejectedWithError("rect y + height exceeds window innerHeight");
+                });
+            });
+
+            describe("screenShotToBlob", function () {
+                it("Should return a Blob of type image/png for full page capture", async function () {
+                    const blob = await Phoenix.app.screenShotToBlob();
+                    expect(blob instanceof Blob).toBeTrue();
+                    expect(blob.type).toEqual("image/png");
+                    expect(blob.size).toBeGreaterThan(0);
+                });
+
+                it("Should return a Blob of type image/png for bounded capture", async function () {
+                    const blob = await Phoenix.app.screenShotToBlob({x: 0, y: 0, width: 100, height: 100});
+                    expect(blob instanceof Blob).toBeTrue();
+                    expect(blob.type).toEqual("image/png");
+                    expect(blob.size).toBeGreaterThan(0);
+                });
+            });
+
+            describe("screenShotToPNGFile", function () {
+                let testDir;
+                let testFilePath;
+                const testFileName = "screenshot-test-output.png";
+
+                beforeEach(async function () {
+                    const appLocalData = fs.getTauriVirtualPath(await platform.appLocalDataDir());
+                    testDir = appLocalData;
+                    testFilePath = `${testDir}/${testFileName}`;
+                });
+
+                afterEach(async function () {
+                    // Always clean up the test file, even if the test failed
+                    await SpecRunnerUtils.deletePathAsync(testFilePath).catch(() => {});
+                });
+
+                it("Should write a valid PNG file", async function () {
+                    await Phoenix.app.screenShotToPNGFile(testFilePath);
+                    // Read back and verify PNG signature
+                    const content = await new Promise((resolve, reject) => {
+                        fs.readFile(testFilePath, 'binary', (err, data) => {
+                            if (err) {
+                                reject(err);
+                            } else {
+                                resolve(data);
+                            }
+                        });
+                    });
+                    const bytes = new Uint8Array(content);
+                    expect(isPNG(bytes)).withContext("Written file should be valid PNG").toBeTrue();
+                });
+
+                it("Should write a valid PNG file with bounded rect", async function () {
+                    await Phoenix.app.screenShotToPNGFile(testFilePath, {x: 0, y: 0, width: 100, height: 100});
+                    const content = await new Promise((resolve, reject) => {
+                        fs.readFile(testFilePath, 'binary', (err, data) => {
+                            if (err) {
+                                reject(err);
+                            } else {
+                                resolve(data);
+                            }
+                        });
+                    });
+                    const bytes = new Uint8Array(content);
+                    expect(isPNG(bytes)).withContext("Written file should be valid PNG").toBeTrue();
+                });
+
+                it("Should throw when filePathToSave is not provided", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotToPNGFile()
+                    ).toBeRejectedWithError("filePathToSave must be a non-empty string");
+                });
+
+                it("Should throw when filePathToSave is not a string", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotToPNGFile(123)
+                    ).toBeRejectedWithError("filePathToSave must be a non-empty string");
+                });
+
+                it("Should throw when filePathToSave is an empty string", async function () {
+                    await expectAsync(
+                        Phoenix.app.screenShotToPNGFile("")
+                    ).toBeRejectedWithError("filePathToSave must be a non-empty string");
+                });
+            });
+        });
+
         describe("Credentials OTP API Tests", function () {
             const scopeName = "testScope";
             const trustRing = window.specRunnerTestKernalModeTrust;