前端如何通过代码模拟用户操作以及puppeteer的使用

目录

前言：

1.前端的“三板斧”

2.puppeteer的使用

---

前言：

---

经过一段时间的尝试后，我写下这篇文章，先说结论。

前端是通过获取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")
  })
 
})