feat(*): Add npm as an alternative package manager and add playwright…

…-init command (#15) * feat(package manager): Add npm as alternative to yarn * feat(*): Add playwright-init command * fix(install): Fix playwright-install for npm * test(*): Fix tests * docs(README): Update readme
julienloizelet · Feb 11, 2024 · dcb1941 · dcb1941
1 parent 5ba8c87
commit dcb1941
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 17 deletions.
diff --git a/.githooks/commit-msg b/.githooks/commit-msg
@@ -5,7 +5,7 @@ if [ -z "$1" ]; then
 	exit 1
 fi
 
-commitTitle="$(cat $1 | head -n1)"
+commitTitle="$(head -n 1 < "$1")"
 
 # ignore merge
 if echo "$commitTitle" | grep -qE "^Merge"; then
@@ -15,7 +15,7 @@ fi
 
 # check commit message
 REGEX='^(feat|fix|docs|style|refactor|ci|test|chore|comment)\(.*\)\:.*'
-if ! echo "$commitTitle" | grep -qE ${REGEX}; then
+if ! echo "$commitTitle" | grep -qE "${REGEX}"; then
 	echo "Your commit title '$commitTitle' did not follow conventional commit message rules:"
 	echo "Please comply with the regex ${REGEX}"
 	exit 1

diff --git a/README.md b/README.md
@@ -38,17 +38,21 @@ ddev restart
 
 ## Basic usage
 
-### Add-on commands for `@playwright/test` package
+### Quick start
 
-#### `ddev playwright-install`
+- Create a `tests/Playwright` folder in your project root directory (Only required for this "quick start").
+- `ddev playwright-init --pm npm`
+- `ddev playwright test`
 
-This command will install `playwright` and all dependencies in a folder defined by the environment variable `PLAYWRIGHT_TEST_DIR` of the `docker-compose.playwright.yaml` file. 
+### Customization
 
-**Before running this command**, ensure that you have a `package.json` file in the `PLAYWRIGHT_TEST_DIR` folder. You will find an example of such a file in the `tests/project_root/tests/Playwright`folder of this repository. You will also find an example of a `playwright.config.js` file.
+#### Playwright testing directory
 
-By default, `tests/Playwright` is used as `PLAYWRIGHT_TEST_DIR` value, but you can override this value to suit your 
-need by creating a `docker-compose.override.yaml` (or any `docker-compose.<some-good-name>.yaml` file) in 
-the `.ddev`  root directory with the following content: 
+Each command of this add-on runs inside the `PLAYWRIGHT_TEST_DIR` directory of the Playwright container.
+
+By default, `tests/Playwright` is used as `PLAYWRIGHT_TEST_DIR` value, but you can override this value to suit your
+need by creating a `docker-compose.override.yaml` (or any `docker-compose.<some-good-name>.yaml` file) in
+the `.ddev`  root directory with the following content:
 
 ```yaml
 services:
@@ -57,9 +61,41 @@ services:
       - PLAYWRIGHT_TEST_DIR=your/playwright/directory/path
 ```
 
+If you want to use the root directory of your project, you can use the following value:
+
+```yaml
+services:
+  playwright:
+    environment:
+      - PLAYWRIGHT_TEST_DIR=./
+```
+
+
 You could also edit the value directly in the `docker-compose.playwright.yaml` file, but you risk losing your changes every time you do a  `ddev get julienloizelet/ddev-playwright` (unless you delete the `#ddev-generated` line at the beginning of the file).
 
-In addition, if there is a `.env.example` file in the folder, it will be copied into a `.env` file (to be used with the `dotenv` package for example).
+#### `.env` file
+
+If there is a `.env.example` file in the `PLAYWRIGHT_TEST_DIR` folder, it will be copied (while running `ddev playwright-install` or `ddev playwright-init` )into a `.env` file (to be used with the `dotenv` package for example).
+
+### Add-on commands for `@playwright/test` package
+
+
+#### `ddev playwright-install --pm [npm|yarn]`
+
+This command will install `playwright` and all dependencies in a folder defined by the environment variable `PLAYWRIGHT_TEST_DIR` of the `docker-compose.playwright.yaml` file.
+
+You can choose to use `npm` or `yarn` as package manager by using the `--pm` option. By default, `yarn` is used.
+
+
+**Before running this command**, ensure that you have a `package.json` file in the `PLAYWRIGHT_TEST_DIR` folder. You will find an example of such a file in the `tests/project_root/tests/Playwright`folder of this repository. You will also find an example of a `playwright.config.js` file.
+
+#### `ddev playwright-init --pm [npm|yarn]`
+
+This command will initialize a Playwright project in the `PLAYWRIGHT_TEST_DIR` as described in the [Playwright documentation](https://playwright.dev/docs/intro#installing-playwright).
+
+You can choose to use `npm` or `yarn` as package manager by using the `--pm` option. By default, `yarn` is used.
+
+Please note that this command is interactive and [should not be used in CI context](https://github.com/microsoft/playwright/issues/11843).
 
 #### `ddev playwright`
 

diff --git a/commands/playwright/playwright b/commands/playwright/playwright
@@ -14,4 +14,12 @@ cd "${PLAYWRIGHT_TEST_DIR}" || exit 1
 export PLAYWRIGHT_BROWSERS_PATH=0
 PRE="sudo -u pwuser PLAYWRIGHT_BROWSERS_PATH=0 "
 
-$PRE yarn playwright "$@"
+if [ -f "package-lock.json" ]; then
+  $PRE npx playwright "$@"
+elif [ -f "yarn.lock" ]; then
+  $PRE yarn playwright "$@" 
+else
+  echo "ERROR: could not find lock file for a supported package manager (npm, yarn) in '${PLAYWRIGHT_TEST_DIR}'"
+  echo "Please run 'ddev playwright-install' or 'ddev playwright-init' to install playwright."
+  exit 1
+fi
diff --git a/commands/playwright/playwright-init b/commands/playwright/playwright-init
@@ -0,0 +1,49 @@
+#!/bin/bash
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+## Description: Init playwright in PLAYWRIGHT_TEST_DIR
+## Usage: playwright-init --pm [npm|yarn]
+## Example: "ddev playwright-init --pm yarn"
+
+function display_help() {
+    echo "Usage: $0 --pm [yarn|npm]"
+    echo "Example: $0 --pm yarn"
+    exit 1
+}
+
+# Default package manager is not set
+PACKAGE_MANAGER=""
+
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --pm) PACKAGE_MANAGER="$2"; shift ;;
+        *) echo "Unknown parameter passed: $1"; display_help ;;
+    esac
+    shift
+done
+
+# Check if package manager is specified and valid
+if [[ -z "$PACKAGE_MANAGER" ]] || ! { [[ "$PACKAGE_MANAGER" == "yarn" ]] || [[ "$PACKAGE_MANAGER" == "npm" ]]; }; then
+    echo "Warning: Package manager should be specified with --pm and be one of 'yarn' or 'npm'."
+    echo "Defaulting to yarn"
+    PACKAGE_MANAGER="yarn"
+fi
+
+cd /var/www/html || exit 1
+cd "${PLAYWRIGHT_TEST_DIR}" || exit 1
+
+export PLAYWRIGHT_BROWSERS_PATH=0
+PRE="sudo -u pwuser PLAYWRIGHT_BROWSERS_PATH=0 "
+
+if [[ $PACKAGE_MANAGER == "npm" ]]; then
+    $PRE npm init playwright@latest
+elif [[ $PACKAGE_MANAGER == "yarn" ]]; then
+    $PRE yarn create playwright
+fi
+
+# Conditionally copy an .env file if an example file exists
+[ -f .env.example ] && [ ! -f .env ] && $PRE cp -n .env.example .env; exit 0
diff --git a/commands/playwright/playwright-install b/commands/playwright/playwright-install
@@ -6,15 +6,46 @@
 # This file comes from https://github.com/julienloizelet/ddev-playwright
 #
 ## Description: Install playwright in PLAYWRIGHT_TEST_DIR
-## Usage: playwright-install
-## Example: "ddev playwright-install"
+## Usage: playwright-install --pm [npm|yarn]
+## Example: "ddev playwright-install --pm npm"
+
+function display_help() {
+    echo "Usage: $0 --pm [yarn|npm]"
+    echo "Example: $0 --pm yarn"
+    exit 1
+}
+
+# Default package manager is not set
+PACKAGE_MANAGER=""
+
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --pm) PACKAGE_MANAGER="$2"; shift ;;
+        *) echo "Unknown parameter passed: $1"; display_help ;;
+    esac
+    shift
+done
+
+# Check if package manager is specified and valid
+if [[ -z "$PACKAGE_MANAGER" ]] || ! { [[ "$PACKAGE_MANAGER" == "yarn" ]] || [[ "$PACKAGE_MANAGER" == "npm" ]]; }; then
+    echo "Warning: Package manager should be specified with --pm and be one of 'yarn' or 'npm'."
+    echo "Defaulting to yarn"
+    PACKAGE_MANAGER="yarn"
+fi
+
 cd /var/www/html || exit 1
 cd "${PLAYWRIGHT_TEST_DIR}" || exit 1
 
 export PLAYWRIGHT_BROWSERS_PATH=0
 PRE="sudo -u pwuser PLAYWRIGHT_BROWSERS_PATH=0 "
 
