feat(22): dev server port override

Author: jfgreffier

README.md

@@ -70,6 +70,17 @@ If a `devServerTarget` option is specified, the builder will launch an Angular s
         }
 ```
 
+You can additionaly override the `port` of the dev server. It's handy when you want to run dev server and Playwright tests on different ports.
+```json title="angular.json"
+        "e2e": {
+          "builder": "playwright-ng-schematics:playwright",
+          "options": {
+            "devServerTarget": "my-app:serve",
+            "port": 0
+          }
+        }
+```
+
 You still can make use of Playwright's `baseURL` option and mix it with `PLAYWRIGHT_TEST_BASE_URL` env variable.  
 The example below shows projects using `PLAYWRIGHT_TEST_BASE_URL` (set by `devServerTarget`) or another base URL.
 

src/builders/playwright/index.spec.ts

@@ -19,8 +19,8 @@ describe('Playwright builder', () => {
     await architectHost.addBuilderFromPackage(join(__dirname, '../../..'));
 
     // Builder that mocks `ng run app:serve`
-    const fakeBuilder = (): BuilderOutput => {
-      return { success: true, baseUrl: 'https://example.com' };
+    const fakeBuilder = (options: { port: number | null }): BuilderOutput => {
+      return { success: true, baseUrl: `https://example.com:${options.port}` };
     };
     architectHost.addBuilder('fakeBuilder', createBuilder(fakeBuilder));
     architectHost.addTarget(targetFromTargetString('app:serve'), 'fakeBuilder');
@@ -55,6 +55,7 @@ describe('Playwright builder', () => {
       'playwright-ng-schematics:playwright',
       {
         devServerTarget: 'app:serve',
+        port: 0,
       },
     );
     await run.stop();
@@ -66,7 +67,7 @@ describe('Playwright builder', () => {
       [],
       expect.objectContaining({
         env: expect.objectContaining({
-          PLAYWRIGHT_TEST_BASE_URL: 'https://example.com',
+          PLAYWRIGHT_TEST_BASE_URL: 'https://example.com:0',
         }),
       }),
     );

src/builders/playwright/index.ts

@@ -26,6 +26,9 @@ function buildArgs(options: JsonObject): string[] {
       if (key === 'devServerTarget') {
         return [];
       }
+      if (key === 'port') {
+        return [];
+      }
 
       // Skip objects, arrays, null, undefined (should already be validated by Angular though)
       if (
@@ -55,9 +58,11 @@ function buildArgs(options: JsonObject): string[] {
 async function startDevServer(
   context: BuilderContext,
   devServerTarget: string,
+  port: number | null,
 ): Promise<BuilderRun> {
   const target = targetFromTargetString(devServerTarget);
-  const server = await context.scheduleTarget(target, {});
+  const overrides: JsonObject = port !== null ? { port } : {};
+  const server = await context.scheduleTarget(target, overrides);
 
   return server;
 }
@@ -106,19 +111,26 @@ async function startPlaywrightTest(options: JsonObject, baseURL: string) {
   });
 }
 
+interface PlaywrightBuilderOptions extends JsonObject {
+  devServerTarget: string | null;
+  port: number | null;
+  files: string[] | null;
+}
+
 async function runE2E(
-  options: JsonObject,
+  options: PlaywrightBuilderOptions,
   context: BuilderContext,
 ): Promise<BuilderOutput> {
   let server: BuilderRun | undefined = undefined;
   let baseURL = '';
 
   try {
-    if (
-      options.devServerTarget &&
-      typeof options.devServerTarget === 'string'
-    ) {
-      server = await startDevServer(context, options.devServerTarget);
+    if (options.devServerTarget) {
+      server = await startDevServer(
+        context,
+        options.devServerTarget,
+        options.port,
+      );
       const result = await server.result;
       baseURL = result.baseUrl;
     }

src/builders/playwright/schema.json

@@ -8,6 +8,10 @@
       "description": "Dev server target to run tests against",
       "type": "string"
     },
+    "port": {
+      "description": "Dev server port. Overrides the port defined in devServerTarget.",
+      "type": "number"
+    },
     "files": {
       "description": "Run a test file with the given file name or in the given directory. To specify multiple names, repeat this argument.",
       "type": "array",