如何通过代码实现Shopify网站的鼠标点击操作模拟？

该需求完全可实现，针对你无代码开发基础的情况，有两类成熟方案可以选择： #

方案1：无代码自动化插件方案（0编码门槛） #

• 直接使用浏览器自带/第三方的操作录制类自动化插件，手动操作一遍完整流程完成录制，后续点击插件的运行按钮即可自动复现整套点击、选择操作
• 你还可以根据插件的功能设置自定义触发入口，比如在页面生成专属的悬浮触发按钮，点击即可运行整套操作流

方案2：极简浏览器脚本方案（仅需修改少量配置项） #

如果希望把触发按钮直接嵌入到Shopify页面内，可以用油猴类脚本管理器实现，核心代码逻辑如下，你只需要替换少量配置内容即可使用：

// 1. 替换成你自己页面对应元素的选择器，可直接在浏览器右键元素→检查→复制选择器获取
const firstSelect = document.querySelector('第一个下拉框的选择器');
const secondSelect = document.querySelector('第二个下拉框的选择器');
const firstBtn = document.querySelector('第一个待点击按钮的选择器');
const secondBtn = document.querySelector('第二个待点击按钮的选择器');

// 2. 生成页面悬浮触发按钮
const autoRunBtn = document.createElement('button');
autoRunBtn.innerText = '一键完成操作';
// 自定义按钮样式，可按需修改
autoRunBtn.style.cssText = `
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 99999;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;
document.body.appendChild(autoRunBtn);

// 3. 绑定自动操作逻辑
autoRunBtn.addEventListener('click', async () => {
  // 替换成你要选的下拉选项对应值
  firstSelect.value = '第一个下拉框要选的选项值';
  firstSelect.dispatchEvent(new Event('change'));
  // 等待100毫秒再执行下一步，避免页面未响应
  await new Promise(resolve => setTimeout(resolve, 100));

  secondSelect.value = '第二个下拉框要选的选项值';
  secondSelect.dispatchEvent(new Event('change'));
  await new Promise(resolve => setTimeout(resolve, 100));

  firstBtn.click();
  await new Promise(resolve => setTimeout(resolve, 100));
  secondBtn.click();
});

配置说明 #

• 元素选择器和下拉选项值都可以通过浏览器开发者工具直接复制获取，不需要自己编写代码
• 如果是你自己名下的Shopify店铺，你可以直接把这段代码嵌入到店铺主题的页面代码里，不需要额外安装脚本管理器，所有访问页面的用户都可以使用这个一键操作按钮
• 测试时如果出现操作不生效的情况，只需要调大每步之间的延时数值即可

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