-$PRE yarn install
-$PRE yarn playwright install --with-deps
+if [[ $PACKAGE_MANAGER == "npm" ]]; then
+    $PRE npm install
+    $PRE npx playwright install --with-deps
+elif [[ $PACKAGE_MANAGER == "yarn" ]]; then
+    $PRE yarn install
+    $PRE yarn playwright install --with-deps
+fi
+
 # Conditionally copy an .env file if an example file exists
 [ -f .env.example ] && [ ! -f .env ] && $PRE cp -n .env.example .env; exit 0
diff --git a/install.yaml b/install.yaml
@@ -4,6 +4,7 @@ name: playwright
 project_files:
 - commands/playwright/playwright
 - commands/playwright/playwright-install
+- commands/playwright/playwright-init
 - playwright-build/Dockerfile
 - playwright-build/kasmvnc.yaml
 - playwright-build/xstartup

diff --git a/playwright-build/entrypoint.sh b/playwright-build/entrypoint.sh
@@ -7,8 +7,8 @@
 #
 
 # Change pwuser IDs to the host IDs supplied by DDEV
-usermod -u ${DDEV_UID} pwuser
-groupmod -g ${DDEV_GID} pwuser
+usermod -u "${DDEV_UID}" pwuser
+groupmod -g "${DDEV_GID}" pwuser
 usermod -a -G ssl-cert pwuser
 
 # Install DDEV certificate

