Fix devcontainer configuration

The devcontainer was no longer working since chrome
version 115 because location of installation files changed.
See comment on: https://chromedriver.chromium.org/downloads

However we don't need to build it ourselves since Microsoft
maintains docker images with playwright preinstalled with
chrome, firefox and webkit.

This means that we can simplify the setup a lot while still
keeping the goal of allowing people to get an environment
in which they can run tests by simply starting a devcontainer
or running a Github codespace.

I also had to slightly bump @playwright/test to 1.30.0 because
we already had both 1.28.0 and 1.30.0 through different
dependency chains, causing issues. Unit test were trying to run
with 1.28 and browser tests with 1.30 which is a problem when
our docker image has just one playwright build.

.devcontainer/Dockerfile

@@ -1,36 +1,5 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/typescript-node/.devcontainer/base.Dockerfile
+# See comments in devcontainer.json for details of setting the playwright tag.
+ARG PLAYWRIGHT_TAG="v1.30.0-focal"
+FROM mcr.microsoft.com/playwright:${PLAYWRIGHT_TAG}
 
-# [Choice] Node.js version: 16, 14, 12
-ARG VARIANT="16-buster"
-FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
-
-# [Optional] Uncomment this section to install additional OS packages.
-RUN apt-get update \
-    && export DEBIAN_FRONTEND=noninteractive \
-    && apt-get -y install --no-install-recommends \
-        openjdk-11-jdk \
-        firefox-esr
-
-# Chromium and chrome-driver
-ARG CHROMIUM_DEB_URL=https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-RUN wget -qO - $CHROMIUM_DEB_URL > /tmp/chrome_linux64.deb \
-    && apt -y install /tmp/chrome_linux64.deb -f \
-    && FULL_CHROME_VERSION=$(google-chrome --product-version) \
-    && CHROME_VERSION=${FULL_CHROME_VERSION%.*} \
-    && CHROMEDRIVER_DIR="/usr/local/share/chrome_driver" \
-    && CHROMEDRIVER_BIN="$CHROMEDRIVER_DIR/chromedriver" \
-    && LATEST_CHROMEDRIVER_VERSION=$(curl -sL "https://chromedriver.storage.googleapis.com/LATEST_RELEASE_$CHROME_VERSION") \
-    && CHROMEDRIVER_URL="https://chromedriver.storage.googleapis.com/$LATEST_CHROMEDRIVER_VERSION/chromedriver_linux64.zip" \
-    && wget -qO - $CHROMEDRIVER_URL > /tmp/chromedriver_linux64.zip \
-    && mkdir -p $CHROMEDRIVER_DIR \
-    && unzip -qq /tmp/chromedriver_linux64.zip -d $CHROMEDRIVER_DIR \
-    && chmod +x $CHROMEDRIVER_BIN \
-    && ln -s "$CHROMEDRIVER_BIN" /usr/bin/ \
-    && rm -rf /tmp/chrome*
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node packages
-# RUN su node -c "npm install -g <your-package-list -here>"
+WORKDIR /app

.devcontainer/devcontainer.json

@@ -1,24 +1,28 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/typescript-node
 {
-  "name": "Node.js & TypeScript",
+  "name": "Node.js & Playwright",
   "build": {
     "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 12, 14, 16
+    // Change to pick a different tag, see https://mcr.microsoft.com/en-us/product/playwright/tags
+    //
+    // IMPORTANT: The playwright image version must match @playwright/test version from package.json.
+    // Otherwise it will not work, the test version will look for the browser versions which it won't
+    // find on the image.
+    //
+    // pick '...-arm64' version if running on Apple Silicon.
     "args": {
-      "VARIANT": "16"
+      "PLAYWRIGHT_TAG": "v1.30.0-focal"
     }
   },
-  // Set *default* container specific settings.json values on container create.
-  "settings": {},
   // Add the IDs of extensions you want installed when the container is created.
-  "extensions": [
-    "dbaeumer.vscode-eslint"
-  ],
+  "customizations": {
+    "vscode": {
+      "extensions": ["dbaeumer.vscode-eslint"]
+    }
+  },
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
+  "forwardPorts": [9000],
   // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "yarn install && yarn build",
-  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node"
+  "postCreateCommand": "yarn install && yarn build"
 }

package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@open-wc/testing": "^3.1.7",
-    "@playwright/test": "^1.28.0",
+    "@playwright/test": "~1.30.0",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@web/dev-server-esbuild": "^0.3.3",
     "@web/test-runner": "^0.15.0",

yarn.lock

@@ -177,13 +177,13 @@
     "@types/sinon-chai" "^3.2.3"
     chai-a11y-axe "^1.3.2"
 
-"@playwright/test@^1.28.0":
-  version "1.28.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.28.1.tgz#e5be297e024a3256610cac2baaa9347fd57c7860"
-  integrity sha512-xN6spdqrNlwSn9KabIhqfZR7IWjPpFK1835tFNgjrlysaSezuX8PYUwaz38V/yI8TJLG9PkAMEXoHRXYXlpTPQ==
+"@playwright/test@~1.30.0":
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.30.0.tgz#8c0c4930ff2c7be7b3ec3fd434b2a3b4465ed7cb"
+  integrity sha512-SVxkQw1xvn/Wk/EvBnqWIq6NLo1AppwbYOjNLmyU0R1RoQ3rLEBtmjTnElcnz8VEtn11fptj1ECxK0tgURhajw==
   dependencies:
     "@types/node" "*"
-    playwright-core "1.28.1"
+    playwright-core "1.30.0"
 
 "@rollup/[email protected]":
   version "13.1.3"
@@ -2534,11 +2534,6 @@ [email protected]:
   dependencies:
     find-up "^4.0.0"
 
-[email protected]:
-  version "1.28.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.28.1.tgz#8400be9f4a8d1c0489abdb9e75a4cc0ffc3c00cb"
-  integrity sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==
-
 [email protected]:
   version "1.30.0"
   resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.30.0.tgz#de987cea2e86669e3b85732d230c277771873285"