feat: add support for viewing traces (#280)

mxschmitt · Sep 12, 2024 · 1210799 · 1210799
1 parent f1bb56b
commit 1210799
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/file-service/main.go b/file-service/main.go
@@ -4,7 +4,7 @@ import (
 	"bytes"
 	"context"
 	"fmt"
-	"io/ioutil"
+	"io"
 	"net/http"
 	"net/url"
 	"os"
@@ -104,7 +104,7 @@ func (s *server) handleUploadImage(c echo.Context) error {
 			if err != nil {
 				return fmt.Errorf("could not open file: %w", err)
 			}
-			fileContent, err := ioutil.ReadAll(file)
+			fileContent, err := io.ReadAll(file)
 			if err != nil {
 				return fmt.Errorf("could not read file: %w", err)
 			}
@@ -113,8 +113,8 @@ func (s *server) handleUploadImage(c echo.Context) error {
 			if err != nil {
 				return fmt.Errorf("could not detect mime-type: %w", err)
 			}
-			if mimeType.MIME.Value != "application/pdf" && mimeType.MIME.Value != "image/png" && mimeType.MIME.Value != "video/webm" {
-				return fmt.Errorf("not allowed mime-type: %s", files[i].Filename)
+			if mimeType.MIME.Value != "application/pdf" && mimeType.MIME.Value != "image/png" && mimeType.MIME.Value != "video/webm" && mimeType.MIME.Value != "application/zip" {
+				return fmt.Errorf("not allowed mime-type (%s): %s", mimeType.MIME.Value, files[i].Filename)
 			}
 			fileExtension := filepath.Ext(files[i].Filename)
 			objectName := uuid.New().String() + fileExtension

diff --git a/frontend/src/components/ResponseFile/index.tsx b/frontend/src/components/ResponseFile/index.tsx
@@ -8,25 +8,40 @@ interface ResponseFileProps {
 }
 
 const ResponseFile: React.FunctionComponent<ResponseFileProps> = ({ file }) => {
+    const { publicURL, fileName, extension } = file
+    if (extension === ".pdf") {
+        return <object type="application/pdf" data={publicURL} className={styles.pdfFile} >
+            {fileName}
+        </object>
+    }
+    if (extension === ".mp4") {
+        return <video autoPlay muted className={styles.video} controls loop>
+            <source src={publicURL} type="video/mp4" />
+        </video>
+    }
+    if (extension === ".webm") {
+        return <video autoPlay muted className={styles.video} controls loop>
+            <source src={publicURL} type="video/webm" />
+        </video>
+    }
+    if (extension === ".zip") {
+        const traceViewerURL = `https://trace.playwright.dev/?trace=${encodeURIComponent(new URL(publicURL, window.location.href).toString())}`
+        return <span>
+                &nbsp;-&nbsp;
+                <a href={traceViewerURL} target="_blank" rel="noreferrer" className={styles.zipFile}>
+                Open in Trace Viewer
+            </a>
+        </span>
+    }
+    return <img src={publicURL} alt={fileName} className={styles.image} />
+}
+
+const ResponseFileWrapper: React.FunctionComponent<ResponseFileProps> = ({ file }) => {
     const { publicURL, fileName, extension } = file
     return <p className={styles.responseFile} data-test-id="file">
         <span className="file-name">{fileName}</span>
-        {extension === ".pdf" ? <>
-            <object type="application/pdf" data={publicURL} className={styles.pdfFile} >
-                {fileName}
-            </object>
-        </> : extension === ".mp4" ? <>
-            <video autoPlay muted className={styles.video} controls loop>
-                <source src={publicURL} type="video/mp4" />
-            </video>
-        </> : extension === ".webm" ? <>
-            <video autoPlay muted className={styles.video} controls loop>
-                <source src={publicURL} type="video/webm" />
-            </video>
-        </> : <>
-            <img src={publicURL} alt={fileName} className={styles.image} />
-        </>}
+        <ResponseFile file={file} />
     </p>
 }
 
-export default ResponseFile
+export default ResponseFileWrapper
diff --git a/worker-javascript/main.go b/worker-javascript/main.go
@@ -18,7 +18,7 @@ func handler(w *worker.Worker, code string) error {
 		if err := os.WriteFile(testPath, []byte(code), 0644); err != nil {
 			return fmt.Errorf("failed to write test file: %w", err)
 		}
-		return w.ExecCommand("node", "/usr/lib/node_modules/@playwright/test/cli.js", "test", testPath)
+		return w.ExecCommand("node", "/usr/lib/node_modules/@playwright/test/cli.js", "test", "--trace=on", testPath)
 	}
 	if strings.HasSuffix(code, TYPESCRIPT_MAGIC_SUFFIX) {
 		return w.ExecCommand("ts-node", `--compilerOptions='{"isolatedModules": false}'`, "-e", strings.TrimSuffix(code, TYPESCRIPT_MAGIC_SUFFIX))
@@ -29,6 +29,6 @@ func handler(w *worker.Worker, code string) error {
 func main() {
 	worker.NewWorker(&worker.WorkerExectionOptions{
 		Handler: handler,
-		IgnoreFilePatterns: []string{"**/*.last-run.json"},
+		IgnoreFilePatterns: []string{"**/*.last-run.json", "**/.playwright-artifacts-*/**"},
 	}).Run()
 }