Electron点击按钮调用Playwright实现自动登录失败排查

核心排查方向 #

1. Electron进程通信有效性 #

• 确认渲染进程（页面按钮点击事件）是否正确向主进程发送IPC消息：检查渲染进程中ipcRenderer.send的调用逻辑，主进程是否通过ipcMain.on正确监听对应事件。
• 在渲染进程的点击事件、主进程的监听回调中添加console.log，验证消息是否正常传递。

2. Playwright执行环境与权限 #

• 检查Playwright依赖是否完整：执行npx playwright install确保浏览器驱动已正确安装。
• 确认Electron主进程调用Playwright时的权限：Windows系统下可能需要管理员权限，或排查杀毒软件是否拦截了浏览器进程启动。
• 用try/catch包裹Playwright的执行代码，捕获并打印错误信息，定位是否是执行逻辑抛出异常。

3. 异步逻辑处理正确性 #

• Playwright所有操作均为异步，确认调用时是否正确使用async/await，避免因未等待异步操作完成导致无反馈。比如主进程中调用Playwright的函数需标记为异步，并通过await执行。

4. Node.js服务交互有效性 #

• 如果通过server.js的服务触发Playwright，检查Electron是否正确发起接口请求：验证请求地址、跨域配置是否正确，服务端接口是否正常接收请求。
• 在服务端接口逻辑中添加日志，确认请求是否到达，以及Playwright调用是否触发。

具体代码排查步骤 #

1. 验证渲染进程按钮事件
   确保点击事件绑定正确，IPC消息发送无误：

// 渲染进程示例代码
document.getElementById('loginBtn').addEventListener('click', () => {
    console.log('登录按钮被点击');
    window.electronAPI.triggerLogin(); // 或直接调用ipcRenderer.send('trigger-login')
});

2. 验证主进程IPC监听
   确认主进程正确接收消息并执行Playwright逻辑：

// 主进程示例代码
const { ipcMain } = require('electron');
const { runPlaywright } = require('./playwright');

ipcMain.on('trigger-login', async (event) => {
    console.log('主进程收到登录触发请求');
    try {
        await runPlaywright();
        console.log('Playwright执行完成');
    } catch (err) {
        console.error('Playwright执行错误:', err);
        event.reply('login-fail', err.message);
    }
});

3. 验证Playwright执行逻辑
   确保异步操作有完整的错误捕获：

// playwright.js示例代码
const { chromium } = require('playwright');

async function runPlaywright() {
    console.log('启动Playwright逻辑');
    const browser = await chromium.launch({ headless: false }); // 关闭无头模式，直观验证浏览器是否启动
    const page = await browser.newPage();
    try {
        await page.goto('https://etax.zhejiang.chinatax.gov.cn/');
        // 后续登录操作逻辑...
    } catch (err) {
        console.error('页面操作出错:', err);
        throw err;
    }
}

module.exports = { runPlaywright };

4. 验证Node服务接口交互
   如果通过HTTP请求触发服务端逻辑，确认请求代码正确：

// 渲染进程请求服务示例
fetch('http://localhost:3000/login')
    .then(res => res.json())
    .catch(err => console.error('请求服务出错:', err));

快速验证方法 #

• 直接在主进程中手动调用runPlaywright()，验证Playwright本身是否能正常启动浏览器并执行流程。
• 打开Electron开发者工具（Ctrl+Shift+I），查看控制台是否有报错信息。
• 查看Node服务的控制台日志，确认请求是否到达及执行情况。

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