使用 headless chrome进行测试

ephererid 发布于2019-07-31 10:56 / 954人阅读

注:文章聚合了现在 headless chrome 介绍和使用方式

包含了三个部分

chrome 在 mac 上的安装和简单使用(来自官方)

利用 selenium 的 webdrive 驱动 headless chrome(自己添加)

利用Xvfb方式实现伪 headless chrome

概念

Headless模式解决了什么问题: 自动化工具例如 selenium 利用有头浏览器进行测试,面临效率和稳定性的影响,所以出现了 Headless Browser, 3年前，无头浏览器 PhantomJS 已经如火如荼出现了，紧跟着 NightmareJS 也成为一名巨星。无头浏览器带来巨大便利性：页面爬虫、自动化测试、WebAutomation...
用过PhantomJS的都知道，它的环境是运行在一个封闭的沙盒里面，在环境内外完全不可通信，包括API、变量、全局方法调用等。

So, Chrome59 推出了 headless mode，Chrome59版支持的特性，全部可以利用：
ES2017
ServiceWork(PWA测试随便耍)
无沙盒环境
无痛通讯&API调用
无与伦比的速度
...

chrome59 在 mac 上的安装和简单使用

现在有两个方式获取支持 headless 的 chrome
1.chrome 59 beta 版本:下载链接https://dl.google.com/chrome/...
2.安装安装黄金版 chrome,Chrome Canary :获取方式:

brew install Caskroom/versions/google-chrome-canary

3.简单的使用,我就以 chrome 59,演示一下:

用一个命令启动 Chrome 作为一个 Headless 服务:
./Applications/Google Chrome.app/Contents/MacOS/Google Chrome --headless --remote-debugging-port=9222 --disable-gpu http://demo.testfire.net
   
或者切到google chrome 这个程序目录下
cd /Applications/Google Chrome.app/Contents/MacOS
然后执行
./Google Chrome  --headless --remote-debugging-port=9222 --disable-gpu http://demo.testfire.net

使用 Headless Chrome 抓取数据:

将要使用 Node.js 去连接我们运行中的 Chrome 实例。你需要确保你已经安装了 Node，才可以继续这个步骤。
让我们生成一个普通的 Node 项目，只有一个依赖那就是 Chrome Remote Interface 包，它可以帮助我们与 Chrome 沟通。然后我们创建一个空白的 index.js 文件。

mkdir my-headless-chrome && cd my-headless-chrome
npm init --yes
npm install --save chrome-remote-interface 
touch index.js

现在我们将要放一些代码到index.js。这个模板例子是由 Chrome 团队提供的。它指示这个浏览器导航到github.com，然后通过 client 里的 Network 属性捕获这个页面上所有的网络请求。

vi index.js
将代码复制到里面:
const CDP = require("chrome-remote-interface");

CDP(client => {
  // extract domains
  const { Network, Page } = client;
  // setup handlers
  Network.requestWillBeSent(params => {
    console.log(params.request.url);
  });
  Page.loadEventFired(() => {
    client.close();
  });
  // enable events then start!
  Promise.all([Network.enable(), Page.enable()])
    .then(() => {
      return Page.navigate({ url: "https://github.com" });
    })
    .catch(err => {
      console.error(err);
      client.close();
    });
}).on("error", err => {
  // cannot connect to the remote endpoint
  console.error(err);
});

最后启动我们的 Node 应用。
node index.js
我们可以看到 Chrome 发出的所有的网络请求，然而并没有一个实际的浏览器窗口。

$ node index.js
http://demo.testfire.net/
http://demo.testfire.net/style.css
http://demo.testfire.net/images/logo.gif
http://demo.testfire.net/images/header_pic.jpg
http://demo.testfire.net/images/pf_lock.gif
http://demo.testfire.net/images/gradient.jpg
http://demo.testfire.net/images/home1.jpg
http://demo.testfire.net/images/home2.jpg
http://demo.testfire.net/images/home3.jpg

这是一个非常棒的方式去查看加载了那些资源.
参考链接:https://github.com/yesvods/Bl...
ubuntu 系统下可以参考:https://medium.com/@dschnr/us...

利用 selenium 的 webdrive 驱动 headless chrome

鉴于以上的方式是利用 nodejs直接去操作 headless chrome

