如何在HTML页面点击按钮运行Java Runnable自动化测试JAR文件？

首先得明确一个关键限制：纯前端HTML/JS无法直接调用本地的JAR文件——浏览器出于安全考虑，禁止前端脚本直接访问本地系统资源或执行本地程序。不过我们有两种靠谱的方案来实现你的需求，下面一步步讲清楚：

方案1：用后端服务中转（适合需要Web访问的场景） #

这个方案是最通用的，通过一个轻量后端接收前端请求，由后端执行JAR文件并返回输出到页面。这里以Java Servlet为例（和你的技术栈匹配）：

步骤1：编写后端Servlet（负责执行JAR） #

创建一个Servlet类，用来处理前端的请求、运行JAR并捕获输出：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.File;

@WebServlet("/runTest")
public class TestScriptRunner extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/plain;charset=UTF-8");
        String userParams = request.getParameter("testParams");
        
        // 替换为你的Runnable JAR的绝对路径
        String jarAbsolutePath = "C:/your-project-path/selenium-test-script.jar";
        ProcessBuilder processBuilder = new ProcessBuilder("java", "-jar", jarAbsolutePath);
        
        // 如果需要传递用户输入的参数给JAR
        if (userParams != null && !userParams.trim().isEmpty()) {
            processBuilder.command().add(userParams.trim());
        }
        
        // 可选：设置JAR的工作目录（如果脚本需要读取特定路径的文件）
        processBuilder.directory(new File("C:/your-project-path/"));
        
        Process process = processBuilder.start();
        
        // 收集脚本的标准输出和错误输出
        StringBuilder output = new StringBuilder();
        try (BufferedReader stdoutReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
            String line;
            while ((line = stdoutReader.readLine()) != null) {
                output.append(line).append("\n");
            }
        }
        
        try (BufferedReader stderrReader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {
            String line;
            while ((line = stderrReader.readLine()) != null) {
                output.append("[ERROR] ").append(line).append("\n");
            }
        }
        
        // 等待脚本执行完成
        int exitCode = process.waitFor();
        output.append("\n脚本执行结束，退出码：").append(exitCode);
        
        response.getWriter().write(output.toString());
    }
}

步骤2：编写前端HTML页面 #

创建一个带输入框、按钮和输出区域的页面，通过AJAX请求后端Servlet：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Selenium测试脚本运行器</title>
    <style>
        #outputArea {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            height: 350px;
            overflow-y: auto;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h2>自动化测试脚本控制台</h2>
    <div>
        <label>测试参数：</label>
        <input type="text" id="testParams" placeholder="例如：测试环境URL">
        <button onclick="executeTestScript()">运行测试脚本</button>
    </div>
    <div id="outputArea"></div>

    <script>
        function executeTestScript() {
            const params = document.getElementById('testParams').value;
            const outputArea = document.getElementById('outputArea');
            outputArea.innerHTML = '正在启动测试脚本，请稍候...\n';

            // 发送请求到后端Servlet
            fetch('runTest', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `testParams=${encodeURIComponent(params)}`
            })
            .then(response => response.text())
            .then(result => {
                outputArea.innerHTML = result;
            })
            .catch(error => {
                outputArea.innerHTML = `请求出错：${error.message}`;
            });
        }
    </script>
</body>
</html>

步骤3：部署运行 #

把Servlet和HTML文件部署到Tomcat/Jetty等Java Web服务器上，启动服务器后访问HTML页面即可。

方案2：用Electron打包成桌面应用（适合纯桌面GUI场景） #

如果你不需要Web访问，只想做一个桌面版的HTML界面，Electron是绝佳选择——它可以结合HTML/JS和Node.js，Node.js拥有执行本地程序的权限。

步骤1：初始化Electron项目 #

1. 安装Node.js和npm
2. 创建项目文件夹，执行以下命令：

   npm init -y
   npm install electron --save-dev
   

步骤2：编写Electron主进程代码（main.js） #

主进程负责和系统交互，执行JAR文件：

const { app, BrowserWindow, ipcMain } = require('electron');
const { exec } = require('child_process');
const path = require('path');

function createMainWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
    createMainWindow();
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

// 监听前端的运行请求
ipcMain.on('run-test-script', (event, userParams) => {
    const jarPath = path.join(__dirname, 'selenium-test-script.jar'); // 和JAR同目录
    let command = `java -jar "${jarPath}"`;
    if (userParams) command += ` ${userParams}`;

    exec(command, (error, stdout, stderr) => {
        let output = '';
        if (stdout) output += stdout;
        if (stderr) output += '\n[ERROR] ' + stderr;
        if (error) output += '\n执行错误：' + error.message;
        // 将结果发回前端
        event.reply('script-output', output);
    });
});

步骤3：编写前端HTML页面（index.html） #

和方案1的HTML类似，只是通过Electron的IPC机制和主进程通信：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Selenium测试脚本桌面运行器</title>
    <style>
        #outputArea {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            height: 350px;
            overflow-y: auto;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h2>自动化测试脚本控制台</h2>
    <div>
        <label>测试参数：</label>
        <input type="text" id="testParams" placeholder="例如：测试环境URL">
        <button onclick="executeTestScript()">运行测试脚本</button>
    </div>
    <div id="outputArea"></div>

    <script>
        const { ipcRenderer } = require('electron');

        function executeTestScript() {
            const params = document.getElementById('testParams').value;
            const outputArea = document.getElementById('outputArea');
            outputArea.innerHTML = '正在启动测试脚本，请稍候...\n';

            ipcRenderer.send('run-test-script', params);
        }

        // 接收主进程返回的脚本输出
        ipcRenderer.on('script-output', (event, output) => {
            document.getElementById('outputArea').innerHTML = output;
        });
    </script>
</body>
</html>

步骤4：启动和打包 #

在package.json中添加启动脚本：

{
  "name": "selenium-test-runner",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . --platform=win32 --arch=x64"
  }
}

执行npm start即可启动桌面应用，执行npm run package可以打包成exe文件。

内容的提问来源于stack exchange，提问作者SAI RAM