Develop a watcher tool to improve the development experience in BDD

[dadiorchen]

As mentioned here: https://github.com/Greenstand/treetracker-wallet-app/pull/609/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R157 (In the README.md part), the webdriverio can not watch specific file to re-run the test, inspired by this:

"serve:ui5": "ui5 serve --port 8081 ",
"test": "wdio run ./webapp/test/wdio.conf.js",
"test:watch": "chokidar './webapp/**/*.js' -c 'npm run test'",
"test:watch:ready": "wait-on tcp:8081 & npm run test:watch",
"tdd": "run-p serve:ui5 test:watch:ready"

mauriciolauffer/wdio-qunit-service#42

We can build a CLI/programe to run a watcher and re-run the test, the idea:

• Use chokidar + zx to run watch files and trigger rerun.
• Use zx because it is a better way to manage sub process.
• Note: before re-run test, we need to kill previous process, this is because: when we do browser.debug(), the process is stopped at the interactive command mode, if we don't kill the current process, we can not run the test correctly.

[dadiorchen]

Here is an answer by AI:
Possible code solution for watch:
Yes! This is a common issue with file watchers. You need to properly kill the previous WDIO process before starting a new one. Here are several solutions:
Solution 1: Proper Process Management with Chokidar
// watch-tests.js
const chokidar = require('chokidar');
const { spawn, execSync } = require('child_process');

let wdioProcess = null;
let isRunning = false;

function killPreviousProcess() {
if (wdioProcess) {
console.log('🛑 Killing previous test process...');

    // Kill the process and all its children
    wdioProcess.kill('SIGTERM');
    
    // Force kill if it doesn't exit gracefully
    setTimeout(() => {
        if (wdioProcess && !wdioProcess.killed) {
            wdioProcess.kill('SIGKILL');
        }
    }, 5000);
    
    wdioProcess = null;
}

}

function runTests() {
if (isRunning) {
console.log('⏳ Tests already running, waiting for completion...');
return;
}

killPreviousProcess();

isRunning = true;
console.log('🚀 Starting tests...');

wdioProcess = spawn('npx', ['wdio', 'wdio.conf.js'], {
    stdio: 'inherit',
    shell: true,
    detached: false  // Important: don't detach process
});

wdioProcess.on('close', (code) => {
    console.log(`✅ Tests completed with exit code: ${code}`);
    isRunning = false;
    wdioProcess = null;
});

wdioProcess.on('error', (error) => {
    console.error('❌ Test process error:', error);
    isRunning = false;
    wdioProcess = null;
});

}

// Debounce function to prevent multiple rapid triggers
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}

const debouncedRunTests = debounce(runTests, 1000);

// Initialize watcher
const watcher = chokidar.watch([
'./src//*.js',
'./tests//.js',
'./pages/**/.js',
'./wdio.conf.js'
], {
ignored: /node_modules|.git|dist|build/,
persistent: true,
ignoreInitial: true
});

watcher
.on('ready', () => {
console.log('👀 Initial scan complete. Watching for changes...');
runTests(); // Run tests initially
})
.on('change', (path) => {
console.log(📁 File changed: ${path});
debouncedRunTests();
})
.on('add', (path) => {
console.log(📁 File added: ${path});
debouncedRunTests();
})
.on('unlink', (path) => {
console.log(📁 File removed: ${path});
debouncedRunTests();
});

// Handle process termination
process.on('SIGINT', () => {
console.log('\n🛑 Shutting down watcher...');
killPreviousProcess();
watcher.close();
process.exit(0);
});

process.on('SIGTERM', () => {
console.log('\n🛑 Received termination signal...');
killPreviousProcess();
watcher.close();
process.exit(0);
});
Solution 2: Using Process Tree Killing
For more reliable process termination (kills child processes too):
// watch-tests.js
const chokidar = require('chokidar');
const { spawn } = require('child_process');
const treeKill = require('tree-kill'); // Install: npm install tree-kill

let wdioProcess = null;
let isRunning = false;

function killPreviousProcess() {
return new Promise((resolve) => {
if (!wdioProcess) {
resolve();
return;
}

    console.log('🛑 Killing previous test process...');
    treeKill(wdioProcess.pid, 'SIGTERM', (err) => {
        if (err) {
            console.log('⚠️  Could not kill process tree:', err.message);
        } else {
            console.log('✅ Successfully killed process tree');
        }
        wdioProcess = null;
        isRunning = false;
        resolve();
    });
});

}

async function runTests() {
if (isRunning) {
console.log('⏳ Tests already running, skipping...');
return;
}

await killPreviousProcess();

isRunning = true;
console.log('🚀 Starting tests...');

wdioProcess = spawn('npx', ['wdio', 'wdio.conf.js'], {
    stdio: 'inherit',
    shell: true
});

wdioProcess.on('close', (code) => {
    console.log(`✅ Tests completed with exit code: ${code}`);
    isRunning = false;
});

wdioProcess.on('error', (error) => {
    console.error('❌ Test process error:', error);
    isRunning = false;
});

}

// Debounce with async/await
function debounceAsync(func, wait) {
let timeout;
return function executedFunction(...args) {
return new Promise((resolve) => {
const later = async () => {
clearTimeout(timeout);
const result = await func(...args);
resolve(result);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
});
};
}

const debouncedRunTests = debounceAsync(runTests, 1500);

// Watcher setup (same as above)
const watcher = chokidar.watch([
'./src//*.js',
'./tests//*.js'
], {
ignored: /node_modules|.git/,
ignoreInitial: true
});

watcher
.on('ready', () => {
console.log('👀 Watching for changes...');
runTests();
})
.on('change', (path) => {
console.log(📁 File changed: ${path});
debouncedRunTests();
});

process.on('SIGINT', async () => {
console.log('\n🛑 Shutting down...');
await killPreviousProcess();
watcher.close();
process.exit(0);
});
Solution 3: Simple Version with Process Control
// simple-watcher.js
const chokidar = require('chokidar');
const { exec } = require('child_process');

let currentProcess = null;

function runTests() {
// Kill previous process
if (currentProcess) {
process.kill(-currentProcess.pid); // Kill process group
currentProcess = null;
}

console.log('🚀 Running tests...');

currentProcess = exec('npx wdio wdio.conf.js', (error, stdout, stderr) => {
    if (error) {
        console.error('❌ Test error:', error);
    }
    currentProcess = null;
});

// Pipe output to current terminal
currentProcess.stdout.pipe(process.stdout);
currentProcess.stderr.pipe(process.stderr);

}

const watcher = chokidar.watch(['./src//*.js', './tests//*.js'], {
ignored: /node_modules/,
ignoreInitial: true
});

let changeTimeout;
watcher.on('change', (path) => {
console.log(📁 Changed: ${path});
clearTimeout(changeTimeout);
changeTimeout = setTimeout(runTests, 500); // Debounce 500ms
});

// Initial run
runTests();
Solution 4: Using concurrentlywith Better Process Management
// package.json scripts
{
"scripts": {
"test:watch": "concurrently "npm run watch:src" "npm run watch:tests"",
"watch:src": "chokidar "src//*.js" -c "npm run test:single"",
"watch:tests": "chokidar "tests//*.js" -c "npm run test:single"",
"test:single": "pkill -f 'wdio.conf.js' || true && npx wdio wdio.conf.js"
}
}
Key Fixes in These Solutions:

1. Proper Process Killing
   // Before (problematic):
   wdioProcess.kill(); // Might not kill child processes

// After (better):
wdioProcess.kill('SIGTERM'); // Graceful shutdown
// or
treeKill(wdioProcess.pid); // Kill entire process tree
2. Debouncing
// Prevent multiple rapid triggers
const debouncedRun = debounce(runTests, 1000);
3. Process State Management
let isRunning = false; // Track if tests are currently running

if (isRunning) {
console.log('⏳ Tests already running, skipping...');
return;
}
4. Clean Exit Handling
process.on('SIGINT', () => {
killPreviousProcess();
watcher.close();
process.exit(0);
});
Installation for Enhanced Solutions:

For tree-kill solution

npm install --save-dev tree-kill

For chokidar (if not already installed)

npm install --save-dev chokidar
Run Your Fixed Watcher:
node watch-tests.js
Recommendation: Start with Solution 1 as it's the most robust. If you still have issues with processes not terminating properly, use Solution 2 with tree-killwhich is more aggressive about killing child processes.
The key improvements are:

• ∙✅ Proper process termination
• ∙✅ Debouncing to prevent rapid re-runs
• ∙✅ Process state tracking
• ∙✅ Clean shutdown handling
• ∙✅ Better error handling