chore: feedback and publishing fixes

.github/workflows/test.yml

@@ -18,6 +18,7 @@ jobs:
       run: |
         npm ci
         bash third_party/sync.sh
+        npm run build --workspaces
     - name: Install Playwright browsers
       run: npx playwright install --with-deps chromium
     - name: Test

README.md

@@ -1 +1,56 @@
-# ssr
+# Playwright Server Side Request Interception
+
+> [!WARNING]
+This project is experimental, we are actively looking for the feedback based on your scenarios.
+
+## Usage
+
+### 1. Install the package
+
+```bash
+npm install -D playwright-ssr
+```
+
+### 2. Have a WebServer per worker (project):
+
+```ts
+import { defineConfig, devices } from '@playwright/test';
+import type { WorkerConfigOptions } from 'playwright-ssr'
+
+export default defineConfig<WorkerConfigOptions>({
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        webServer: {
+          command: 'npm',
+          args: ['run', 'dev'],
+          url: 'http://localhost:3000',
+          cwd: __dirname,
+        }
+      },
+    },
+  ],
+});
+```
+
+### 3. Use the `webServer` fixture inside the tests
+
+```ts
+import { test, expect } from 'playwright-ssr';
+
+test('my test', async ({ page, webServer }) => {
+  await webServer.route('**/*', async route => {
+    await route.fulfill({
+      status: 200,
+      json: [{ id: 1, name: 'John' }, { id: 2, name: 'Doe' }],
+    })
+  });
+  await page.goto("http://localhost:3000")
+  await expect(page.getByRole('listitem')).toHaveText([
+    'John',
+    'Doe',
+  ])
+});
+```

examples/nextjs/tests/example.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from 'playwright-ssr';
 
 test('my test', async ({ page, webServer }) => {
-  webServer.route('**/*', async route => {
+  await webServer.route('**/*', async route => {
     await route.fulfill({
       status: 200,
       json: [{ id: 1, name: 'John' }, { id: 2, name: 'Doe' }],

examples/remix/tests/example.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from 'playwright-ssr';
 
 test('my test', async ({ page, webServer }) => {
-  webServer.route('**/*', async route => {
+  await webServer.route('**/*', async route => {
     await route.fulfill({
       status: 200,
       json: [{ id: 1, name: 'John' }, { id: 2, name: 'Doe' }],

examples/simple/tests/example.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from 'playwright-ssr';
 
 test('should work', async ({ page, webServer }) => {
-  webServer.route('**/*', async route => {
+  await webServer.route('**/*', async route => {
     await route.fulfill({
       status: 200,
       json: [{ name: 'John' }, { name: 'Doe' }],
@@ -16,7 +16,7 @@ test('should work', async ({ page, webServer }) => {
 }); 
 
 test('should have all the request/response properties', async ({ page, webServer }) => {
-  webServer.route('**/*', async (route, request) => {
+  await webServer.route('**/*', async (route, request) => {
     expect(route.request()).toEqual(request);
     expect(request.method()).toBe('GET');
     expect(request.url()).toBe('https://demo.playwright.dev/api-mocking/api/v1/fruits')

packages/playwright-ssr/.npmignore

@@ -0,0 +1,2 @@
+!/third_pary/**
+/src

packages/playwright-ssr/package.json

@@ -1,14 +1,15 @@
 {
     "name": "playwright-ssr",
-    "version": "0.0.1",
-    "main": "src/index",
+    "version": "0.0.3",
+    "main": "dist/index",
     "author": "Max Schmitt",
     "license": "MIT",
     "dependencies": {
       "wait-on": "^7.2.0"
     },
     "scripts": {
-      "test": "playwright test"
+      "test": "playwright test",
+      "build": "tsc"
     },
     "workspaces": [
       "packages/*"

packages/playwright-ssr/src/index.ts

@@ -1,3 +1,19 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import type {
   Route,
   Request as PWRequest,
@@ -10,6 +26,7 @@ import { test as base } from '@playwright/test'
 import { spawn } from 'node:child_process';
 import waitOn from 'wait-on';
 import path from 'path'
+// @ts-ignore
 import { RemoteHttpResolverOverWS } from "../third_party/interceptors";
 
 export type WorkerConfigOptions = {
@@ -49,6 +66,7 @@ class WebServer {
       port: 0,
     })
     this._resolver.apply()
+    // @ts-ignore
     this._resolver.on('request', async ({ request, requestId }) => this._onRequest(request, requestId))
     this._appProcess = spawn(this.settings.command, this.settings.args, {
       stdio: ['inherit', 'inherit', 'inherit'],
@@ -106,7 +124,7 @@ class WebServer {
     });
   }
 
-  public route(url: URLMatch, handler: RouteHandlerCallback, options?: { times?: number }): void {
+  public async route(url: URLMatch, handler: RouteHandlerCallback, options?: { times?: number }): Promise<void> {
     this._routes.unshift(new RouteHandler(url, handler, options?.times))
   }
 }

packages/playwright-ssr/src/injected.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-ignore
+import { RemoteHttpInterceptorOverWS } from '../third_party/interceptors'
+
+if (process.env.PW_INTERCEPTOR_PORT) {
+  console.log('(server.mjs): Applying RemoteHttpInterceptorWS')
+  const interceptor = new RemoteHttpInterceptorOverWS({
+    port: +process.env.PW_INTERCEPTOR_PORT,
+  })
+  interceptor.apply()
+}

packages/playwright-ssr/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+    "outDir": "dist",
+    "declaration": true
+  },
+  "files": [
+    "src/index.ts",
+    "src/injected.ts"
+  ]
+}