diff --git a/tests/test.bats b/tests/test.bats
@@ -107,3 +107,74 @@ teardown() {
       exit 1
   fi
 }
+
+
+@test "install with yarn" {
+  set -eu -o pipefail
+  cd ${TESTDIR}
+
+  echo "# Basic Curl check" >&3
+    CURLVERIF=$(curl https://${PROJNAME}.ddev.site/home.php | grep -o -E "<h1>(.*)</h1>"  | sed 's/<\/h1>//g; s/<h1>//g;' | tr '\n' '#')
+    if [[ $CURLVERIF == "The way is clear!#" ]]
+      then
+        echo "# CURLVERIF OK" >&3
+      else
+        echo "# CURLVERIF KO"
+        echo $CURLVERIF
+        exit 1
+    fi
+
+  echo "# ddev get ${DIR} with project ${PROJNAME} in ${TESTDIR} ($(pwd))" >&3
+  ddev get ${DIR}
+  ddev restart
+
+  echo "# Install Playwright in container with yarn" >&3
+  ddev playwright-install --pm yarn
+
+  echo "# Run a test" >&3
+  ddev playwright test
+
+  echo "# Test yarn lock file" >&3
+  cd tests/Playwright
+  if [ -f "yarn.lock" ]; then
+        echo "Yarn appears to have been used: OK"
+  else
+        echo "Yarn lock file not found: KO"
+        exit 1
+  fi
+}
+
+@test "install with npm" {
+  set -eu -o pipefail
+  cd ${TESTDIR}
+
+  echo "# Basic Curl check" >&3
+    CURLVERIF=$(curl https://${PROJNAME}.ddev.site/home.php | grep -o -E "<h1>(.*)</h1>"  | sed 's/<\/h1>//g; s/<h1>//g;' | tr '\n' '#')
+    if [[ $CURLVERIF == "The way is clear!#" ]]
+      then
+        echo "# CURLVERIF OK" >&3
+      else
+        echo "# CURLVERIF KO"
+        echo $CURLVERIF
+        exit 1
+    fi
+
+  echo "# ddev get ${DIR} with project ${PROJNAME} in ${TESTDIR} ($(pwd))" >&3
+  ddev get ${DIR}
+  ddev restart
+
+  echo "# Install Playwright in container with npm" >&3
+  ddev playwright-install --pm npm
+
+  echo "# Run a test" >&3
+  ddev playwright test
+
+  echo "# Test npm lock file" >&3
+  cd tests/Playwright
+  if [ -f "package-lock.json" ]; then
+        echo "Npm appears to have been used: OK"
+  else
+        echo "Npm lock file not found: KO"
+        exit 1
+  fi
+}