Node 20: Docker, package.json dependency updates, README enhancements…

…, and general bugfixes and enhancements for developer experience. (garris#1523)

* style(remote): adjusts spacing/quotes for eslint rules (#34)

* feat(backstopjs): updates dev/dependencies to latest possible versions (#34)

* build(backstopjs): adds engines, type (commonjs), and bump package.json version (#34)

* build: adds 'docker-load' script for local testing (#34)

this loads the custom docker image, built with buildx, into local system container namespace. necessary when updating dockerfile without the option to publish to docker registry.

* fix: removes obsolete `genConfig` npm script (#34)

`genConfig` is now `makeConfig` and is ultimately used in `backstop init`. There is no need to test this separately, as it's part of the
overall flow of `init`, which is now used in npm's `integration-test` script, and passing.

* fix: removes obsolete 'echo' npm script

This was originally part of the `gulp` workflow, back in the `slimer` and `casper` days. https://github.com/garris/BackstopJS/blob/b00ab5bf358fcb3b77724ac4ef10b30e86b5188d/core/command/echo.js

* test: adds success, caution, and failure messaging to unit, integration, smoke, and sanity tests

This provides a final outcome message for all npm scripts for internal project testing. With tests that `exit 1`, a caution message is used, as opposed to a full-blown "FAIL".

* build: specifies npm@>=8 in package engines

also renames "docker-load" script "load-docker" to align with other script naming conventions

* build: updates and refactors README.md

* build(docker): updates Dockerfile with node:20-bullseye

* test: adds playwright smoke tests

* test: echo fail message if smoke tests succeed

* feat(docker): includes playwright and deps installation in Dockerfile

* test(backstop): updates caution message with advice to check logs

.gitignore

@@ -39,3 +39,6 @@ compare/output/bitmaps_test/
 compare/output/config\.js
 
 \.vscode/
+
+# Tests
+*newdir

core/command/remote.js

@@ -12,13 +12,13 @@ module.exports = {
     return new Promise(function (resolve, reject) {
       const port = getRemotePort();
       const commandStr = `node ${ssws} ${projectPath} ${MIDDLEWARE_PATH} --config=${config.backstopConfigFileName}`;
-      const env = {'SSWS_HTTP_PORT': port};
+      const env = { SSWS_HTTP_PORT: port };
 
       logger.log(`Starting remote with: ${commandStr} with env ${JSON.stringify(env)}`);
 
-      const child = exec(commandStr, { env: { ...env, 'PATH': process.env.PATH } }, (error) => {
+      const child = exec(commandStr, { env: { ...env, PATH: process.env.PATH } }, (error) => {
         if (error) {
-          logger.log("Error running backstop remote:", error);
+          logger.log('Error running backstop remote:', error);
         }
       });
 

docker/Dockerfile

@@ -1,5 +1,5 @@
 # use bullseye node base, as debian does provide a chromium for arm64 and amd64 flavour
-FROM node:16-bullseye
+FROM node:20-bullseye
 
 ARG BACKSTOPJS_VERSION
 ARG DEBIAN_FRONTEND=noninteractive
@@ -8,25 +8,25 @@ ENV BACKSTOPJS_VERSION=$BACKSTOPJS_VERSION
 
 # install chromium and its deps
 RUN apt-get -qq update >/dev/null && apt-get install -qq \
-fonts-liberation \
-# cyrillic
-xfonts-cyrillic \
-# chinese
-xfonts-wqy fonts-wqy-zenhei fonts-arphic-ukai fonts-arphic-uming \
-# japanese
-fonts-ipafont-mincho fonts-ipafont-gothic fonts-ipafont fonts-vlgothic \
-# korean
-fonts-unfonts-core fonts-unfonts-extra \
-# cjk + emoji font
-fonts-noto-cjk fonts-noto-color-emoji \
-# chromium
-chromium >/dev/null && apt-get -qq clean >/dev/null && rm -rf /var/lib/apt/lists/*
+  fonts-liberation \
+  # cyrillic
+  xfonts-cyrillic \
+  # chinese
+  xfonts-wqy fonts-wqy-zenhei fonts-arphic-ukai fonts-arphic-uming \
+  # japanese
+  fonts-ipafont-mincho fonts-ipafont-gothic fonts-ipafont fonts-vlgothic \
+  # korean
+  fonts-unfonts-core fonts-unfonts-extra \
+  # cjk + emoji font
+  fonts-noto-cjk fonts-noto-color-emoji \
+  # chromium
+  chromium >/dev/null && apt-get -qq clean >/dev/null && rm -rf /var/lib/apt/lists/*
 
 # skip download, we already have it installed
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 # playwright shared browser path (does install a 2nd chromium - can't be skipped)
 ENV PLAYWRIGHT_BROWSERS_PATH=/opt/pw-browsers
-RUN mkdir ${PLAYWRIGHT_BROWSERS_PATH} && npm install -g --unsafe-perm=true --allow-root backstopjs@${BACKSTOPJS_VERSION}
+RUN mkdir ${PLAYWRIGHT_BROWSERS_PATH} && npm install -g --unsafe-perm=true --allow-root backstopjs@${BACKSTOPJS_VERSION} && npx --yes --verbose --foreground-scripts playwright install --with-deps
 
 # set executable path
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium