电子产品购物网站_电子产品购物网站有哪些

你是否厌倦了在购物网站上重复的手动操作？从登录账号到搜索商品、挑选商品、加入购物车，再到下单支付，这些步骤既耗时又繁琐。好消息是，通过 Midscene 这个 AI 驱动的浏览器自动化工具，你可以用自然语言描述任务，让它自动完成这一切。

 

你是否厌倦了在购物网站上重复的手动操作？从登录账号到搜索商品、挑选商品、加入购物车，再到下单支付，这些步骤既耗时又繁琐好消息是，通过 Midscene 这个 AI 驱动的浏览器自动化工具，你可以用自然语言描述任务，让它自动完成这一切。

本文将带你从零开始，通过一个具体的例子——在购物网站上完成登录、搜索、挑选商品、加入购物车和下单的全过程，展示 Midscene 的强大功能无论你是编程新手还是老手，这篇教程都会让你轻松上手！

一、Midscene 简介Midscene 是一个开源的 JavaScript 工具包（SDK），结合人工智能和浏览器自动化技术（如 Puppeteer），让你通过简单的自然语言指令控制网页它可以识别页面元素并执行操作，比如“点击登录按钮”或“搜索商品”。

以下是它的核心优势：自然语言驱动：用日常语言描述任务，Midscene 就能理解并执行易于上手：支持 Chrome 插件和脚本两种方式，适合不同水平用户灵活性强：兼容多种 AI 模型，并能集成 Puppeteer 等工具。

接下来，我们将以一个购物网站为例，逐步实现自动化流程二、准备工作：设置环境在开始之前，我们需要准备 Midscene 的运行环境这里提供两种方式：Chrome 插件（适合零基础用户）和脚本环境（适合有编程基础用户）。

我们将重点介绍脚本方式，因为它能完成完整的自动化任务2.1 安装 Node.js 和 Midscene安装 Node.jsMidscene 需要 Node.js 环境打开命令行（Windows 用 cmd，Mac 用“终端”），输入 node -v 检查是否已安装。

如果没有，访问 Node.js 官网 下载安装创建项目文件夹新建一个文件夹（如 shopping-demo），用命令行进入：cd 路径/到/shopping-demo初始化项目输入以下命令创建 Node.js 项目：

npm init -y安装 Midscene 和 Puppeteer输入：npm install @midscene/web puppeteer 这会安装 Midscene 和 Puppeteer（一个浏览器自动化工具）。

验证环境创建文件 test.js，输入：const puppeteer = require(puppeteer); (async () => { const browser = await puppeteer.launch();

const page = await browser.newPage(); await page.goto(https://www.example.com);console.log(成功打开页面！

); await browser.close(); })(); 运行 node test.js，如果看到“成功打开页面！”，说明环境就绪三、实战：自动化购物全流程我们以京东（打开京东网站并登录搜索“iPhone 15”。

挑选第一个搜索结果加入购物车下单支付3.1 任务分解与脚本编写创建一个文件 shopping.js，输入以下代码：const { Midscene } = require(@midscene/web);

const puppeteer = require(puppeteer); (async () => { // 启动浏览器const browser = await puppeteer.launch(

{ headless: false }); // headless: false 表示可见浏览器窗口const page = await browser.newPage(); await page.goto(

https://www.jd.com);// 初始化 Midsceneconst midscene = new Midscene(page); // 步骤 1：登录await midscene.aiCommand(

Click the "登录" button); await page.waitForNavigation(); // 等待页面跳转await page.type(#loginname, 你的用户名

); // 输入用户名await page.type(#nloginpwd, 你的密码); // 输入密码await page.click(#loginsubmit); // 点击登录提交按钮

await page.waitForNavigation(); // 等待登录完成// 步骤 2：搜索“iPhone 15”await midscene.aiCommand(

Type "iPhone 15" into the search box and press Enter); // 步骤 3：挑选第一个商品await midscene.aiCommand(Click the first product

in the search results); // 步骤 4：加入购物车await midscene.aiCommand(Click the "加入购物车" button); // 步骤 5：下单支付

await midscene.aiCommand(Go to the shopping cart); await midscene.aiCommand(Click the "去结算" button

); await midscene.aiCommand(Click the "提交订单" button); // 关闭浏览器await browser.close(); })();3.2 运行脚本

在命令行输入：nodeshopping.js浏览器会自动打开京东，依次完成登录、搜索、挑选商品、加入购物车和下单的步骤3.3 代码说明登录部分： midscene.aiCommand(Click the "登录" button)：让 Midscene 点击登录按钮。

page.type 和 page.click：用 Puppeteer 填写用户名密码并提交，因为登录涉及输入具体信息，Puppeteer 更精确 page.waitForNavigation()：确保页面跳转完成。

搜索和后续操作：Midscene 用自然语言命令完成搜索、点击商品、加入购物车和下单等操作它会自动识别页面上的元素并执行注意：登录可能涉及验证码，实际运行时需根据情况调整（如手动处理验证码或使用已登录状态）。

支付涉及敏感信息，建议测试时停止在“提交订单”前，避免真实交易四、调试与常见问题如果脚本出错，可以这样调试：检查日志：运行时观察浏览器行为，确认每步是否正确添加等待：如果页面加载慢，可加入：await midscene.aiCommand(

Wait for the page to load);简化测试：先单独测试某一步，如登录或搜索常见问题：登录失败：可能是验证码或元素未加载，尝试手动登录后从搜索开始按钮找不到：确认自然语言描述准确，或用 Chrome 插件测试命令。

五、总结通过这个例子，你已经学会用 Midscene 实现购物网站的自动化流程：从登录到下单，只需几行代码和自然语言指令Midscene 的强大之处在于它将 AI 的智能与浏览器自动化结合，让操作变得简单高效。

现在，试着自己动手吧！替换成你喜欢的购物网站（如淘宝、亚马逊），调整用户名密码，或增加更多任务（如搜索多件商品）访问https://github.com/web-infra-dev/midscene 获取更多资料，开启你的自动化之旅！。

感谢点赞关注收藏：）