Selenium测试中访问Redux状态与发送Redux Action实现方案

我最近搞定了一套适合Node.js驱动Selenium的自动化测试方案，既能模拟用户操作测试应用的外部表现，还能直接和应用的Redux层交互——发送Redux Action、读取Redux状态，分享给有需要的朋友：

核心实现步骤 #

1. Node.js侧：通过Selenium发送Action并获取Redux状态 #

在你的Selenium测试代码里，用executeAsyncScript来和前端通信，发送Action并等待返回状态：

const state = await driver.executeAsyncScript(
  "window.stCap({action: arguments[0], cb: arguments[arguments.length - 1]});",
  { type: "global_ST_CAP_GET" }
);

• 第一个参数是你要发送的Redux Action（这里是用于获取状态的global_ST_CAP_GET）
• 第二个参数是Selenium自动注入的回调函数，用来接收Redux返回的状态

2. 前端工具层：搭建通信桥梁 #

创建一个工具文件，暴露全局通信入口，把Selenium发来的请求转递给Redux中间件：

let globalActionRequest;
export const globalActionRequestSet = ar => { globalActionRequest = ar; };
window.stCap = function({ action, cb }) { 
  globalActionRequest({ ...action, cb }); 
};

stCap作为前端暴露给Selenium的全局方法，会把接收到的Action（带回调）传递给存在globalActionRequest里的Redux处理函数。

3. 顶层React组件：接入Redux环境 #

在你的顶层React组件初始化时，把Redux的dispatch函数（通过mapDispatchToProps注入）存入globalActionRequest，让通信桥能连接到Redux：

import { globalActionRequestSet } from "../path/to/your/utils-file";

class AppRoot extends React.Component {
  constructor(props) {
    super(props);
    globalActionRequestSet(props.actionRequest);
  }
  // ...其他组件逻辑
}

const mapDispatchToProps = { 
  actionRequest: action => action 
};

export default connect(null, mapDispatchToProps)(AppRoot);

这里mapDispatchToProps直接把Action原样传递给Redux，让globalActionRequest拿到的就是能触发Action的函数。

4. Redux Saga层：实现状态读取逻辑 #

最后在Saga里实现监听global_ST_CAP_GET Action的逻辑，读取整个Redux状态并通过回调返回给Selenium：

// 在你的sagas文件里
const global_ST_CAP_GET = function* ({ cb }) {
  const state = yield select(state => state);
  cb(state);
};

// 添加到root saga里
fork(function*() {
  yield takeEvery("global_ST_CAP_GET", global_ST_CAP_GET);
});

方案优势 #

这套方案把Selenium的用户视角测试和Redux的内部状态验证结合起来了——你既可以模拟用户点击按钮测试UI变化，又能直接发送Action、读取状态来验证业务逻辑的正确性，测试覆盖更全面。

欢迎大家提出改进建议！

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