从零开始实现WEB自动化 - 技术选型及简单实践

作为程序员的我们，在工作中应该能明显感觉到，技术选型对整个开发周期尤为重要，选择合适的技术可以帮助我们更高效地完成工作，提高开发速度和质量。

 本篇主要针对开发WEB自动化的技术实现探索

Selenium初探

Selenium是一个用于自动化浏览器操作的工具，可以模拟用户在网页上的操作，包括点击、输入文本、提交表单、获取元素属性等等，它是一个功能强大的工具，可以用于各种需要模拟用户操作的场景。基于此，我们就可以通过Python+浏览器驱动来对我们的WEB网页进行一些自动化操作，同样可以用来执行特定的任务和流程。

Windows下安装Python包

pip install selenium

尝试简单的操作

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
#browser = webdriver.Chrome()
browser = webdriver.Edge()
browser.get('https://www.baidu.com/')
kw = browser.find_element(by=By.ID, value='kw')
kw.click()
kw.send_keys('selenium元素定位')
su = browser.find_element(by=By.ID, value='su')
su.click()
time.sleep(5)

以上执行了一个简单百度搜索的流程

驱动Edge浏览器打开窗口，跳转至百度搜索，通过find_element找到输入框元素，点击输入框并输入关键字，找到搜索按钮，等待5秒，执行完成关闭浏览器。

浏览器插件初探

通过了解市面上一些RPA自动化厂商，他们通常会使用浏览器插件，调用浏览器内置API的方式进行WEB的自动化操作，我也简单了解一下实现方式，作为对比优劣势参考。

以的Chrome为示例，下图为目录结果

manifest.json

这是插件的元数据文件，用于定义插件的基本信息，权限，前台页面（如弹出窗口的HTML），以及其他脚本等。

{
  "manifest_version": 2,
  "name": "WEB自动化",
  "short_name": "WEB自动化",
  "description": "WEB自动化插件",
  "version": "1.0.0.0",
  "author": "零冉升起",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [
    {
      "all_frames": true,
      "js": [ "content.js"],
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "run_at": "document_start"
    }
  ],
  "browser_action": {},
  "permissions": [
    "tabs",
    "<all_urls>"
  ]
}

background.js

background.js是一种在Chrome插件中使用的JavaScript文件，它充当了插件的后台页面。插件的后台页面负责处理插件的核心逻辑，例如响应用户事件、与浏览器API交互、与其他插件页面通信等。

在background.js文件中，可以定义事件监听器，这些监听器负责处理来自插件的各种事件，例如插件被加载、浏览器启动、标签页被更新等等。

//在当前浏览器打开页签
const tabs_create = function (cfg) {
  return new Promise(function (resolve, reject) {
      try {
          chrome.tabs.create(cfg, (tab) => {
              if (chrome.runtime.lastError) {
                  reject(chrome.runtime.lastError.message);
                  return;
              }
              resolve(tab);
          });
      } catch (e) {
          reject(e);
      }
  });
};
//同步等待
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
//打开并操作
async function func_open_opt(){
	var cfg = {url: 'https://www.baidu.com/'}
	var tab = await tabs_create(cfg);
	console.log('tab', tab)
	await wait(3000) //等待目标页面加载完成
	chrome.tabs.sendRequest(tab.id, {
		'value': 'selenium元素定位'
	}, (response)=>{
		console.log('接收到返回：', response)
	})
}
func_open_opt();

content.js

content.js是一种用于Chrome插件开发的文件类型，用于在网页加载完成后执行脚本操作。在content.js中，可以通过Chrome扩展API来实现对网页的操作，包括修改DOM、发送请求、注入脚本等。

chrome.extension.onRequest.addListener(async function(request, sender, sendResponse){
	console.log('接收到参数：', request)
	document.getElementById('kw').value = request.value
	document.getElementById('su').click()
	sendResponse('成功！')
});

当我们加载进入插件后，就会执行我们在脚本里面定义的流程，这里的流程依旧是简单的百度搜索关键字

以上，便是本系列第一篇文章，后续持续更新，直至完善我们WEB自动化功能，敬请期待~