小程序商家后台脚本实现批量添加域名

业务需求在多个小程序后台批量添加域名，每个小程序要添加几十个。需要重复如下操作：

1. 点击图上添加按钮，出现弹窗。
2. 在弹窗输入要添加的域名，点击确认提交。
3. 弹出通知弹窗，再次点击确认。
4. 重复上述操作，添加不同的域名

几十个域名*几个小程序，操作量有点大，考虑用脚本实现。

思路

1. 考虑用按键精灵，发现mac不支持
2. 考虑js脚本，仔细研究了ajax请求，在控制台ajax调用，设置了携带cookie，发现依然返回失败
3. 考虑用js模拟真实操作

问题

用js实现了上述过程，在输入框设置input.value=domain。实际执行每次输入域名后点击确认，输入框报红色校验错误，判断应该是用框架实现的页面，虽然修改了输入框dom上挂载的value，但是内存中的值没有改，代码直接读取内存的值，校验错误。

搜索vue和react模拟真实收入，发现有实现的方法，https://blog.csdn.net/weixin_46774564/article/details/123254550。

查看支付宝这个页面应该是react写的，在控制台可以看到react插件有显示内容。用react的方法测试成功。

实现

完整脚本实现如下：

function addScript(url, cb) {
  var script = document.createElement('script')
  script.src = url
  script.onload = function () {
    axios.defaults.withCredentials = true;
    cb()
  }
  document.body.appendChild(script)
}

const list = [
  'dsp-api.yunyinglhc.net.cn',
  'huodong.shmlantec.cn',
  'huodong.shmlkjxx.cn',
  'dsp-api.voguecai.pub',
  'dsp-api.voguecai.org.cn',
  'voguecai.net.cn',
  'huodong.jiuzhengsh.cn',
  'huodong.yuaitech.cn',
  'voguecai.cn',
  'huodong.shyunai.cn',
  'dsp-api.voguecai.net.cn',
  'dsp-api.happilyzhou.org.cn',
  'dsp-api.happilyzhou.pub',
  'dsp-api.lifeduan.com.cn',
  'dsp-api.fitnesstip.net.cn',
  'czyl.iyoudui.com',
  'huodong.jiuzhenxx.cn',
  'dsp-api.aiyoudui.com.cn',
  'dsp-api.baubles.pub',
  'dsp-api.plantphotos.com.cn',
  'huodong.shmlanxx.cn',
  'dsp-api.fitnesstip.com.cn',
  'dsp-api.happilyzhou.net.cn',
  'dsp-api.skincarew.com.cn',
  'dsp-api.lifeduan.net.cn',
  'dsp-api.voguecai.com.cn',
  'huodong.shjiuzhensy.cn',
  'dsp-api.fitnesstip.pub',
  'dsp-api.baubles.com.cn',
  'huodong.minglantec.cn',
  'dsp-api-uat.iyoudui.com.cn',
  'dsp-api.skincarew.cn',
  'huodong.mlantecsh.cn',
  'dsp-api.hcbit.com.cn',
  'dsp-api.skincarew.net.cn',
  'dsp-api.skincarew.pub',
  'dsp-api.lifeduan.org.cn',
  'dsp-api.lifeduan.pub',
  'luna.iyoudui.com',
]

const sleep = time => {
  return new Promise(resolve => setTimeout(resolve, time))
}
const $ = el => document.querySelector(el)

// 模拟真实输入框点击
const mockInput = (input, val, type) => {
  let lastValue = input.value
  input.value = val

  if (type === 'vue') {
    // vue
    let event = document.createEvent('HTMLEvents')
    event.initEvent('input', true, true)
    event.eventType = 'message'
    input.dispatchEvent(event)
  } else if (type === 'react') {
    // react
    let event = new Event('input', { bubbles: true })
    let tracker = input._valueTracker
    if(tracker) {
      tracker.setValue(lastValue)
    }
    input.dispatchEvent(event)
  }
}

const addDomain = async () => {
  if (list.length === 0) return

  // 点击服务器域名白名单添加按钮
  const domain = list.pop()
  const btnAdd = $('.after___HsXtq button')
  btnAdd.click()

  // 弹窗输入域名
  await sleep(500)
  const input = $('#safeDomain')
  console.log(domain)
  mockInput(input, domain, 'react')
  console.log(input)
  // 点击弹窗确认按钮
  await sleep(500)
  const btnOk = $('.ant-modal-footer .ant-btn.ant-btn-primary')
  btnOk.click()

  // 点击通知弹窗确认
  await sleep(500)
  const btnOk2 = $('.ant-modal-confirm-btns .ant-btn.ant-btn-primary')
  btnOk2.click()

  // 下一个域名
  await sleep(500)
  addDomain()
}

addDomain()

效果

打开商家页面，F12打开控制台，粘贴上述代码，回车。可以看到页面不断地弹出添加弹窗，输入域名，确认的过程。一会功夫几十个域名都添加好了。