Move playwright code to a sandbox script

.circleci/config.yml

@@ -377,38 +377,6 @@ jobs:
       - store_artifacts:
           path: /tmp/cypress-record
           destination: cypress
-  e2e-tests-examples-playwright:
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.24.0-focal
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: running example
-          command: |
-            cd code
-            yarn serve-storybooks
-          background: true
-      - run:
-          name: await running examples
-          command: |
-            cd code
-            yarn await-serve-storybooks
-      - run:
-          name: playwright test
-          command: |
-            cd code
-            yarn test:e2e-examples-playwright --reporter=junit
-          environment:
-            PLAYWRIGHT_JUNIT_OUTPUT_NAME: test-results/playwright.xml
-            STORYBOOK_URL: 'http://localhost:8001/angular-cli'
-      - store_test_results:
-          path: code/test-results
-      - store_artifacts: # this is where playwright puts more complex stuff
-          path: code/playwright-results/
-          destination: playwright
   smoke-tests:
     executor:
       class: medium+
@@ -595,7 +563,47 @@ jobs:
                 --exit-once-uploaded"
       - store_test_results:
           path: code/test-results
-
+  e2e-sandboxes:
+    docker:
+      - image: mcr.microsoft.com/playwright:v1.24.0-focal
+    parallelism: 2
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Build index.html
+          command: |
+            cd code
+            yarn create-built-sandboxes-index --cadence ci --output "../built-sandboxes"
+          background: true
+      - run:
+          name: Serve Sandboxes
+          command: |
+            cd code
+            yarn http-server ../built-sandboxes -p 8001
+          background: true
+      - run:
+          name: Await serving Sandboxes
+          command: |
+            cd code
+            yarn wait-on http://localhost:8001
+      - run:
+          name: Running E2E Tests
+          command: |
+            cd code
+            yarn once-per-template --no-cd \
+              --step "Running E2E Tests" \
+              --cadence ci \
+              --script "STORYBOOK_URL=http://localhost:8080/#TEMPLATE_DIR/ yarn playwright test"
+          environment:
+            PLAYWRIGHT_JUNIT_OUTPUT_NAME: test-results/playwright.xml
+      - store_test_results:
+          path: code/test-results
+      - store_artifacts: # this is where playwright puts more complex stuff
+          path: code/playwright-results/
+          destination: playwright
 
 workflows:
   test:
@@ -610,9 +618,6 @@ workflows:
       - e2e-tests-examples:
           requires:
             - examples
-      - e2e-tests-examples-playwright:
-          requires:
-            - examples
       - smoke-tests:
           requires:
             - build
@@ -656,4 +661,8 @@ workflows:
             - create-sandboxes
       - chromatic-sandboxes:
           requires:
-            - build-sandboxes
+            - build-sandboxes
+      - e2e-sandboxes:
+          requires:
+            - build-sandboxes
+      

scripts/once-per-template.ts

@@ -3,13 +3,13 @@ import { Command } from 'commander';
 import execa from 'execa';
 import { resolve, join } from 'path';
 import { getJunitXml } from 'junit-xml';
+import { outputFile } from 'fs-extra';
 
 import { getOptions, getCommand, getOptionsOrPrompt, createOptions } from './utils/options';
 import type { OptionSpecifier } from './utils/options';
 import { filterDataForCurrentCircleCINode } from './utils/concurrency';
 
 import TEMPLATES from '../code/lib/cli/src/repro-templates';
-import { outputFile } from 'fs-extra';
 
 const sandboxDir = resolve(__dirname, '../sandbox');
 
@@ -114,6 +114,7 @@ async function runCommand(
     return { template, timestamp, time: (Date.now() - +timestamp) / 1000, ok: true, output: all };
   } catch (err) {
     console.log(`${step} ${template}: Failed.`);
+    console.log(err);
     return { template, timestamp, time: (Date.now() - +timestamp) / 1000, ok: false, err };
   }
 }