我提供一种方式,利用 selenium 的 webdrive 的 chromedriver驱动 chrome59进行 headless chrome 操作
利用 webdrive 的webdriver.ChromeOptions()方法,添加 headless 相关参数,从而驱动 headless的 chrome
下面的代码是进行一个 web 登录的过程:

#coding:utf-8
from selenium import webdriver

url = "http://demo.testfire.net"
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument("--headless")
chrome_options.add_argument("--disable-gpu")
driver = webdriver.Chrome(chrome_options=chrome_options,executable_path="/Users/xxxx/driver/chromedriver")

driver.get("http://demo.testfire.net")
driver.find_element_by_xpath("//*[@id="_ctl0__ctl0_LoginLink"]").click()
driver.find_element_by_xpath("//*[@id="uid"]").clear()
driver.find_element_by_xpath("//*[@id="uid"]").send_keys("admin")
driver.find_element_by_xpath("//*[@id="passw"]").send_keys("admin")
driver.find_element_by_xpath("//*[@id="login"]/table/tbody/tr[3]/td[2]/input").click()

print driver.current_url

最后 print 出登录成功的当前 url: http://demo.testfire.net/bank...

利用Xvfb方式实现伪 headless chrome

当浏览器不支持headless模式,可以利用python 的Xvfb实现伪 headless mode,Xvfb只是产生了一个虚拟窗口,浏览器只是没有在当前窗口显示.

简单的列举利用脚本

#coding:utf-8
from selenium import webdriver
from xvfbwrapper import Xvfb

xvfb = Xvfb(width=1280,height=720)
xvfb.start()
driver = webdriver.Chrome()
driver.get("http://demo.testfire.net")
cookies = driver.get_cookies()
print cookies
driver.close()
xvfb.stop()

参考文档:http://tobyho.com/2015/01/09/...

云服务器 GPU云服务器 chrome webrtc 测试进行测试 java进行接口测试 Headless

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/44368.html

使用 Headless Chrome 进行自动化测试

摘要：安装安装依赖库安装已经相关的插件，可以使用或者使用在这篇文章中，我使用和，如果你不喜欢这两个库，你可以选择你喜欢的任何一个库，只要它能在浏览器中运行就可以。本文翻译自：Automated testing with Headless Chrome作者：Eric Bidelman (Google 工程师)译者：justjavac 如果您想使用 Headless Chrome 进行自动测试...

caozhijian 2019-08-20 17:58 评论0 收藏0
使用 Headless Chrome 进行自动化测试

摘要：安装安装依赖库安装已经相关的插件，可以使用或者使用在这篇文章中，我使用和，如果你不喜欢这两个库，你可以选择你喜欢的任何一个库，只要它能在浏览器中运行就可以。本文翻译自：Automated testing with Headless Chrome作者：Eric Bidelman (Google 工程师)译者：justjavac 如果您想使用 Headless Chrome 进行自动测试...

Guakin_Huang 2019-05-29 17:01 评论0 收藏0
使用浏览器的HEADLESS模式进行自动化测试

摘要：了解模式指的是不需要用户界面的浏览器，这种浏览器在自动化测试和爬虫领域有着广泛的应用。实践使用浏览器的模式进行自动化测试，你需要先满足以下前提运行环境或者或者最新版已加入万事俱备，废话不多说我们直接上演示代码。了解HEADLESS模式 HEADLESS BROWSER 指的是不需要用户界面的浏览器，这种浏览器在自动化测试和爬虫领域有着广泛的应用。例如你想在网页上运行一些测试，从网页...

lanffy 2019-07-30 16:34 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0
三分钟学会如何在函数计算中使用 puppeteer

摘要：函数计算就是这里的胶水。总结函数计算有如下优势无需采购和管理服务器等基础设施专注业务逻辑的开发提供日志查询性能监控报警等功能快速排查故障以事件驱动的方式触发应用响应用户请求毫秒级别弹性伸缩，快速实现底层扩容以应对峰值压力按需付费。摘要：使用 puppeteer 结合函数计算，可以快速的构建弹性的服务完成各种功能，包括：生成网页截图或者 PDF、高级爬虫，可以爬取大量异步渲染内容的网...

zhkai 2019-06-21 16:46 评论0 收藏0