什么是视口?定义、用途和决策

什么是视口?

无抓取抓取浏览器允许在受控的浏览器环境中运行自动化,其中视口设置影响页面布局和捕获的输出。

简而言之

  • 视口是浏览器呈现文档的矩形区域。 该概念的其余部分由其状态、控制面和生命周期定义。
  • 边界比标签更重要。 浏览器、上下文、页面、配置文件、会话、视口和网络身份描述不同的层次。
  • 可重复性需要明确的配置。 记录影响结果的浏览器构建、状态来源、区域设置、视口、网络路由和完成条件。
  • 可见性和持久性是独立的选择。 一次运行可以是远程可见但短暂的,或是在写入长生命周期配置文件数据时不可见。
  • 负责任的自动化始于范围。 使用批准的帐户和公共或授权的数据,尊重适用的规则,并将凭证保存在日志之外。

什么是视口?

视口是浏览器呈现文档的矩形区域。在普通桌面浏览中,它大致与浏览器窗口内的页面内容区域相匹配。视口之外的内容仍存在于文档中,但在滚动、缩放、调整大小或其他布局更改将其带入视野之前不会变得可见。

视口与屏幕分辨率、浏览器窗口大小、屏幕截图大小或文档尺寸不同。浏览器控件消耗一部分带头窗口,设备像素比改变CSS像素和设备像素之间的映射,而全页截图可以捕获比当前视口高得多的内容。

准确的定义帮助团队选择工具和诊断故障。如果工程师用一个词描述多个层次,一个Cookie问题可能会被误认为是浏览器问题,一个视口不匹配可能会被误认为是缺失数据,而一个关闭的控制连接可能会被误认为是丢失的配置文件状态。命名边界使修复更简单。

视口如何改变渲染

视口如何改变渲染可以理解为浏览器和自动化客户端控制的一系列状态转换。确切的API有所不同,但导航、渲染、存储、输入、观察和清理仍然是负载承载部分。

布局视口

布局视口提供响应式布局、媒体查询、百分比大小和相对视口单位使用的参考区域。改变它可以选择不同的导航菜单、网格或内容密度。

布局视口应该在生产中可观察。记录影响它的配置,在页面达到所需状态的点捕捉证据,并故意关闭资源。这种做法将浏览器运行转变为可解释的操作,而不是仅在一台机器上有效的序列。

视觉视口

视觉视口是用户当前可见的部分。捏放大和屏幕键盘可以在布局视口保持稳定的情况下缩小或移动可视区域。

视觉视口应该在生产中可观察。记录影响它的配置,在页面达到所需状态的点捕捉证据,并故意关闭资源。这种做法将浏览器运行转变为可解释的操作,而不是仅在一台机器上有效的序列。

设备像素比

CSS像素描述布局坐标,而物理或图像像素描述栅格输出。设备像素比连接这些空间并影响屏幕截图尺寸和图像清晰度。

设备像素比应该在生产中可观察。记录影响它的配置,在页面达到所需状态的点捕捉证据,并故意关闭资源。这种做法将浏览器运行转变为可解释的操作,而不是仅在一台机器上有效的序列。

浏览器术语在保持与主要定义关联时更容易使用。 MDN视口词汇表 最直接地描述核心概念, MDN视口概念 定义了相邻控制或架构边界,并且 W3C WebDriver规范 提供了第二种实现视角。这些来源描述标准和浏览器行为;产品选择仍然取决于工作流程、安全模型和目标环境。

视口、窗口、屏幕和文档

视口、窗口、屏幕和文档将通常在随意讨论中合并的术语分开。该表专注于所有权和操作效果,而不仅仅是品牌特定的API名称。

概念主要含义操作角色
视口用于Web内容的可见或布局参考区域响应式布局和滚动
浏览器窗口包括浏览器Chrome的操作系统窗口完整的演示
屏幕设备可用的显示表面环境和指纹输入
文档完整的页面内容和可滚动区域可以超出视口

这些类别可以在一个架构中共存。一个云分配可以运行一个无头的Chromium进程,创建一个隔离的上下文,打开多个页面,为每个页面应用一个视口,并附加一个持久的配置文件。只有在每个名词保持其自身职责时,这个架构才是可以理解的。

视口的常见用途

当特定的边界减少操作风险或使浏览器行为可衡量时,视口是有用的。这些常见用途展示了每种模式实际满足的要求。

响应式测试

确认断点和导航模式在代表性的宽度下工作。

一个良好的实现定义了所需的初始状态、完成的证据以及在浏览器打开之前的清理规则。

截图一致性

固定视口和设备比例设置,以便视觉捕捉可以进行比较。

一个良好的实现定义了所需的初始状态、完成的证据以及在浏览器打开之前的清理规则。

懒惰内容激活

