首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Browsershot/Puppeteer在Laravel-Sail上不能正常工作

Browsershot和Puppeteer是两个在云计算领域中常用的工具,用于在服务器端进行网页截图和自动化测试。它们可以帮助开发人员进行前端开发和测试工作。

Laravel-Sail是一个用于快速搭建Laravel开发环境的工具,它基于Docker容器技术。然而,由于Browsershot和Puppeteer需要在服务器端运行浏览器引擎,而Docker容器默认不支持图形界面的应用程序。

因此,在Laravel-Sail上使用Browsershot和Puppeteer可能会遇到一些问题,无法正常工作。为了解决这个问题,可以尝试以下几种方法:

  1. 使用Xvfb:Xvfb是一个虚拟的X Window系统,可以在无图形界面的环境中模拟图形界面。可以在Laravel-Sail中安装和配置Xvfb,然后将Browsershot和Puppeteer指向Xvfb来运行浏览器引擎。
  2. 使用无头浏览器:无头浏览器是一种没有图形界面的浏览器,可以在命令行中运行。例如,可以使用Headless Chrome作为Puppeteer的浏览器引擎,或者使用PhantomJS作为Browsershot的浏览器引擎。在Laravel-Sail中安装和配置相应的无头浏览器,然后将Browsershot和Puppeteer指向无头浏览器来进行操作。
  3. 使用云服务提供商的解决方案:一些云服务提供商(例如腾讯云)提供了专门用于网页截图和自动化测试的解决方案,可以直接在其云平台上使用Browsershot和Puppeteer,而无需自行配置。可以查阅腾讯云的相关产品和文档,了解其提供的解决方案和使用方法。

总结起来,要在Laravel-Sail上正常使用Browsershot和Puppeteer,需要解决无图形界面环境的限制。可以通过安装和配置Xvfb、使用无头浏览器,或者使用云服务提供商的解决方案来实现。具体的实施方法和步骤可以参考相关文档和教程。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Laravel 中使用 puppeteer 采集异步加载的网页内容

