Using husky Pre-Commit Hooks to Ensure Playwright Version Consistency

Aron Schüler Published Jun 18, 2024

Ensuring Playwright Version Consistency with Pre-Commit Hooks

In web development, maintaining your package versions is one of the weekly tasks for many dev teams. One common issue that often arises for us is when upgrading npm packages: ensuring the Playwright version specified in your package.json matches the version used in your CI/CD pipeline configuration (.gitlab-ci.yml). Inconsistencies can lead to pipeline failures and wasted time+resources. If you are using playwright, I bet you have seen this before:

╔══════════════════════════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just updated to 1.26.0. ║
║ Please update docker image as well.                                  ║
║ -  current: mcr.microsoft.com/playwright:v1.23.0-focal               ║
║ - required: mcr.microsoft.com/playwright:v1.26.0-focal               ║
║                                                                      ║
║ <3 Playwright Team                                                   ║
╚══════════════════════════════════════════════════════════════════════╝

To address this, we need to change the .gitlab-ci.yml docker image tag to match our updated package.json version. But then, this will happen over and over again. Better would be: set up Husky with a pre-commit hook that checks if the Playwright versions in package.json and .gitlab-ci.yml match before any commit is made, preventing these errors! To do so, follow these few steps:

Step-by-Step Guide

1. Step 1: Install Husky

   • First, ensure you have Husky installed in your project:

     npm install husky --save-dev

2. Step 2: Enable Git Hooks in Your Project

   • Initialize Husky to enable Git hooks:

     npx husky install

3. Step 3: Create a Husky Pre-Commit Hook

   • Add a pre-commit hook by running:

     npx husky add .husky/pre-commit "bash scripts/check_playwright_versions.sh"

4. Step 4: Write the Version Check Script

   • Create a directory named scripts in your project root if it doesn’t exist:

     mkdir -p scripts

   • In the scripts directory, create a script named check_playwright_versions.sh:

     #!/bin/bash
      
     echo "[*] Checking if Playwright versions match between package.json and .gitlab-ci.yml"
     # Extract version from package.json
     package_json_version=$(grep '"@playwright/test":' package.json | sed -E 's/.*"@playwright\/test": "\^?([0-9]+\.[0-9]+\.[0-9]+)".*/\1/')
      
     # Extract version from .gitlab-ci.yml
     gitlab_ci_version=$(grep 'image: mcr.microsoft.com/playwright:' .gitlab-ci.yml | sed -E 's/.*image: mcr\.microsoft\.com\/playwright:v([0-9]+\.[0-9]+\.[0-9]+).*/\1/')
      
     # Compare versions
     if [ "$package_json_version" != "$gitlab_ci_version" ]; then
       echo "[!] Playwright version mismatch!"
       echo "package.json version: $package_json_version"
       echo ".gitlab-ci.yml version: $gitlab_ci_version"
       exit 1
     else
       echo "[*] Playwright versions match!"
       exit 0
     fi

   • Make the script executable:

     chmod +x scripts/check_playwright_versions.sh

5. Step 5: Verify Your Setup

   • Test your pre-commit hook by making a change and committing it:

     git add .
     git commit -m "Test Husky pre-commit hook"

   • If the Playwright versions don’t match, the commit will be blocked, and you’ll see an error message.

Conclusion

By using Husky to set up a pre-commit hook that ensures Playwright versions match between package.json and .gitlab-ci.yml, you can prevent pipeline failures caused by version mismatches. Should save you a bit of time returning to those chore: upgrade packages pull requests only to see that your playwright stage failed.

Regularly update and review your hooks and scripts to adapt to changes in your project configuration. If you have any questions or experiences to share, feel free to leave a comment below. Happy coding!