From 5a2d5bf26a458e1b6f4e60220552c3eb587d4539 Mon Sep 17 00:00:00 2001
From: Alex Potsides <alex@achingbrain.net>
Date: Thu, 13 Feb 2025 14:52:22 +0100
Subject: [PATCH] fix: use latest playwright image (#612)

The default playwright image hasn't been updated for months so we end up removing and reinstalling browsers on every run, so use a specific version instead.

The playwright image comes with LTS node so we can base both the node and browser images off that and save having to build the images over and over again.
---
 .../impl/js/v1.x/BrowserDockerfile            | 15 +----------
 transport-interop/impl/js/v1.x/Dockerfile     |  6 ++---
 transport-interop/impl/js/v1.x/Makefile       | 26 +++++++++----------
 .../impl/js/v2.x/BrowserDockerfile            | 15 +----------
 transport-interop/impl/js/v2.x/Dockerfile     |  6 ++---
 transport-interop/impl/js/v2.x/Makefile       | 26 +++++++++----------
 6 files changed, 34 insertions(+), 60 deletions(-)

diff --git a/transport-interop/impl/js/v1.x/BrowserDockerfile b/transport-interop/impl/js/v1.x/BrowserDockerfile
index c817a083..b1b5f945 100644
--- a/transport-interop/impl/js/v1.x/BrowserDockerfile
+++ b/transport-interop/impl/js/v1.x/BrowserDockerfile
@@ -1,22 +1,9 @@
-# syntax=docker/dockerfile:1
-
-# Copied since we won't have the repo to use if expanding from cache.
-
 # Workaround: https://github.com/docker/cli/issues/996
 ARG BASE_IMAGE=node-js-libp2p-head
-FROM ${BASE_IMAGE} AS js-libp2p-base
+FROM ${BASE_IMAGE}
 
-FROM mcr.microsoft.com/playwright
-
-COPY --from=js-libp2p-base /app/ /app/
 WORKDIR /app
 
-# We install browsers here instead of the cached version so that we use the latest browsers at run time.
-# Ideally this would also be pinned, but playwright controls this, so there isn't much we can do about it.
-# By installing here, we avoid installing it at test time.
-RUN npx playwright install-deps
-RUN npx playwright install
-
 # Options: chromium, firefox, webkit
 ARG BROWSER=chromium
 ENV BROWSER=${BROWSER}
diff --git a/transport-interop/impl/js/v1.x/Dockerfile b/transport-interop/impl/js/v1.x/Dockerfile
index c1a3499f..e7bc9403 100644
--- a/transport-interop/impl/js/v1.x/Dockerfile
+++ b/transport-interop/impl/js/v1.x/Dockerfile
@@ -1,6 +1,5 @@
-# Here because we want to fetch the node_modules within docker so that it's
-# installed on the same platform the test is run. Otherwise tools like `esbuild` will fail to run
-FROM node:lts
+# install node and browsers
+FROM mcr.microsoft.com/playwright:v1.50.1
 
 WORKDIR /app
 
@@ -11,6 +10,7 @@ COPY test ./test
 # disable colored output and CLI animation from test runners
 ENV CI=true
 
+# install inside the container so any native deps will have the docker arch
 RUN npm ci
 RUN npm run build
 
diff --git a/transport-interop/impl/js/v1.x/Makefile b/transport-interop/impl/js/v1.x/Makefile
index 115bb2fd..a0c674d9 100644
--- a/transport-interop/impl/js/v1.x/Makefile
+++ b/transport-interop/impl/js/v1.x/Makefile
@@ -5,15 +5,21 @@ all: image.json chromium-image.json firefox-image.json update-lock-file
 
 # Necessary because multistage builds require a docker image name rather than a digest to be used
 load-image-json: image.json
-	docker image tag $$(jq -r .imageID image.json) ${image_name}
+	docker image tag $$(jq -r .imageID image.json) node-${image_name}
 
-chromium-image.json: load-image-json BrowserDockerfile
-	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=${image_name} --build-arg=BROWSER=chromium -t chromium-${image_name} .
+image.json:
+	docker builder prune -af
+	docker build -t node-${image_name} -f ./Dockerfile .
+	docker image inspect node-${image_name} -f "{{.Id}}" | \
+		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
+
+chromium-image.json: load-image-json
+	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=node-${image_name} --build-arg=BROWSER=chromium -t chromium-${image_name} .
 	docker image inspect chromium-${image_name} -f "{{.Id}}" | \
 		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
 
-firefox-image.json: load-image-json BrowserDockerfile
-	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=${image_name} --build-arg=BROWSER=firefox -t firefox-${image_name} .
+firefox-image.json: load-image-json
+	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=node-${image_name} --build-arg=BROWSER=firefox -t firefox-${image_name} .
 	docker image inspect firefox-${image_name} -f "{{.Id}}" | \
 		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
 
@@ -24,13 +30,7 @@ update-lock-file: image.json
 	docker cp $$CONTAINER_ID:/app/package-lock.json ./package-lock.json; \
 	docker rm $$CONTAINER_ID
 
-image.json:
-	docker builder prune -af
-	docker build -t ${image_name} -f ./Dockerfile .
-	docker image inspect ${image_name} -f "{{.Id}}" | \
-		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
-
 clean:
-	rm -rf image.json *-image.json
+	rm -rf *-image.json
 
-.PHONY: all clean browser-images load-image-json
+.PHONY: clean
diff --git a/transport-interop/impl/js/v2.x/BrowserDockerfile b/transport-interop/impl/js/v2.x/BrowserDockerfile
index c817a083..b1b5f945 100644
--- a/transport-interop/impl/js/v2.x/BrowserDockerfile
+++ b/transport-interop/impl/js/v2.x/BrowserDockerfile
@@ -1,22 +1,9 @@
-# syntax=docker/dockerfile:1
-
-# Copied since we won't have the repo to use if expanding from cache.
-
 # Workaround: https://github.com/docker/cli/issues/996
 ARG BASE_IMAGE=node-js-libp2p-head
-FROM ${BASE_IMAGE} AS js-libp2p-base
+FROM ${BASE_IMAGE}
 
-FROM mcr.microsoft.com/playwright
-
-COPY --from=js-libp2p-base /app/ /app/
 WORKDIR /app
 
-# We install browsers here instead of the cached version so that we use the latest browsers at run time.
-# Ideally this would also be pinned, but playwright controls this, so there isn't much we can do about it.
-# By installing here, we avoid installing it at test time.
-RUN npx playwright install-deps
-RUN npx playwright install
-
 # Options: chromium, firefox, webkit
 ARG BROWSER=chromium
 ENV BROWSER=${BROWSER}
diff --git a/transport-interop/impl/js/v2.x/Dockerfile b/transport-interop/impl/js/v2.x/Dockerfile
index c1a3499f..e7bc9403 100644
--- a/transport-interop/impl/js/v2.x/Dockerfile
+++ b/transport-interop/impl/js/v2.x/Dockerfile
@@ -1,6 +1,5 @@
-# Here because we want to fetch the node_modules within docker so that it's
-# installed on the same platform the test is run. Otherwise tools like `esbuild` will fail to run
-FROM node:lts
+# install node and browsers
+FROM mcr.microsoft.com/playwright:v1.50.1
 
 WORKDIR /app
 
@@ -11,6 +10,7 @@ COPY test ./test
 # disable colored output and CLI animation from test runners
 ENV CI=true
 
+# install inside the container so any native deps will have the docker arch
 RUN npm ci
 RUN npm run build
 
diff --git a/transport-interop/impl/js/v2.x/Makefile b/transport-interop/impl/js/v2.x/Makefile
index 9f2c6c61..7364454c 100644
--- a/transport-interop/impl/js/v2.x/Makefile
+++ b/transport-interop/impl/js/v2.x/Makefile
@@ -5,15 +5,21 @@ all: image.json chromium-image.json firefox-image.json update-lock-file
 
 # Necessary because multistage builds require a docker image name rather than a digest to be used
 load-image-json: image.json
-	docker image tag $$(jq -r .imageID image.json) ${image_name}
+	docker image tag $$(jq -r .imageID image.json) node-${image_name}
 
-chromium-image.json: load-image-json BrowserDockerfile
-	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=${image_name} --build-arg=BROWSER=chromium -t chromium-${image_name} .
+image.json:
+	docker builder prune -af
+	docker build -t node-${image_name} -f ./Dockerfile .
+	docker image inspect node-${image_name} -f "{{.Id}}" | \
+		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
+
+chromium-image.json: load-image-json
+	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=node-${image_name} --build-arg=BROWSER=chromium -t chromium-${image_name} .
 	docker image inspect chromium-${image_name} -f "{{.Id}}" | \
 		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
 
-firefox-image.json: load-image-json BrowserDockerfile
-	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=${image_name} --build-arg=BROWSER=firefox -t firefox-${image_name} .
+firefox-image.json: load-image-json
+	docker build -f BrowserDockerfile --build-arg=BASE_IMAGE=node-${image_name} --build-arg=BROWSER=firefox -t firefox-${image_name} .
 	docker image inspect firefox-${image_name} -f "{{.Id}}" | \
 		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
 
@@ -24,13 +30,7 @@ update-lock-file: image.json
 	docker cp $$CONTAINER_ID:/app/package-lock.json ./package-lock.json; \
 	docker rm $$CONTAINER_ID
 
-image.json:
-	docker builder prune -af
-	docker build -t ${image_name} -f ./Dockerfile .
-	docker image inspect ${image_name} -f "{{.Id}}" | \
-		xargs -I {} echo "{\"imageID\": \"{}\"}" > $@
-
 clean:
-	rm -rf image.json *-image.json
+	rm -rf *-image.json
 
-.PHONY: all clean browser-images load-image-json
+.PHONY: clean