Add browser to integration test suite

Author: aron

.github/workflows/ci.yml

@@ -64,9 +64,6 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/previous-releases
         node-version: [18.x, 20.x]
         suite: [commonjs, esm, typescript]
-        exclude:
-          - suite: cloudflare-worker
-            node-version: 18.x # Only test Cloudflare suite with the latest Node version
       fail-fast: false
 
     steps:
@@ -84,6 +81,33 @@ jobs:
           npm --prefix integration/${{ matrix.suite }} install "./${{ needs.build.outputs.tarball-name }}"
           npm --prefix integration/${{ matrix.suite }} test
 
+  integration-browser:
+    needs: [test, build]
+    runs-on: ubuntu-latest
+
+    env:
+      REPLICATE_API_TOKEN: ${{ secrets.REPLICATE_API_TOKEN }}
+
+    strategy:
+      matrix:
+        browser: ["chromium", "firefox", "webkit"]
+        suite: ["browser"]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/download-artifact@v3
+        with:
+          name: package-tarball
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: |
+          npm --prefix integration/${{ matrix.suite }} install
+          npm --prefix integration/${{ matrix.suite }} install "./${{ needs.build.outputs.tarball-name }}"
+          npm --prefix integration/${{ matrix.suite }} npm exec -- playwright test --browser ${{ matrix.browser }}
 
   integration-edge:
     needs: [test, build]

index.js

@@ -5,6 +5,7 @@ const {
   withAutomaticRetries,
   validateWebhook,
   parseProgressFromLogs,
+  streamAsyncIterator,
 } = require("./lib/util");
 
 const accounts = require("./lib/accounts");
@@ -297,18 +298,7 @@ class Replicate {
         options: { signal },
       });
 
-      const reader = stream.getReader();
-
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        yield value;
-      }
-      reader.releaseLock();
+      yield* streamAsyncIterator(stream);
     } else {
       throw new Error("Prediction does not support streaming");
     }

integration/browser/README.md

@@ -0,0 +1,39 @@
+# Browser integration tests
+
+Uses [`playwright`](https://playwright.dev/docs) to run a basic integration test against the three most common browser engines, Firefox, Chromium and WebKit.
+
+It uses the `replicate/canary` model for the moment, which requires a Replicate API token available in the environment under `REPLICATE_API_TOKEN`.
+
+The entire suite is a single `main()` function that calls a single model exercising the streaming API.
+
+The test uses `esbuild` within the test generate a browser friendly version of the `index.js` file which is loaded into the given browser and calls the `main()` function asserting the response content.
+
+## CORS
+
+The Replicate API doesn't support Cross Origin Resource Sharing at this time. We work around this in Playwright by intercepting the request in a `page.route` handler. We don't modify the request/response, but this seems to work around the restriction.
+
+## Setup
+
+    npm install
+
+## Local
+
+The following command will run the tests across all browsers.
+
+    npm test
+
+To run against the default browser (chromium) run:
+
+    npm exec playwright test
+
+Or, specify a browser with:
+
+    npm exec playwright test --browser firefox
+
+## Debugging
+
+Running `playwright test` with the `--debug` flag opens a browser window with a debugging interface, and a breakpoint set at the start of the test. It can also be connected directly to VSCode.
+
+    npm exec playwright test --debug
+
+The browser.js file is injected into the page via a script tag, to be able to set breakpoints in this file you'll need to use a `debugger` statement and open the devtools in the spawned browser window before continuing the test suite.

integration/browser/package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": "node index.test.js"
+    "test": "playwright test --browser all"
   },
   "license": "ISC",
   "dependencies": {

lib/stream.js

@@ -1,6 +1,7 @@
 // Attempt to use readable-stream if available, attempt to use the built-in stream module.
 
 const ApiError = require("./error");
+const { streamAsyncIterator } = require("./util");
 const {
   EventSourceParserStream,
 } = require("../vendor/eventsource-parser/stream");
@@ -73,15 +74,7 @@ function createReadableStream({ url, fetch, options = {} }) {
         .pipeThrough(new TextDecoderStream())
         .pipeThrough(new EventSourceParserStream());
 
-      const reader = stream.getReader();
-
-      while (true) {
-        const { done, value: event } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
+      for await (const event of streamAsyncIterator(stream)) {
         if (event.event === "error") {
           controller.error(new Error(event.data));
           break;
@@ -96,7 +89,6 @@ function createReadableStream({ url, fetch, options = {} }) {
         }
       }
 
-      reader.releaseLock();
       controller.close();
     },
   });

lib/util.js

@@ -354,9 +354,33 @@ function parseProgressFromLogs(input) {
   return null;
 }
 
+/**
+ * Helper to make any `ReadableStream` iterable, this is supported
+ * by most server runtimes but browsers still haven't implemented
+ * it yet.
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#browser_compatibility
+ *
+ * @template T
+ * @param {ReadableStream<T>} stream an instance of a `ReadableStream`
+ * @yields {T} a chunk/event from the stream
+ */
+async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
 module.exports = {
   transformFileInputs,
   validateWebhook,
   withAutomaticRetries,
   parseProgressFromLogs,
+  streamAsyncIterator,
 };

tsconfig.json

@@ -5,9 +5,5 @@
     "strict": true,
     "allowJs": true
   },
-  "exclude": [
-    "**/node_modules",
-    "integration/**"
-  ]
+  "exclude": ["integration/**", "**/node_modules"]
 }
-