滚动视口以触发加载或渲染接近可见性的元素。

一个良好的实现定义了所需的初始状态、完成的证据以及在浏览器打开之前的清理规则。

移动仿真

结合视口、触控、用户代理、比例和其他设备设置,而不是仅仅改变宽度。

一个良好的实现定义了所需的初始状态、完成的证据以及在浏览器打开之前的清理规则。

视口背后的状态模型

一个可靠的视口工作流分离配置、运行时状态、网站状态和证据。配置是操作员在启动前选择的内容:浏览器版本、启动模式、区域、时区、权限、视口和网络路径。运行时状态涵盖分配的进程、上下文、页面、内存、打开的连接和控制通道。网站状态包括Cookie、来源存储、服务器端账户记录和当前渲染的文档。证据是用来解释发生了什么的记录。

这些层具有不同的生命周期。一个页面可以关闭,而其上下文Cookie仍然存在。一个上下文可以关闭,而一个持久的配置文件在磁盘上仍然存在。远程控制连接可以消失,而服务仍然在短时间内拥有浏览器。一个网站登录在自动化会话结束后可能仍然有效。因此,清理每个工作流创建的层需要明确的操作。

状态所有权还控制并行性。一个上下文中的两个页面可以故意共享认证,但两个独立的任务通常不应共享。一个浏览器中的两个上下文可以在竞争相同的进程资源时隔离Cookie。两个持久的浏览器启动不应指向同一个活跃用户数据目录。并发的安全单位由隔离和共享资源限制共同决定。

使用相关标识符而不暴露控制秘密。一个作业ID可以连接应用日志、浏览器事件、截图和最终输出。一个会话端点、Cookie值、身份验证头或配置文件存档决不能扮演这个角色,因为任何读取日志的人都可能获得对浏览器或账户的访问权限。在日志边界处移除值,而不是依赖后续的清理。

视口的可观察性

可观察性应回答四个问题:哪个环境在运行,浏览器看到了什么,控制器发送了什么动作,以及工作流为何认为任务已完成。一个有用的事件记录包括时间戳、相关ID、导航后的页面URL、动作名称、非秘密参数、持续时间、结果和简短的错误分类。它避免页面内容,除非这些内容是必需的证据。

按故障模式选择工件。当资源被阻止或重定向时,网络事件有帮助。当预期元素缺失或结构不同时时,DOM快照有帮助。当覆盖层覆盖控制、响应式布局更改或字体改变几何形状时,截图有帮助。当登录状态消失时,存储元数据有帮助。当多个交互的顺序很重要时,记录有帮助,但应谨慎保留,因为它可能捕获敏感信息。

完成检查应与验证的操作相邻。在导航后,验证URL、响应或页面标记。在输入后,验证字段值或结果状态。在点击后,验证应该引起的路由、对话框、网络请求或文档变化。在提取后,验证所需字段和数据类型。没有异常返回的命令并不能证明所需的用户可见结果发生。

操作仪表板应区分产品健康与目标页面变动。浏览器分配失败、控制通道失败、渲染器崩溃、目标HTTP响应、应用级空状态和选择器不匹配需要不同的标签。将它们合并为一个通用的失败率隐藏了需要关注的层,鼓励对狭窄问题进行广泛更改。

限制和故障模式

一个带有移动用户代理的桌面大小视口并不是一个忠实的移动环境。响应式网站考虑多个信号,有些应用观察触摸支持、设备比例、方向或客户端提示。为了获得可重复的捕捉,记录完整的仿真配置,并在拍摄截图之前等待布局变化、字体和相关内容。

大多数失败在正确层捕获证据时更容易分类。导航响应解释了传输和服务器行为。DOM 解释了呈现的结构。截图解释了可见布局。存储检查解释了 cookie 和源状态。会话日志解释了生命周期。这些工件中的任何一个都不能替代其他所有工件。

固定延迟是一个弱的完成信号,因为页面不会在一个通用的时间量内完成。优先考虑与任务相关的条件:路线确定,标题出现,已知请求完成,控件变为可用,或期望的数据存在。设置一个有界的超时,以便缺失条件以有用的证据结束。

开发、预生产和生产

开发偏向于可视性和快速诊断。运行一个小的代表性案例,暴露浏览器状态,并将截图或跟踪与代码保持靠近。预生产应当镜像生产配置,同时使用受控账户和目标。生产偏向于确定性输入、最小权限、有限资源使用、结构化遥测和自动清理。在这些环境中移动应该改变配置,而不是重写导航逻辑。

版本控制适用于浏览器行为以及应用代码。在平台允许的情况下,将兼容的浏览器和自动化客户端版本固定,升级前查看发行说明,并运行一个针对性的兼容性套件。该套件应覆盖导航、存储、输入、下载(如果使用)、截图以及工作流依赖的任何协议特性。通过页面标题检查的通过对于浏览器升级来说过于浅显。

