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.
libp2p · Feb 13, 2025 · 5a2d5bf · 5a2d5bf
1 parent e41ff16
commit 5a2d5bf
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 60 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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