探索Web测试新境界：Elementor

探索Web测试新境界：Elementor

Elementor是一款强大的工具，专为使用Protractor进行自动化Web应用测试的开发者设计。它允许您在浏览器和IDE中直接测试Protractor选择器，使得测试过程更为便捷高效。

视频教程体验

要快速了解Elementor的功能，可观看以下视频教程：

获取并启动Elementor

Elementor是基于Node.js的应用，通过npm即可安装：

$ npm install elementor -g

启动前，需要确保已安装chromedriver以及运行中的selenium服务器。执行以下命令完成准备：

# 安装Protractor
$ npm install protractor -g

# 下载依赖项
$ webdriver-manager update

# 启动selenium服务器
$ webdriver-manager start

随后，在另一终端启动Elementor，并指定要测试的URL：

$ elementor https://angularjs.org

若需向Chrome传递标志参数，可以使用--chrome选项：

$ elementor https://angularjs.org --chrome="--disable-web-security --some-other-flag=123"

对于非Angular应用，添加--nonAngular标志：

$ elementor https://google.com --nonAngular

工作原理

Elementor扩展了Protractor的元素探索器功能，包括：

1. 在端口13000上开启一个监听命令的服务器。
2. 使用自定义扩展程序启动Chrome浏览器以进行实时测试。

扩展程序由两部分组成：

1. 一个弹出窗口，用于输入Protractor选择器和表达式。
2. 一个开发者工具窗口，为所选元素提供选择器建议。

弹出窗口使用方法

在地址栏旁边，您可以找到Elementor的弹出窗口。输入选择器或表达式后按下回车键，Elementor将对它们进行评估，结果显示在弹出菜单中。

如输入by.css('div')，系统会将其解析为element(by.css('div')).count()，进行计数操作。

此外，还能输入命令执行各种操作，例如：

• browser.get('http://protractortest.org')
• element(by.css('.some-class')).getText()
• element(by.binding('someBinding')).sendKeys('hello')

开发者工具使用指南

在“Developer tools” > “Elements” 中，右侧边栏选择“Protractor”，可获取当前选定元素的Protractor选择器建议。

为了使用开发者工具，您需要在初始标签页右键点击“复制”，然后在新标签页中使用开发者工具。这样每次在元素面板中选择一个元素时，工具都会给出选择器建议。

集成IDE插件

Elementor支持Webstorm/IntelliJ与Sublime Text等主流IDE。只需按照各插件说明进行安装：

• Webstorm/IntelliJ 插件：参见 此处 的安装步骤。

  

• Sublime Text 插件：请参考 此处 指南。

  

Emacs插件

此外，还有一款Emacs插件可供使用：查看详情，请参照插件README文件完成安装。

项目特点

• 简化Protractor测试流程，提高效率。
• 友好的交互界面，可在浏览器和IDE中直接操作。
• 支持多种IDE集成，提升开发体验。
• 自动为所选元素提供建议，加速测试定位。
• 能处理非AngularJS应用的测试需求。

Elementor不仅是Protractor测试的得力助手，也是开发者提升Web测试效能的理想工具。立即尝试，让测试工作变得更加顺畅！