容量规划应以页面为起点,而不是机器上通用的浏览器数量。测量代表性工作所需的内存、CPU、网络流量、页面持续时间和工件大小。重客户端应用程序、视频、大画布和多个打开的页面会改变成本配置。根据观察到的资源使用和服务限制设置并发,然后留出余量,以便一个昂贵的页面不会使无关的会话不稳定。

生产清理应当是幂等的:在部分失败后调用它仍应关闭存在的页面、上下文、会话和临时文件。清理日志应确认释放了哪些资源,而不打印其秘密值。持久性配置文件单独处理,因为删除一个故意持久的配置文件并不是普通的工作清理。

安全、隐私和负责任的使用

浏览器环境可以持有凭据、个人数据、下载和仅对授权账户可见的内容。对账户和操作者应用最小权限,将秘密保存在源文件之外,限制对记录的访问,并在有文件记录的保留政策下删除状态。如果没有审核,方便的调试工件可能会成为数据泄露。

自动化不应在没有权限的情况下访问私人、机密或受限信息。审查网站条款、适用的机器人指导、合同义务以及支配数据和司法管辖区的法律。技术能力并不建立授权。

与指纹相关的配置应格外小心。浏览器特性,例如语言、显示、编解码器、字体和设置,可能会为识别做出贡献,如引用的标准和隐私指导中所述。将此类控制用于兼容性、隔离和批准测试;不要将其用于冒充个人或隐瞒滥用活动。

如何选择正确的设置

根据您需要验证的产品状态选择视口大小,而不是时尚设备列表。测试重要的临界点之下和之上,至少包括一个狭窄和一个宽广状态,并检查溢出,而不是假设成功的截图意味着页面可用。

  • 从所需的结果开始。 定义工作流必须生成的页面状态、数据、交互或证据。
  • 选择最小的状态边界。 一个页面、上下文、会话或配置文件不应该比任务要求的生命周期更长或共享更多数据。
  • 明确环境输入。 浏览器构建、区域设置、时区、视口、权限和网络路线可能会改变结果。
  • 在扩展之前设计可观测性。 捕获足够的证据来区分网络、渲染、选择器、存储和生命周期失败。
  • 故意关闭和清理。 释放远程资源,移除临时状态,仅保留经过批准的工件。

无废屑抓取浏览器文档 描述已管理的会话表面,而 无废屑抓取浏览器产品页面 解释了该产品在云浏览器自动化中的角色。这些产品引用补充了标准链接,而不是改变一般定义。

结论

视口最有用的地方是作为一个精确的架构术语,而不是营销标签。它的价值来自于它所拥有的状态,它所启用的浏览器行为,以及它所创建的操作边界。保持这些属性明确,区分本地、远程、持久、隔离、可见和无人值守执行的选择就变得简单。

对于生产工作,将该定义与具体证据搭配:已知的起始状态、有意义的完成条件、保护的日志和故意的清理。这种组合使浏览器自动化更容易检查、调试和维护。

准备好构建受管理的浏览器工作流吗?

当工作流需要远程 Chromium 渲染、受控会话和浏览器级交互时,请使用无废屑抓取浏览器。

开始免费→

常见问题

视口和浏览器配置文件是一样的吗?

不。视口和浏览器配置文件描述不同的层。配置文件是持久浏览器数据的集合,而本页面的主题描述了一种执行模式、容器、身份模型或基础设施模式。一个工作流可能同时使用两者,但应该分别命名它们。

视口使自动化不可检测吗?

不。没有浏览器设置或产品可以保证自动化是不被观察到的。网站可能会评估浏览器属性、网络上下文、帐户、交互历史和服务器端行为。仅在授权范围内使用自动化,并将检测行为视为可观察的系统属性,而不是隐形的承诺。

团队什么时候应该选择视口?

当一个团队的特定状态、呈现、隔离或操作属性解决了文档需求时,应该选择视口。决策应比较简单的 HTTP 客户端、本地浏览器自动化和受管浏览器执行,然后选择返回所需结果的最简单选项。

视口工作流应该记录什么?

记录浏览器和客户端版本、非机密配置、会话或作业关联 ID、目标 URL、重要状态转换、最终结果和清理结果。仅在需要时存储屏幕截图或录制,保护它们作为潜在敏感数据,并且永远不要记录 cookies、凭据或远程控制端点。

如何可靠地测试视口?

以明确的起始状态、稳定的选择器或文档信号、限定的超时、代表性的页面变体和清晰的完成检查来测试视口。比较最终的 DOM 或用户可见结果,而不是依赖固定延迟,并保持一个诊断路径,以显示屏幕截图、痕迹或实时浏览器状态。

参考文献