你有懒癌？我有WebDriver~

Posted 2021-04-30 奇舞精选

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了你有懒癌？我有WebDriver~相关的知识，希望对你有一定的参考价值。

编者按：本文作者是来自奇舞团的前端工程师黄小璐，同时是W3C性能工作组成员。

WebDriver真香~

背景

最近负责的项目的一个拓扑界面加了新功能：在渲染后点击按钮可保存每个节点坐标。提测后才发现，线上有将近200个没有保存过节点信息的老拓扑图。新功能上线后需要将每个页面都打开，等待渲染，然后点击保存才能使新功能生效。懒癌晚期的笔者反正是不愿意做这件事情的。

第一时间想到工作组的冯通童鞋用。或许WebDriver能帮忙解决这个问题~

上手WebDriver

WebDriver是W3C制定的一个标准，它衍生自Selenium WebDriver框架。Selenium WebDriver诞生的目的是模拟用户操控本地或者远程的浏览器，以实现浏览器的自动化操作（可用于自动化测试）。WebDriver标准主要是基于Selenium WebDriver API设计的一套接口。

使用WebDriver需要做如下准备：

根据自己擅长的语言，选择安装对应版本的selenium-webdriver包。笔者使用的是Node.js版本的selenium-webdriver¹。

做好这些准备工作后，笔者兴高采烈地写了一个demo。功能很简单：打开一个拓扑页面，点击保存按钮。初版代码如下：

const webdriver = require('selenium-webdriver')
!async function () {
  let driver = await new webdriver.Builder().forBrowser('chrome').build()
  await driver.get('http://mydomain/topo/1234') // 请自行替换该URL
  driver.findElement(webdriver.By.css('.topo-component .btn-save')).click() //请自行替换选择器
}()

剧情需要，运行代码后果然没有达到预期。

虽然打开了一个浏览器窗口，也打开了指定的URL，但是这个URL很快就跳转到了登录界面。小老弟，怎么肥事？没带上cookie？

笔者观察发现，每初始化一个WebDriver实例，就相当于创建了一个全新的浏览器，没法共享已经打开的浏览器里的cookie等信息。面对一个没有“身份”的请求，服务端当然是拒绝的，因此跳转到了登录界面。

所以首先要解决的问题是”身份“。

笔者的思路是：先登录一次，将cookie记录到本地。下次再请求页面的时候，将本地的cookie带上，这样服务端就认得“我”了。在cookie过期之前都不需要再登录~

访问登录页面的URL；
自动填充用户名、密码；
如果出现验证码，程序留给人类一点时间手动填（因为没有实现自动识别验证码）；
如果还出现别的提示等，根据业务情况处理（我们的目标是拿到cookie，这点曲折过程算什么）；
等待跳转到目标域名；
获取cookie并存储到本地，留待下次使用。

代码如下：

// 存储cookie到本地文件
async function storeCookieToFile (driver) {
  const cks = await driver.manage().getCookies()
  const ckString = JSON.stringify(cks, null, 2)
  // 将cookie保存到当前目录
  fs.writeFile('cookies.txt', ckString, (err) => {
    err && console.log(err)
  })
}

!async function login() {
  let driver = await new webdriver.Builder().forBrowser('chrome').build()
  await driver.get('http://mydomain/data_need_authorization')

  try {
    // 用1秒等待登录输入框的出现
    await driver.wait(driver.findElement(webdriver.By.css('input[name=userName]')), 1000)
    driver.findElement(webdriver.By.css('input[name=userName]')).sendKeys('myUserName')
    driver.findElement(webdriver.By.css('input[name=password]')).sendKeys('myPassword')
    driver.findElement(webdriver.By.css('input[type=submit]')).click()
  } finally {
    try {
      // 可能出现验证码
      await driver.wait(driver.findElement(webdriver.By.css('input[name=captcha]), 2000)
      await holdOn(5000) // 自己实现一个holdOn函数，静静等待5秒。
    } finally {
      // 此处还可以根据业务处理其他逻辑
      ...
    }
  }
  // 获取登录后的标志元素，确认登录成功。
  await driver.wait(driver.findElement(webdriver.By.css('.user-info')), 5000)
  storeCookieToFile(driver)
}()

以上代码中用到了两个比较重要的API：sendKeys()发送键盘事件填充输入框，getCookies()获取cookie。另外，笔者未实现自动识别验证码，所以采用人为干预的方式输入。如果你连登录逻辑也不想写，那就直接让程序holdOn，等上几秒，自己手动输入并提交，静静等待程序帮忙保存密码也是可以的。

访问目标地址

设置cookie

笔者原以为的步骤：

从本地文件读cookie；
将cookie添加到浏览器里；
看到登录后的页面。

修改后的步骤：

从本地文件读cookie；
请求一个不登录也能访问的同域页面（为了确保不跳转到别的域名）。比如：http://mydomain；
添加cookie；
可能需要等几秒；
再次请求这个页面；
终于看到用户信息~

代码如下：

!async function() {
  let driver = await new webdriver.Builder().forBrowser('chrome').build()
  await driver.get('http://mydomain')
  const cookies = await retrieveCookieFromFile() // 请自行实现
  JSON.parse(cookies).forEach(async ck => {
    await driver.manage().addCookie(ck)
  })
  await holdOn(2000)
  await driver.get('http://mydomain')
  // 再次读cookie，有值啦~
  driver.manage().getCookie('XXX').then(function (cookie) {
    console.log('get cookie', cookie);
  });
}()