feat: add initial fixture setup

Author: AriPerkkio

.github/workflows/ci.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Typecheck
         run: pnpm typecheck
 
+      - name: Install Playwright Dependencies
+        run: pnpm exec playwright install chromium --with-deps
+
       - name: Test
         run: pnpm test
 

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 dist
+__screenshots__

README.md

@@ -1,124 +1,80 @@
-# @webcontainer/playwright
+# @webcontainer/test
 
 [![Version][version-badge]][npm-url]
 
-> Playwright utilities for testing applications in WebContainers
+> Utilities for testing applications in WebContainers
 
 [Installation](#installation) | [API](#api)
 
 ---
 
-Test your applications and packages inside WebContainers using Playwright.
+Test your applications and packages inside WebContainers.
 
 ## Installation
 
+Add `@webcontainer/test` to your development dependencies.
+
 ```sh
-$ npm install --save-dev @webcontainer/playwright
+$ npm install --save-dev @webcontainer/test
 ```
 
-`@playwright/test` is required as peer dependency:
+Vitest is also required as peer dependency.
 
 ```sh
-$ npm install --save-dev @playwright/test
+$ npm install --save-dev vitest @vitest/browser
 ```
 
 ## API
 
-### Fixtures
-
-WebContainer utilities are defined as [Playwright fixtures](https://playwright.dev/docs/test-fixtures). You can import pre-defined `test()`, or import each fixture manually and extend your own `test` with each fixture.
-
-```ts
-// Pre-defined test()
-import { test } from "@webcontainer/playwright";
-```
-
-```ts
-// Manual import of each fixture
-import {
-  Editor,
-  Preview,
-  Terminal,
-  WebContainer,
-} from "@webcontainer/playwright";
-import { test as base } from "@playwright/test";
-
-const test = base.extend<{
-  editor: Editor;
-  preview: Preview;
-  terminal: Terminal;
-  webcontainer: WebContainer;
-}>({
-  editor: async ({ page }, use) => {
-    use(new Editor(page));
-  },
-  preview: async ({ page }, use) => {
-    use(new Preview(page));
-  },
-  terminal: async ({ page }, use) => {
-    use(new Terminal(page));
-  },
-  webcontainer: async ({ page }, use) => {
-    use(new WebContainer(page));
-  },
-});
-
-export { test };
-```
-
-You can access each fixture in your test cases:
+Webcontainer utilities are exposed as [test fixtures](https://vitest.dev/guide/test-context.html#test-extend).
 
 ```ts
-import { test } from "@webcontainer/playwright"; // or your own `test` setup
+import { test } from "@webcontainer/test";
 
-test("user can open Vite TypeScript starter", async ({
-  page,
-  editor,
+test("run development server inside webcontainer", async ({
+  webcontainer,
   preview,
-  terminal,
 }) => {
-  await page.goto("/");
+  await webcontainer.mount("path/to/project");
 
-  await editor.getByFile("package.json", /"vite": "^6.0.11"/);
-  await editor.getByFile("src/main.ts", /<h1>Hello Vite<\/h1>/);
+  await webcontainer.runCommand("npm", ["install"]);
+  void webcontainer.runCommand("npm", ["run", "dev"]);
 
-  await terminal.getByText("VITE v6.0.11 ready");
-
-  await preview.getByRole("heading", { level: 1, name: "Hello Vite" });
+  await preview.getByRole("heading", { level: 1, name: "Hello Vite!" });
 });
 ```
 
-#### Editor
+#### `preview`
 
-##### `getByFile`
+##### `getByRole`
 
-Get file by its name and content.
+Vitest's [`getByRole`](https://vitest.dev/guide/browser/locators.html#getbyrole) that's scoped to the preview window.
 
-```ts
-async function getByFile(filename: string, content: RegExp | string): Locator;
-```
+##### `getByText`
 
-#### Preview
+Vitest's [`getByText`](https://vitest.dev/guide/browser/locators.html#getbytext) that's scoped to the preview window.
 
-##### `getByRole`
+#### `webcontainer`
 
-Playwright's [`getByRole`](https://playwright.dev/docs/api/class-framelocator#frame-locator-get-by-role) that's scoped to the preview `<iframe>`.
+##### `mount`
 
-#### Terminal
+Mount file system inside webcontainer.
 
-##### `getByText`
-
-Playwright's [`getByText`](https://playwright.dev/docs/api/class-framelocator#frame-locator-get-by-role) that's scoped to the terminal.
+Accepts a path that is relative to the [project root](https://vitest.dev/config/#root), or inlined [`FileSystemTree`](https://webcontainers.io/api#filesystemtree).
 
-#### WebContainer
+```ts
+await webcontainer.mount("/path/to/project");
+```
 
 ##### `runCommand`
 
-Run command inside WebContainer process.
+Run command inside webcontainer. Returns command output.
 
 ```ts
-async function runCommand(command: string): Promise<void>;
+await webcontainer.runCommand("npm", ["install"]);
+
+const files = await webcontainer.runCommand("ls", ["-l"]);
 ```
 
-[version-badge]: https://img.shields.io/npm/v/@webcontainer/playwright
-[npm-url]: https://www.npmjs.com/package/@webcontainer/playwright
+[version-badge]: https://img.shields.io/npm/v/@webcontainer/test
+[npm-url]: https://www.npmjs.com/package/@webcontainer/test

package.json

@@ -1,34 +1,59 @@
 {
-  "name": "@webcontainer/playwright",
+  "name": "@webcontainer/test",
   "version": "0.0.1",
-  "description": "Playwright utilities for testing applications in WebContainers",
+  "description": "Utilities for testing applications in WebContainers",
   "author": "StackBlitz Inc.",
   "license": "MIT",
   "type": "module",
-  "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./plugin": {
+      "import": {
+        "types": "./dist/plugin.d.ts",
+        "default": "./dist/plugin.js"
+      }
+    }
+  },
   "files": [
     "dist"
   ],
-  "homepage": "https://github.com/stackblitz/webcontainer-playwright",
-  "bugs": "https://github.com/stackblitz/webcontainer-playwright",
+  "homepage": "https://github.com/stackblitz/webcontainer-test",
+  "bugs": "https://github.com/stackblitz/webcontainer-test",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/stackblitz/webcontainer-playwright.git"
+    "url": "git+https://github.com/stackblitz/webcontainer-test.git"
   },
   "keywords": [
     "testing",
     "webcontainer",
-    "playwright"
+    "playwright",
+    "vitest"
   ],
   "packageManager": "[email protected]",
   "scripts": {
-    "build": "echo \"Error: no build specified\"",
-    "test": "echo \"Error: no test specified\"",
+    "build": "tsup",
+    "dev": "tsup --watch --sourcemap",
+    "test": "vitest",
     "lint": "echo \"Error: no linttest specified\"",
-    "typecheck": "echo \"Error: no typecheck specified\""
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@webcontainer/api": "^1.5.3"
+  },
+  "peerDependencies": {
+    "vitest": "^3.1"
   },
-  "dependencies": {},
-  "peerDependencies": {},
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitest/browser": "^3.1.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.1"
+  }
 }