【go语言】Chromeless简介及Chromedp库实现模拟登录截屏

一、什么是Chromeless

chromeless 是一个基于 Node.js 的库，用于通过无头浏览器（Headless Chrome）进行自动化测试和网页截图。它允许开发者使用 JavaScript 脚本来控制和操作浏览器，而无需实际打开浏览器窗口。

以下是一些 chromeless 的主要特性和用法：

1. 基于 Chrome DevTools Protocol：chromeless 使用 Chrome DevTools Protocol（CDP）与浏览器进行通信。这允许对浏览器进行底层的控制和操作。
2. 支持无头模式： 由于使用 Headless Chrome，chromeless 在执行测试和脚本时不会显示实际的浏览器界面，从而提高了效率。
3. 链式调用：chromeless 的 API 设计允许使用链式调用，使代码看起来更清晰和易读。
4. 截图和PDF生成： 可以使用 chromeless 进行页面截图和生成 PDF 文件，这对于测试和生成报告非常有用。
5. 表单提交和用户交互： 支持模拟用户在页面上的交互，比如点击、输入文本等操作。
6. 异步执行：chromeless 支持异步操作，可以等待页面加载完成或等待特定的事件发生。

以下是一个简单的 chromeless 示例：

const { Chromeless } = require('chromeless');


async function run() {
  const chromeless = new Chromeless();


  const screenshot = await chromeless
    .goto('https://www.example.com')
    .screenshot();


  console.log(screenshot); // 返回截图的 Buffer


  await chromeless.end();
}


run().catch(console.error);

在这个示例中，chromeless 打开了一个 Headless Chrome 浏览器，导航到了 https://www.example.com，然后截取了页面的屏幕截图。这只是 chromeless 的基本用法，它提供了更多的功能，可以满足自动化测试和其他网页操作的需求。

二、go语言中的实现

在 Go 语言中，要使用无头浏览器进行自动化测试和网页操作，可以考虑使用一些第三方库。以下是一些常见的用于在 Go 中进行无头浏览器测试的库：

1. Chromedp:Chromedp 是一个基于 Chrome DevTools Protocol 的库，允许你在无头浏览器中执行操作。它提供了对 Chrome DevTools 的直接访问，以及一些高级功能，如截图、模拟用户输入等。GitHub 地址：GitHub - chromedp/chromedp: A faster, simpler way to drive browsers supporting the Chrome DevTools Protocol.

  package main


   import (
      "context"
      "log"
      "github.com/chromedp/chromedp"
   )


   func main() {
      ctx, cancel := chromedp.NewContext(context.Background())
      defer cancel()


      var buf []byte
      if err := chromedp.Run(ctx,
         chromedp.Navigate("https://www.example.com"),
         chromedp.CaptureScreenshot(&buf),
      ); err != nil {
         log.Fatal(err)
      }


      // 处理截图数据（buf）
   }

2. Headless Chrome with Puppeteer Go:Headless Chrome with Puppeteer Go 是一个使用 Puppeteer 和 Go 的库，使得在 Go 中能够方便地控制 Chrome 浏览器。GitHub 地址：https://github.com/dtinth/puppeteer-go

package main


   import (
      "fmt"
      "github.com/dtinth/puppeteer-go"
   )


   func main() {
      browser, _ := puppeteer.Launch(puppeteer.DefaultArgs, puppeteer.Debug(false))
      defer browser.Close()


      page, _ := browser.NewPage()
      page.Navigate("https://www.example.com")
      page.Screenshot("screenshot.png")
   }

这两个库都提供了在 Go 中控制无头浏览器进行测试和网页操作的能力。选择其中一个库取决于你的具体需求和喜好。

三、简单实操实现登录截屏

package main
import (
    "context"
    "github.com/chromedp/cdproto/cdp"
    "github.com/chromedp/chromedp"
    "log"
    "os"
)
func main() {
    // 创建登录阶段的上下文
    ctxLogin, cancelLogin := chromedp.NewContext(context.Background())
    defer cancelLogin()
    // 定义变量分别用于存储两个阶段的截图
    var bufLogin []byte
    var nodes []*cdp.Node
    // 登录阶段
    if err := chromedp.Run(ctxLogin,
       chromedp.Navigate("https://shimo.im/login"),
       //等待页面加载
       chromedp.WaitVisible(`[name="account"]`, chromedp.ByQuery),
       //输入账号和密码
       chromedp.SendKeys(`[name="account"]`, "zhangsan@shimo.im", chromedp.ByQuery),
       chromedp.SendKeys(`[name="password"]`, "woshizhangsan", chromedp.ByQuery),
       //点击同意协议和登录按钮
       chromedp.Click(`div.StyledCheckBox-sc-RjILa-1`, chromedp.ByQuery),
       chromedp.Click(`div[type="black"] button[data-test="btn-submit"]`, chromedp.ByQuery),
       //等待加载
       chromedp.WaitVisible(`.StyledUserCardContainer-sc-RevvT-9`, chromedp.ByQuery),
       chromedp.CaptureScreenshot(&bufLogin),
    ); err != nil {
       log.Fatal(err)
    }
    if err := os.WriteFile("elementScreenshot.png", bufLogin, 0o644); err != nil {
       log.Fatal(err)
    }
}

chromedp使用例子：GitHub - chromedp/examples: chromedp code examples.

chromedp源码地址：GitHub - chromedp/chromedp: A faster, simpler way to drive browsers supporting the Chrome DevTools Protocol.

以下是chromedp库中常用函数：

chromedp.NewContext() 初始化chromedp的上下文，后续这个页面都使用这个上下文进行操作

chromedp.Run() 运行一个chrome的一系列操作

chromedp.Navigate() 将浏览器导航到某个页面

chromedp.WaitVisible() 等候某个元素可见，再继续执行。

chromedp.Click() 模拟鼠标点击某个元素

chromedp.Value() 获取某个元素的value值

chromedp.ActionFunc() 再当前页面执行某些自定义函数

chromedp.Text() 读取某个元素的text值

chromedp.Evaluate() 执行某个js，相当于控制台输入js

network.SetExtraHTTPHeaders() 截取请求，额外增加header头

chromedp.SendKeys() 模拟键盘操作，输入字符

chromedp.Nodes() 根据xpath获取某些元素，并存储进入数组

chromedp.NewRemoteAllocator

chromedp.OuterHTML() 获取元素的outer html

chromedp.Screenshot() 根据某个元素截图

page.CaptureScreenshot() 截取整个页面的元素

chromedp.Submit() 提交某个表单

chromedp.WaitNotPresent() 等候某个元素不存在，比如“正在搜索。。。”

chromedp.Tasks{} 一系列Action组成的任务