npm 包 chromeless 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要使用无头浏览器进行自动化测试、截图、爬取数据等任务。Chromeless 是一个无头浏览器库，可以完美地在 Chrome 中运行。本篇文章将介绍如何使用 npm 包 chromeless 进行无头浏览器开发，包括安装、配置与使用。

安装

安装命令如下所示：

npm install chromeless

配置

在使用 Chromeless 之前，我们需要创建一个 Chromeless 实例，并配置两个必须的选项。

const Chromeless = require('chromeless').default;
const chromeless = new Chromeless({
  launchChrome: true, // 是否启动 Chrome，默认为 true
  waitTimeout: 15000 // 超时时间，默认为 30 秒
});

API

Chromeless 提供了丰富的 API，用以控制 Chrome。以下是 Chromeless 中最常用的 API：

1. goto

在浏览器中打开一个网页，接收一个 url 作为参数。

await chromeless
  .goto('https://www.baidu.com')

2. wait

等待一个元素出现或者消失。接收一个选择器作为参数。

await chromeless
  .wait('#content_left')

3. click

单击一个元素，接收一个选择器作为参数。

await chromeless
  .click('button')

4. evaluate

执行一个函数，并将结果返回。函数在浏览器中执行，所以可以访问 DOM。

const text = await chromeless
  .evaluate(() => {
    return document.querySelector('h1').textContent
  })

5. screenshot

截取当前屏幕，并将其保存为指定文件名。接收一个文件名作为参数。

await chromeless
  .screenshot({filePath: '/path/to/screenshot'})

6. pdf

根据指定的参数生成 PDF 文件。接收一个文件名和 PDF 配置作为参数。

await chromeless
  .pdf({filePath: '/path/to/pdf', format: 'A4'})

使用场景

1. 自动化测试

由于 Chromeless 可以与 Selenium 进行集成，因此可以在浏览器中进行自动化测试。

-- -------------------- ---- -------
--------------- ---------- ---------- -
  ---------- ------- --- -------- -- --- ------ ---------- -
    ------ ----------
      ------------------------------
      ------------ -------------
      -------------
      ----------------------
      ------------ -- ----------------------------------------------------
      ---------- -- -
        -----------------------------------
      --
  --
--

2. 爬虫

使用 Chromeless 可以在浏览器中进行数据抓取，并保存抓取到的数据。

-- -------------------- ---- -------
----- ------- - ----- ----------
  ---------------------------
  ----------- ----------
  -------------------------------
  ---------------------------
  ------------ -- -
    ----- --- - ---------------------------------------------------------
    ------ ---------- -- -
      ----- ----- - -------------------- ----------------
      ----- ----------- - ----------------------- ----------------
      ------ - ------ ----------- --
    ---
  ---
---------------------

结语

通过本篇文章的介绍，我们了解了 Chromeless 的安装、配置、API 和使用场景。在实际开发中，我们可以灵活运用 Chromeless，提高工作效率，实现自动化测试和数据爬取等任务。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/63780