Selenium系列教程-02 使用Chrome开发者工具

时间 2019-11-17

标签 selenium 系列教程使用 chrome 开发者工具栏目 Chrome 繁體版

原文原文链接

系列资源：node

本节主要内容

打开Chrome开发者工具
了解设备模式
熟练使用元素定位
了解Chrome开发者工具的其它功能

Chrome开发者工具

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，能够用来对网站进行迭代，调试和分析。在作Web自动化的过程当中，咱们常常须要借助Chrome浏览器的开发者工具进行Web页面元素的查找。因此，掌握Chrome 开发工具的调试技巧是咱们作好Web自动化的前提条件。shell

打开Chrome开发者工具

如下为三种不一样的打开方式：数据库

在Chrome菜单中选择更多工具 > 开发者工具
在页面元素上右键点击，选择 “检查”（或“Inspect”）
使用快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

了解面板

设备模式

打开设备模式能够模拟网站在不一样移动设备上的显示。若是咱们要作基于移动设备的网站自动化，那么咱们须要在开发者工具中激活设备模式。浏览器

当 Device Mode 打开时，该图标呈蓝色
当 Device Mode 关闭时，该图标呈灰色

你还能够经过按 Command+Shift+M (Mac) 或 Ctrl+Shift+M（Windows、Linux）来切换 Device Mode。要使用此快捷键，鼠标焦点须要位于 DevTools 窗口中。缓存

元素面板

使用元素面板能够自由的操做DOM和CSS来查看布局和设计页面。在Web自动化的过程当中，咱们使用到最多的就是利用元素面板进行Web页面元素的定位。下面就详细说明如何进行元素定位。

元素定位介绍经常使用的两种元素定位方式：安全
- 1.经过选择器定位元素打开元素面板后，激活元素定位按钮，以后鼠标在页面上不一样元素上移动，能够看到当鼠标移动在不一样的页面元素上，对应的元素上会有对象的背景色。以下图，当鼠标移动到联系咱们上面的时候，联系咱们元素被追加上对应的背景色。cookie
  
  当咱们找到对应的元素功能后，只须要点击鼠标，就能够在开发者工具中定位到对应元素。当定位到元素以后，咱们就能够根据selenium提供的一些方法进行元素的操做。具体操做方法，会在之后的教程中详细讲解。网络
- 2.直接在页面元素上操做
  在页面上对应的元素直接经过点击“检查”菜单定位到元素：编辑器
控制台面板工具

在开发期间，可使用控制台面板记录诊断信息，或者使用它做为 shell在页面上与JavaScript交互。
- 打开控制台面板
  要打开专用的 Console 面板，请执行如下操做之一：按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。若是 DevTools 已打开，则按 Console 按钮。
源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者经过Workspaces（工做区）链接本地文件来使用开发者工具的实时编辑器。
网络面板
使用网络面板了解请求和下载的资源文件并优化网页加载性能。
性能面板
使用时间轴面板能够经过记录和查看网站生命周期内发生的各类事件来提升页面的运行时性能。
内存面板
若是须要比时间轴面板提供的更多信息，可使用“配置”面板，例如跟踪内存泄漏。
应用面板
使用资源面板检查加载的全部资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
安全面板
使用安全面板调试混合内容问题，证书问题等等。

此为Web UI自动化测试系列文章二，关注本系列分享，熟练掌握Web UI自动化测试。

获取更多资讯，能够关注公众号,也能够加QQ群：707467292 进行node.js自动化相关技术交流。