关于可视化网页自动化工具Mk过程

录制用户操作实现自动化任务流程，当在输入框输入字符时，每次都触发输入事件，发现打印出来数据很多，例如：第一次输入‘q’,触发了一次，此时记录了‘q’,紧接输入‘w’,触发了一次，此时记录‘qw’,而真

对于圈选元素这个操作，还是比较麻烦的，未来想的是是否可以在用户操作网页的过程中就把流程图构建了呢？ 如下视频： 基于DOM录制页面操作轨迹 视频中是我实现一个基于DOM录制的网页操作视频demo。其实

就如前文已经把chrome插件与electron关联上，现在缺一个运行的核心。 之前根据配置化自动化程序以及搭建好，只不过当时写死了一个流程图数据数组。现在需要就是通过参数的形式传入即可。这里考虑的传

圈选插件有，显示流程图的桌面应用也有，现在就可以把它们的数据关联起来。 实现思路 1、 创建新任务时，使用ipc通信在后台起一个websocket服务 2、启动一个带有元素圈选chrome插件的浏览器

前期工作已搞定，现在可以搭建桌面应用了。这个阶段可以结合前面定义好的数据格式构建流程图。 模板 还是使用熟悉的技术栈vite + react + electron，模板 流程图 官方文档 自定义 节点

通过一份关于Chrome插件开发指北 、网页元素圈选两篇文章，基本了解到chrome插件开发，以及元素圈选的实现逻辑，那么咱就可以整自动化工具的chrome插件圈选元素的功能。 模板 这里使用到的是基

从前面我们已验证配置自动化是可行的，接下来就实现元素选择，当然有了配置化，我们也是可以通过浏览器F12的调试工具去把元素xpath复制出来（ps:反正又不是不能用），但是这不是我们最终目的。 其实圈选

前两篇文章《Node.js和Puppeteer进行Web抓取的简单使用》 和《Puppeteer结合Jest对网页进行测试》已经了解到Puppeteer大致可以做点什么事情，之前提到过最终自动化需要一

之前我们使用Puppeteer进行网页爬虫（以及自动化操作），这篇文章主要验证一下Puppeteer测试的可实现性。 项目设置 让我们从设置一个基本的React应用程序开始。 我们将安装其他依赖项,如

至此我们大概了解到 node + electron + 谷歌浏览器基本开发知识，现在就可以肝代码了。不要忘记自动化工具主要功能，自动化操作网页。这个时候我们就用到了 Puppeteer 这个库。 Pu

Electron教程 本文涉及到的只是在自动化工具使用的部分，具体详情请前往官方文档查阅。 好的,我会尽力把这篇关于Electron和TypeScript的文章翻译成中文: 如何使用ipcMain和i

继上文，任务保存数据需要持久化，考虑使用的是sqlite3数据库。下面我们将看到如何在Node.js中设置sqlite3并对sqlite3数据库运行不同类型的SQL查询。 涵盖的主题 什么是SQLit

node全面入门教程 本文涉及内容是关于自动化工具开发使用到部分开发知识。 fs文件操作 fs模块提供了在Node.js中轻松读取文件的API。这里是逐步读取文件指南: 创建一个名为app.js的新文

目前开发v2版本开发教程可看这里 但目前谷歌浏览器强制要v3，本文主要是总结一些v3跟v2的不同。 为什么迁移到清单V3? 正如Chrome的文档所说: manifest.json的更改 更改版本 首

如何着手开发一款自动化工具？我们不能仅仅依靠编写大量代码来实现，否则可能会发现一整天过去了，却没有取得什么进展。接下来，我将详细介绍我个人的准备过程。 需要实现哪些功能？ 首先，我们需要明确要实现的功

功能 采集掘金文章标题（前10条） 开始设计 如上文操作基本一致。新建任务、设计点击事件如出一辙。 采集标题 选取标题元素，采集内容有text文本、href链接、src数据，采集方式有自身元素、列表（

功能 采集掘金左边每个tab下文章的标题。人为操作就是点击一个tab，复制文字标题，重复以上操作。根据这个，我们可以转换成自己的代码 开始设计 如上文操作基本一致。新建任务、设计点击事件如出一辙。 自

功能 想在掘金测试一下，搜索关键词“测试”，出现第一条的数据标题是否为：“前端单元测试入门实践” 开始设计 如上文操作基本一致。新建任务、设计点击事件如出一辙。 输入“测试” 选取输入框，然后填写参数

领取红包指南 当你想领取红包操作流程如下： 打开CSDN官网 登录你CSDN账号 找到红包那个专栏 选择一个有红包的文章，前往页面领取 点击红包领取 这个流程就是人为操作的过程，那么如何使用工具模拟这

整体 整个软件由首页、设计页构成 首页 按钮功能 清除缓存：主要为了避免线程占用的问题，端口占用无法重新执行。所以操作执行任务、修改任务、新建任务没有响应时，可以操作该事件 新建任务：顾名思义就是创建