自动化工具实践操作-注入自定义代码

功能

采集掘金左边每个tab下文章的标题。人为操作就是点击一个tab，复制文字标题，重复以上操作。根据这个，我们可以转换成自己的代码

开始设计

如上文操作基本一致。新建任务、设计点击事件如出一辙。

自定义循环事件

操作循环节点，循环类型选择自定义事件。

注入以下代码：
逻辑：点击左边tab，点击第三次时就结束循环

/***
 * 【此处为函数体】
 * 参数： const { page, env, browser, ...other } = arg
 * 必须返回 Boolean 类型
 * */
 const { page, env, browser, ...other } = arg
env.tabIndex = env.tabIndex || 3
if (env.tabIndex > 4  ) return false
const xpath = `/html/body/div[1]/div[1]/div[@id="juejin"]/div[1]/main[1]/div[1]/div[1]/nav[1]/div[${env.tabIndex }]/div[1]/a[1]`
env.tabIndex = env.tabIndex + 1
const clickElement = await page.waitForXPath(xpath, { timeout: 0})
await clickElement.click()
await page.waitForTimeout(5 * 1000)
return true

自定义事件

实现采集标题自定义事件，如图：

代码如下：

/***
 * 【此处为函数体】
 * 参数： const { page, env, browser, ...other } = arg
 * 返回一个对象 【可修改page,下次操作参数会在arg中】
 * */
const { page, env, browser, ...other } = arg

const xpath1 = '/html/body/div[1]/div[1]/div[@id="juejin"]/div[1]/main[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/li[1]/div[1]/div[1]/div[1]/div[1]/a[1]'
const xpath2 = '/html/body/div[1]/div[1]/div[@id="juejin"]/div[1]/main[1]/div[1]/div[2]/div[1]/div[1]/div[2]/div[1]/div[1]/li[1]/div[1]/div[1]/div[1]/div[1]/a[1]'
let  clickElement =  null
try {
  console.log('xpath1')
  clickElement = await page.waitForXPath(xpath1, { timeout: 50000})
} catch (error) {
  console.log('xpath2')
  clickElement = await page.waitForXPath(xpath2, { timeout: 50000})
}
  if (!clickElement) return {}
const text = await page.evaluate(node => { return node['innerText'] }, clickElement)

console.log(`正在自定义采集:${text}`)
env && (typeof env.pickData === 'function') && env.pickData({
  rename: '标题',
  value: text,
})
 return {}

最后

注入代码需要一定代码基础，欢迎折腾，开发文档