前言：
经过一段时间的尝试后，我写下这篇文章，先说结论。
前端是通过获取DOM元素后，执行如点击，获取焦点，设置滚动条高度等操作，总体而言，大部分场景够用，但是和其他爬虫或者类似按键精灵的软件是没法比的。核心差距在于，我们不能通过获取页面坐标，让鼠标主动去点击，也就是说js是被动的，它是通过监听用户的一系列操作去执行某些事，而不是我们通过代码去主动的做事。
那么，对于前端模拟用户操作，我有三板斧，下文会详细说明。
接下来我要好好介绍一下，puppeteer。为什么我要写它呢？因为它是基于node的，而且使用起来非常简单，它的功能很多，比如去截图，去爬取数据，去模拟用户操作，经典的用法是用作无头浏览器（headless），举个例子，使用它可以去登录网页输入账号密码进行跳转等操作。
下面这个图，网址是freebuf.com.我之前想利用前端操作DOM的方式操作，可是不行……感兴趣的可以尝试一下，欢迎交流~
1.前端的“三板斧”
最常用的方式：
document.querySelector(".clsss").click() //以点击为例子
相对来说最好用的方式：
这个方法可以去看红宝书，有详细的介绍，比如固定步骤2有12个参数，原理其实就是分发一个事件，这个我用起来还是挺好用的。
我来讲一个使用场景：
之前react项目遇到一个bug,点击父组件的搜索按钮，子组件的插件要显示最新的搜索数据，但是子组件总是显示上一次的数据，只有点击子组件自己的搜索才可以显示最新的数据，于是我就用了这个方法，奇怪的是，这个方法失效了，最后是加了一个setInterval()定时器才解决的（setTimeout也不行）。
var e = document.createEvent("MouseEvents"); //固定步骤1 e.initEvent("click", true, true); //固定步骤2 document.getElementById(clickId).dispatchEvent(e); //固定步骤3
2.puppeteer的使用
它的使用及其简单，就两步。
有几个关键参数我说一下：默认是不打开浏览器的，但是可以设置为打开，方法是
puppeteer.launch({
headless: false
})
获取元素：page.$()
输入值：page.type('css选择器'，‘要输入的值’，{ delay: 延迟 })
第一步：下载
npm i puppeteer
第二步，使用
你可以随便找个文件夹，或者在你的项目里面新建一个JS文件，如example.js,粘贴如下代码
此代码的功能是打开百度，并截屏
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://www.baidu.com'); // 将网页截图 await page.screenshot({ path: 'example.png' }); await browser.close(); })();
操作演示：
模拟用户操作：
我使用node搭建了一个服务器，只要是用户访问某个接口，就直接打开freebuf.com，输入值然后回车确认跳转。
演示：
代码如下：
const puppeteer = require('puppeteer') async function demoTn () { const browser = await puppeteer.launch({ headless: false, args: ['--no-sandbox', '--disable-setuid-sandbox'] }) const page = await browser.newPage() await page.goto('https://www.freebuf.com/') const loginInput = await page.$('#components-layout-demo-basic > section > main > div > div.container > div.container-left > div > div > div.bug-report-wraper > div > div.ant-select.ant-select-enabled.ant-select-no-arrow > div > div > div.ant-select-selection__placeholder') await loginInput.click() await page.type('#components-layout-demo-basic > section > main > div > div.container > div.container-left > div > div > div.bug-report-wraper > div > div.ant-select.ant-select-enabled.ant-select-no-arrow > div > div > div.ant-select-search.ant-select-search--inline > div > input', '555', { delay: 500 }) page.keyboard.press('Enter')// 按下回车键 // const loginInput2 = await page.$('#components-layout-demo-basic > section > header > div > div.header-right > div.user-view > div.search-cloud > span > span > span > button') // await loginInput2.click() // await browser.close() } exports.demoTn = demoTn
api.js
router.get('/getdetail', function (req, res) { res.send('返回数据…getdetail') setTimeout(() => { test.demoTn() console.log("执行demoTn") }) })
