Gary Parker

The problem

The development, build and release process can be fairly complex and time-consuming. When an issue is found further into the release process, the investigation has to be taken all the way back to local before proceeding back along to production.

Shifting aspects of testing earlier in the lifecycle is beneficial, as issues are cheaper to fix and the feedback loop is smaller. Being able to run automated tests earlier on is one aspect to this, potentially catching regressions.

Solution

Taking advantage of Git Hooks - we can create a pre-commit hook, which triggers a script.

The idea is that we trigger Playwright tests, based on the files which have been changed as part of development.

For example, if we make an update to src/components/header.tsx the matching test case should be executed tests/components/header.spec.

The benefit of using hooks, is that code cannot be committed/pushed unless it has been checked. We remove some risk and bring it closer to development, when usually these tests would be run after a build and deployment to another environment.

Pre-commit hook

The script is fairly self-explanatory and there are some comments in the example below. We check the git-diff and track any changes in /src, and compare them to any matching files in /tests.

If there is a match, Playwright test execution will start - if the test passes the commit is successful, otherwise the commit is blocked.

const { execSync } = require("child_process");
const fs = require("fs");
const path = require("path");
 
/**
 * Finds corresponding test file(s) in the "tests/" directory for a given source file.
 */
function findTestFiles(filePath) {
    const testFiles = [];
    const fileName = path.basename(filePath, path.extname(filePath)); // Get file name without extension
    const testExtensions = [".spec.ts", ".spec.tsx", ".test.ts", ".test.tsx"];
 
    testExtensions.forEach(ext => {
        const testPath = path.posix.join("tests", `${fileName}${ext}`);
        if (fs.existsSync(testPath)) {
            testFiles.push(testPath);
        }
    });
 
    return testFiles;
}
 
/**
 * Retrieves the list of changed source files.
 */
function getChangedFiles() {
    try {
        return execSync("git diff --staged --name-only", { encoding: "utf-8" })
            .trim()
            .split("\n")
            .filter(file => file.startsWith("src/")); // Only track source files
    } catch (error) {
        console.error("Error getting changed files:", error);
        return [];
    }
}
 
// Main execution
const changedFiles = getChangedFiles();
let testFiles = new Set();
 
changedFiles.forEach(file => {
    findTestFiles(file).forEach(testFile => testFiles.add(testFile));
});
 
if (testFiles.size > 0) {
    const testCommand = `npx playwright test ${[...testFiles].map(f => `"${f}"`).join(" ")}`;
    console.log(`Executing: ${testCommand}`);
 
    try {
        execSync(testCommand, { stdio: "inherit", shell: true });
    } catch (error) {
        console.error("Playwright tests failed:", error);
        process.exit(1); // Block commit on test failure
    }
} else {
    console.log("No relevant tests found. Skipping Playwright test execution.");
}

Trigger pre-commit

We have made a change to src/components/header.tsx file, and we are going to commit the changes.

PS C:\Users\garyp\git\playwright-boilerplate-main\playwright> git status
On branch main
 
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   src/components/header.tsx

As you can see in the below output, the pre-commit hook is triggered and the matching Playwright tests are executed. 2 Tests are triggered and complete after 2.9 seconds, and the commit completes successfully.

PS C:\Users\garyp\git\playwright-boilerplate-main\playwright> git commit -m "updated header component"
Executing: npx playwright test "tests/components/header.spec.ts"
 
Running 2 tests using 2 workers
  2 passed (2.9s)
 
To open last HTML report run:
 
  npx playwright show-report
 
[main 212c0d9] updated header component
 1 file changed, 1 insertion(+), 1 deletion(-)

Trigger pre-commit with breaking change

If we making a breaking change in the dev code and run the tests, both tests fail as intended. The commit process exits and if we check git status, you can see no changes were committed.

PS C:\Users\garyp\git\playwright-boilerplate-main\playwright> git commit -m "breaking change in header"
Executing: npx playwright test "tests/components/header.spec.ts"
 
Running 2 tests using 2 workers
  1) [chromium] › tests\components\header.spec.ts:8:5 › get started link ───────────────────────────
 
    Error: expect(locator).toBeVisible()
 
  2) [chromium] › tests\components\header.spec.ts:3:5 › has title ──────────────────────────────────            
 
    Error: expect(locator).toHaveTitle(expected)
 
  2 failed
    [chromium] › tests\components\header.spec.ts:3:5 › has title ───────────────────────────────────
    [chromium] › tests\components\header.spec.ts:8:5 › get started link ────────────────────────────
 
PS C:\Users\garyp\git\playwright-boilerplate-main\playwright> git status
On branch main
Your branch is ahead of 'origin/main' by 4 commits.
  (use "git push" to publish your local commits)
 
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   src/components/header.tsx
        modified:   tests/components/header.spec.ts

Conclusion

This is a pretty easy process to implement and provides developers with almost instant feedback on any potential issues with their code. It also encourages the team to write tests alongside their development code from a UI perspective, in addition to any other tests.