做过类似需求的人可能会说,老铁, PhantomJS 啊! 没错,这是一个办法,而且相当长的时间里 PhantomJS 是为数不多的能解决这类需求的工具里的佼佼者。...puppeteer 是一个 js 包,要想在 Laravel 中使用,得借助于另一神器spatie/browsershot。...安装 puppeteer $ npm i puppeteer --save 也可以全局安全 puppeteer 但就个人经验而言,项目中安装是比较推荐的做法,因为这样不同项目不会同时受全局安装的...puppeteer 影响,此外项目中安装也方便使用 phpdeployer 进行升级(phpdeploy 升级时不会影响线上项目运行,要知道升级/安装 puppeteer 可是很费时的,有时候还不能保证一次成功...对于轻度的采集任务,是够用的,比如本文这类 Laravel (php) 里来用采集一些小页面,但如果需要快速采集大量内容,还是 Python 啥的吧。?

1.9K20

捕获网站截图,留存精彩时刻

它们基于先进的底层技术(如 Puppeteer 和 Chrome Headless),操作简单方便,并且多个平台上均有良好兼容性。如果您对此类工具感兴趣,请务必查看一下这篇文章!...spatie/browsershot Stars: 4.3k License: MIT 该开源项目是一个将 HTML 转换为图像、PDF 或字符串的工具。...能够模拟设备环境,不同设备获取对应样式效果的截图; 支持全页面滚动截取整个长页面; 允许隐藏或移除指定CSS选择器匹配到的DOM元素; 提供点击指定DOM元素、滚动至某个位置等交互行为支持; 总之,...本地环境下构建时需要安装一些必要工具和依赖库, Linux 还可以通过 Docker 构建二进制文件。...相关链接 https://github.com/spatie/browsershot https://github.com/sensepost/gowitness https://github.com/

48530
  • Serverless+puppeteer打造云端自动化测试

    平台希望发布新功能的同时,同时能够快速验证老的特性能够不受影响。 基于此,测试同学需要回归修改可能涉及到的特性,来确保功能的正常。 方案一:每一次代码合并master之后就要验证一次。...这个方案会减少验证频率,但一旦出现了问题,不能马上定位到具体是哪一次merge所带来的影响,因此不能快速修复该问题。...首先,先来思考下我们业务中哪些功能需要回归: 组件ui,组件特性功能展示正常 组件交互,点击之后,能够符合预期 如何能够让机器知道这个组件的样式是渲染正常的呢?...基于此,我们引入了puppeteer的截图功能,每一次代码merge进入master,触发了ci流程后,就调用puppeteer,对已经创建好的一份最全的组件功能页面进行截图,与一次保存的图片进行比较...爬取测试用例页面,截图之后,我们将生成的图片保存在腾讯的cos,然后邮件发送测试报告即可。

    1.4K30

    Serverless+puppeteer打造云端自动化测试

    那么为了完成这个目标,我们可以让测试同学回归下本次修改可能涉及到的特性,来确保功能的正常, 解决方案一: 如果每一次代码合并master之后就要验证一次,这样的工作可能会让测试同学感到厌烦,因为会有大量重复性的工作...解决方案二: 但是如果只验证最后将要发布的master代码时,一旦出现了问题,不能马上定位到具体是哪一次merge所带来的影响,因此不能快速修复该问题。...,能够符合预期 解决问题一:样式ui问题 我们如何能够让机器知道这个组件的样式是渲染正常的呢?...那么基于此,我们引入了puppeteer的截图功能,我们每一次代码merge进入master之后,触发了我们的ci流程后,就调用puppeteer,对我们已经创建好的一份最全的组件功能页面进行截图,与一次保存的图片进行比较...爬取测试用例页面,截图之后,我们将生成的图片保存在腾讯的cos,然后邮件发送测试报告即可,整个自动化测试,只需要3s就可以完成,大大缩小了之前的执行时间。

    78840

    探索----面向单元测试编写React组件

    那么为了完成这个目标,我们可以让测试同学回归下本次修改可能涉及到的特性,来确保功能的正常, 解决方案一: 如果每一次代码合并master之后就要验证一次,这样的工作可能会让测试同学感到厌烦,因为会有大量重复性的工作...解决方案二: 但是如果只验证最后将要发布的master代码时,一旦出现了问题,不能马上定位到具体是哪一次merge所带来的影响,因此不能快速修复该问题。...,能够符合预期 解决问题一:样式ui问题 我们如何能够让机器知道这个组件的样式是渲染正常的呢?...那么基于此,我们引入了puppeteer的截图功能,我们每一次代码merge进入master之后,触发了我们的ci流程后,就调用puppeteer,对我们已经创建好的一份最全的组件功能页面进行截图,与一次保存的图片进行比较...爬取测试用例页面,截图之后,我们将生成的图片保存在腾讯的cos,然后邮件发送测试报告即可,整个自动化测试,只需要3s就可以完成,大大缩小了之前的执行时间。

    78120

    效率提高十倍,Puppeteer 如何启动交互模式?

    Node.js 的交互环境里面,必须把整段函数全部写进去,一次性运行,不能一段一段运行。如果尝试一段一段运行的话,代码就会报错,我们来看看: ?...它不能单独出现在最外层。这就要求我们把所有的代码都写到一个异步函数里面,然后运行这个异步函数。 但这样做,跟直接写一个.js 文件来运行有什么区别?...我每次想测试一个 XPath 语句能否正常运行,都要把整个代码重新跑一边。这不是白白浪费了交互环境的优势吗?...但实际,Node.js 与 Chrome 本身就有一个很好用的交互环境,但很多人可能并不知道。 要启动这个交互模式,实际非常简单。我们从0开始来创建这个环境。...可以看到,Console标签页打印出来的内容,也会在终端窗口出现。看起来,不过是从黑色窗口写代码变成了白色窗口写代码,这有什么好炫耀的?

    1.6K30

    爬虫漫游指南:无头浏览器puppeteer的检测攻防

    Puppeteer中,它的值为true,而在正常浏览器中,navigator里是没有这一属性的,是undefined。...但是,正常使用的chrome中,navigator是没有这一属性的,一旦检测到webdriver这个属性名,大概率可以判定为puppeteer。...破盾 破盾就不能针对puppeteer下手了,反正我是没有办法检测前delete掉navigator.webdriver这个属性。...而且根据我实践经验,puppeteerlinux运行的远比windows稳定。根据上述两点,得出结论,对比检查UA和platform,能取得一些效果。 破盾 举一隅不以三隅反,则不复也。...大家不妨看一下800600的窗口有多小,正常用户是不可能用这个窗口尺寸浏览网页的,但也不能武断的拦截这样的请求,林子大了什么奇葩用户没有。

    9.3K51

    puppeteer 融入调试流程,调试体验爽翻了!

    于是我在想,自动化测试工具 puppeteer 是可以通过脚本来自动执行浏览器操作的,能不能调试的时候让 puppeteer 帮我自动做了页面操作的一些流程呢?...那问题来了,断点调试和自动化测试能不能一起跑呢? 看起来这俩都是跑了一个浏览器,应该能融合才对。 这个就要从 puppeteer 和调试的实现原理来看了。...puppeteer 能控制浏览器执行一些脚本,也是基于 CDP。 这俩都需要浏览器调试模式启动,也就是指定 remote-debugging-port。...既然 puppeteer 和调试都要以调试模式跑浏览器,那我们就等 puppeteer 跑起 chrome 之后,vscode debugger 再 attach 它来调试。...然后跑下 puppeteer 脚本,把 chrome 跑起来: 之后,去 react 项目里启动调试,只不过这次是 attach: 依然是能正常断点调试的: 而且现在还可以跑自动化脚本了!

    1.1K20

    大前端神器安利之 Puppeteer

    协议的无头版 Chrome 。...保证与 API 协同工作。...寄存的博客评论,可在 jadeblog-backups#issues 查看;(实际使用 Gitment 之时,触发初始化按钮,并未能真正完成初始化,猜测这可能是插件本身的问题,或者别的,需要进一步探究...额外需要补充说明的是,关于此文章的命名;无端由的加了一个“大”字;倒不完全是因为,“前端开发者”相关行业,承担着越来越多的重要工作;而其本身也要不断学习、充实知识库;入围门槛的难度也逐步增加;凡此等等...,与时俱进版前端资源教程一文中,可见一斑;不幸的是,同类相轻的鄙视链中,却总有些个别的“合作者”,在工作中只因角色分工的不同,而缺少对人应有尊重;虽然,个人倒不自定为前端开发者,遇到这种恶,总免不了惹起骨子里的侠义

    2.4K60

    干货 | 基于 BDD 理念的 UI 自动化测试携程度假的应用

    一、UI 自动化测试背景以及意义 日常开发中,我们的程序出现 Bug 是一件非常正常的事情。Bug 本身并不可怕,可怕的是我们把 Bug 带到真正的生产环境中。...BDD 测试是模拟用户行为的测试,而用户的操作又是连贯的,因此这里我们不能单纯的测试一个组件是否能正常运行,而是要测试整体。 1)用户打开 TODO App 页面 ?...回到我们的原始需求:降低自动化测试门槛 测试人员不用或很少去写代码 非技术人员也可以读懂测试用例 这就需要我们把 Cucumber 和 Puppeteer 进行封装组合使用。...,只需要组合,使用者不需要关心具体实现 现在我们来回看下面这张图: 1)我们 Cucumber Hooks 中定义了相关钩子函数,把打开浏览器等每个测试用例需要做的通用工作给做了; 2) Cucumber...现在我们使用现代化前端开发框架进行开发,例如 React,因此我们可能不再需要 jQuery 时代一样元素加上 id="name" ,但是这就导致我们元素的 CSS 选择器 有时候又长又臭。

    2.6K21

    Puppeteer踩坑问题记录

    ---- 前言 什么是PuppeteerPuppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。...具体怎么开始和API,参考文档:https://zhaoqize.github.io/puppeteer-api-zh_CN/ 作者在工作中有需要用puppeteer编写自动化测试用例,对移动端H5进行...下文主要记录puppeteer进行自动化测试过程中,遇到的问题。...踩坑问题记录 Chromium问题 我们直接使用puppeteerMacOS可以正常运行测试脚本,但是部署到Linux服务器,会出现Chromium不存在,或者缺少Chromium依赖库的问题。...解决方案:使用不包含Chromium的puppeteer-core,再自己下载不同系统下的chromium,配置参数中指定chromium的路径。

    1.7K20

    puppeteer的使用教程1 - 基本用法

    其中,针对一些无法绕过或者无法正常阅读的JS代码,我们的最终法宝就是无头浏览器了!...Puppeteer之前,还是有很多无头浏览器的,比如老牌的selenium,还有phantomJs,目前他们已经基本停止维护,所以我们今天的主角就是Puppeteer了!...官网和工具 github/GoogleChrome/puppeteer npmjs puppeteer文档 try-puppeteer 可以在线测试你的脚本 taobao镜像 由此可见,想要使用puppeteer...准备工作 nodejs的安装老高就不多说了,不过老高要啰嗦的是chromium的下载: 最好在安装puppeteer之前就下载解压好chromium,当然你也可以默认使用自带的浏览器。...安装完成后,脚本中启动chrome的参数中加入executablePath,并指向对应路径即可。

    1.5K30

    Linux下如何安装使用puppeteer

    前提: 我需要用puppeteer实现抓取并下载百度图片中指定关键词的前100张图片, 程序本地(Windows)下可以正常运行, 但是部署到服务器(Linux) 就总是报错:cannot find...诸如此类的报错,虽然知道是和puppeteer的安装有关, 但是一直没找到如何在Linux下正确的安装(Windows下如果使用npm安装不成功,可以使用cnpm安装), 以下是掘金找到的一个方法,...安装puppeteer npm install puppeteer --ignore-scripts --save 3、下载一个Chromium放到指定位置 3.1 node_modules/puppeteer...local-chromium/linux-%d,然后解压即可 ps: .local-chromium/linux-%d文件夹需要自己创建,同样将%d替换为具体编号 4、安装相关依赖(测试的时候不安装也正常运行了...puppeteer运行程序后报错,我2020-4-23安装的puppeteer时版本已经是3以上了,安装的Chromium版本是737027,在网上查了很多资料都没有找到解决办法,最后决定回退到puppeteer

    15.1K10

    Node.js 小打小闹之无头浏览器

    入坑篇 前线客服传来消息 — “用户反馈一打开我们的 App,就直接闪退了”,刚听到这个消息,我很吃惊,一期发的新版本 QA 都有验证过。难道是因为功能权限的问题导致的,赶紧跟客服确认具体情况。...原来是客户前几天都能正常使用 App,今天一打开就莫名闪退了。刚了解清楚具体情况,一下子闪退的消息,就如滔滔江水一涌而来,随后也就开始了 iOS 证书过期填坑之旅。...DOM 可以完全在内存中进行模拟既 V8 引擎中处理而不打开浏览器,而且关键是这个是 Chrome 团队维护,会拥有更好的兼容性和前景。...最新的无头浏览器环境里做测试、使用最新浏览器特性。 写爬虫,做你想做的事情。 是不是感觉 puppeteer 棒棒哒。...个人感觉 puppeteer 以后的工作中,还会有很多用武之地,比如此前本人使用 puppeteer 实现了简单的业务功能测试。

    2.7K30

    npm淘宝镜像安装 解决puppeteer下载chromuin出错问题

    nodejs: 安装源 curl -sL https://rpm.nodesource.com/setup_10.x | bash - yum install -y nodejs ---- 安装puppeteer...的过程中,想必很多人都会在puppeteer下载它内置的chromuin过程中出错 在网上找的几个解决办法中,无非就是安装puppeteer的过程中使其跳过浏览器的下载 然后手动下载浏览器,并修改...puppeteer的浏览器指向位置的代码,使其正常工作。...安装如果报错 可以使用如下命令解决 npm config set registry "http://registry.npmjs.org/" 然后再执行安装命令 用淘宝镜像安装puppeteer...可以看到在下载浏览器的过程中速度也是很快的 安装完成后就可以正常使用了 如果之前安装到一半停止了或者出错了,可以使用命令 npm uninstall puppeteer 卸载

    2.6K40

    用Node.js把HTML转成PDF格式

    当你截图之前需要操纵 DOM(例如隐藏打印按钮)时,它是非常方便的。我看到过很多使用这个包的项目。但不幸的是,这不是我们想要的,因为我们需要在后端完成对 PDF 的创建工作。...其文档中写道: Puppeteer 是一个 Node 库,它提供了一个高级 API 来控制 DevTools 协议的 Chrome 或 Chromium。...官方文档有疑难解答部分,你可以找到有关用 Docker 安装 puppeteer 的所有必要信息。 如果你 Alpine 镜像安装 Puppeteer,请确保在看到页面的这一部分时再向下滚动一点。...: true, 3 args: ['--disable-dev-shm-usage'] 4}); 否则,Puppeteer 子进程可能会在正常启动之前耗尽内存。...Puppeteer:尽管 Docker 上工作相对困难,但它为我们的实现提供了最好的结果,而且编写代码也是最简单的。

    6.6K30

    linux (centos)使用puppeteer实现网页截图功能

    linux安装puppeteer时可能遇到如下问题,本文将引导你如何爬坑!...-xvf node-v8.9.1-linux-x64.tar.xz # 移动重命名(可选) mv node-v8.9.1-linux-x64 /www/nodejs # 创建软连接(快捷方式),如果一步重命名不同则这一步的下划线部分根据实际情况做调整...,第二个参数则是因为chromium的某些限制,root账号执行需要加上这个参数 5.执行a.js node a.js 执行完之后就可以看到一个example.png 注意:如果页面中有中文可能无法正常显示...132&rsv_sug1=63&rsv_sug7=100&rsv_sug2=0&rsv_sug4=5908 puppeter相关文档https://pptr.dev/ 总结 以上所述是小编给大家介绍的linux...(centos)使用puppeteer实现网页截图功能,希望对大家有所帮助!

    1.7K30

    基于puppeteer模拟登录抓取页面

    热图主流的实现方式 一般实现热图显示需要经过如下阶段: 获取网站页面 获取经过处理后的用户数据 绘制热图 本篇主要聚焦于阶段1来详细的介绍一下主流的热图中获取网站页面的实现方式 使用iframe直接嵌入用户网站...== window.self){ window.top.location = window.location;} ),这种情况下就需要客户网站做一部分工作才可以被分析工具的iframe加载,使用起来不一定那么方便...第二种方式,直接抓取网站页面到本地服务器,然后浏览的是本机服务器抓取的页面,这种情况下页面已经过来了,我们就可以为所欲为了,首先我们绕过了X-FRAME-OPTIONS 为sameorgin的问题,...嵌入后,js执行还是会再一定程度上弥补这个问题),最后如果页面是spa页面,那么此时获取的只是模板,热图中显示效果非常不友好。...补充(还昨天的债):基于puppeteer虽然可以很友好的抓取页面内容,但是也存在这很多的局限 抓取的内容为渲染后的原始html,即资源路径(css、image、javascript)等都是相对路径,保存到本地后无法正常显示

    6.2K100

    Mac M1(arm 系列芯片)如何安装 Chromium | Puppeteer

    Puppeteer 自动安装失败 Puppeteer 安装时会自动安装 Chromium,然而却总是报错 502 导致下载失败,直接下载可以下载,命令行 wget 也可以,猜测是因为 Puppeteer...API Keys missing 然而当我打开后又发现 Chromium 飘着一行提示: Google API Keys are missing....不过此时的 Chromium 已经可以正常使用了,但是子曾经曰过:“遇到问题不能坐以待毙”,还是处理下好了。...811574891467.apps.googleusercontent.com" export GOOGLE_DEFAULT_CLIENT_SECRET="kdloedMFGdGla2P1zacGjAQh" ... Puppeteer 中使用 由于 Chromium 不是由 Puppeteer 安装的,所以 Puppeteer 会找不到 Chromium 位置,需要在 Puppeteer 的配置文件中添加 executablePath

    1.5K20
    领券