公司自动化测试项目--基本配置

承接上一篇，上一篇提到了，四个 （应该是5个）js ，这里分别用一句话说一下，他们在项目中，分别干啥用的。

grunt ：任务运行器。自动化测试运行 的构建工具。 

 程序中用法：下文介绍gruntfile.js 中。

promise  ：实现javascript 的异步编程。

程序中用法:  .then    

char  ：何总给的解释是:BDD/TDD assertion library   ：关于TDD/BDD/DDD的一些看法。  

程序中用法：就是 assertion.

selenium ：
参考资料：基于 Selenium WebDriver 的 Web 应用自动化测试
主要用法，就是selenium-webdriver  ，用webdriver ,来操作浏览器，进行自动化测试。

cucumber：Cucumber.js是著名的行为驱动开发（BDD）工具Cucumber的JavaScript版本。

************************分割线*********************************

项目中的文件。

pom.xml

如果用maven 启动测试用例，需要配置pom.xml 。

以 mvn  test 命令运行，maven  会访问pom.xml   

在pom.xml中，需要用的，就是这个标签。

<executions>   API： https://maven.apache.org/guides/mini/guide-configuring-plugins.html#Using_the_executions_Tag

原文解释如下：

You can also configure a mojo using the <executions> tag. This is most commonly used for mojos that are intended to participate in some phases of the build lifecycle. Using MyQueryMojo as an example, you may have something that will look like:

就是，maven ，会执行 ，你这个标签下面的，每一个<execution>，每个 <execution>，就是一条命令。 所以，在pom.xml中，下面的代码，就  等同于  

grunt firefox chrome

<execution><id>grunt build</id><phase>generate-resources</phase><goals><goal>grunt</goal></goals><configuration><arguments>firefox chrome</arguments></configuration></execution>

package.json

这个文件，是nodejs 的文件，会标注 所有需要引入的 类库，类似 jar包。

第一篇文章中，提到的  在项目根目录下 执行命令  npm install   ，会访问 package.json   中的   devDependencies，并下载所有的依赖类库。

{  "name": "ingenta-autotest",  "version": "1.0.0",  "description": "This is a test project for Cheng Zong to practise automation test.",  "main": "Gruntfile.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "XinHe <[e-mail]>",  "license": "MIT",  "devDependencies": {"chai": "^3.5.0","cucumber": "^1.0.0","grunt": "^1.0.1","grunt-cli": "^1.2.0","grunt-contrib-jshint": "^1.0.0","grunt-env": "^0.4.4","grunt-exec": "^0.4.7","sanitize-filename": "^1.6.0","selenium-webdriver": "^2.53.2"  }}

Gruntfile.js

这个文件，就是 grunt .

详细解释，看官方文档。

Grunt 快速入门

在系统中的用法，主要有两点。  启动项目的  grunt chrome      or      grunt firefox 命令，就是直接访问这个文件。

以下是此文件 测试demo 中 所有代码。

'use strict';var path = require('path');module.exports = function(grunt) {grunt.initConfig({tag_chrome : '--tags @first',      // 在 demo 代码分析 那篇博客中，在 .feature  文件中，标注过 @first标签，下文解释。tag_firefox : '',env : {chrome : {PLATFORM : 'CHROME'},firefox : {PLATFORM : 'FIREFOX'}},jshint : {all : [ 'Gruntfile.js', 'features/step_definitions/*.js', 'features/support/*.js' ],options : {node : true,strict : true,globalstrict : true}},exec : {run_chrome : {command : 'node ' + path.join('node_modules', 'cucumber', 'bin', 'cucumber.js -f pretty <%= tag_chrome %>')},run_firefox : {command : 'node ' + path.join('node_modules', 'cucumber', 'bin', 'cucumber.js -f pretty <%= tag_firefox %>')},run_help : {command : 'node ' + path.join('node_modules', 'cucumber', 'bin', 'cucumber.js --help')},}});grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-exec');grunt.loadNpmTasks('grunt-env');grunt.registerTask('default', [ 'jshint', 'exec:run_help' ]);grunt.registerTask('chrome', [ 'env:chrome', 'jshint', 'exec:run_chrome' ]);      grunt.registerTask('firefox', [ 'env:firefox', 'jshint', 'exec:run_firefox' ]);grunt.registerTask('asdf666', [ 'env:firefox', 'jshint', 'exec:run_firefox' ]);};

文件结构，就不解释了，官方文档，这里解释这么几点。

1、@first 标签，在feature文件中，每个测试 单元，都可以进行标注标签。   标签的作用是，说明，这个测试单元，在什么环境下会进行。如果有多个测试单元，只有一个标注了@first ，则，当你运行 命令 grunt chrome ，只会执行标注 标签的 测试单元。

2、grunt.registerTask    ，在用命令  grunt chrome 启动测试用例，会找到对应的 registerTask    ，可以使用命令 grunt --help ，会提示所有命令，包括 registerTask  中设置的。

W:\AutoTestProject\LawEditorial-autotest>grunt --helpGrunt: The JavaScript Task Runner (v1.0.1)Usage grunt [options] [task [task ...]]Options    --help, -h  Display this help text.Options marked with * have methods exposed via the grunt API and should insteadbe specified inside the Gruntfile wherever possible.Available tasks        jshint  Validate files with JSHint. *          exec  Execute shell commands. *           env  Specify an ENV configuration for future tasks in the chain *       default  Alias for "jshint", "exec:run_help" tasks.        chrome  Alias for "env:chrome", "jshint", "exec:run_chrome" tasks.       firefox  Alias for "env:firefox", "jshint", "exec:run_firefox" tasks.       asdf666  Alias for "env:firefox", "jshint", "exec:run_firefox" tasks.Tasks run in the order specified. Arguments may be passed to tasks that acceptthem by using colons, like "lint:files". Tasks marked with * are "multi tasks"and will iterate over all sub-targets if no argument is specified.The list of available tasks may change based on tasks directories or gruntplugins specified in the Gruntfile or via command-line options.For more information, see http://gruntjs.com/

***************

PS:上面 代码块，我去掉了一部分Options。

可以看到，Available tasks 下面，包含 我在Gruntfile.js中，定义的所有registerTask  

***************

3、jshint，这个我还没有研究明白，以后补充。

world.js

1、项目中world.js 的作用，是，抽象封装了一些公共方法，以及一些必须实现的基础方法  base method。类似 ，所有Controller 都继承 的那个  BaseController。

2、最重要的作用，就是，对Gruntfile.js 文件中，registerTask  标注的，进行详细的解释。

这个文件比较重要，贴出demo中所有代码：

'use strict';var fs = require('fs');var webdrive = require('selenium-webdriver');var platform = process.env.PLATFORM || "FIREFOX";var buildChromedrive = function() {return new webdrive.Builder().withCapabilities(webdrive.Capabilities.chrome()).build();//.usingServer('http://127.0.0.1:64465/')};var buildFirefoxdrive = function() {return new webdrive.Builder().withCapabilities(webdrive.Capabilities.firefox()).build();//.usingServer('http://127.0.0.1:64465/')};switch (platform) {case 'FIREFOX':var drive = buildFirefoxdrive();break;case 'CHROME':var drive = buildChromedrive();drive.manage().window().setSize(1920,1080);break;default:var drive = buildChromedrive();}var getdrive = function() {return drive;};var World = function World() {var defaultTimeout = 60000;var screenshotPath = "screenshots";drive.manage().timeouts().implicitlyWait(50000);this.webdrive = webdrive;this.drive = drive;if (!fs.existsSync(screenshotPath)) {fs.mkdirSync(screenshotPath);}this.waitForId = function(idLocator, elementName) {var errMsg = elementName + ' was still not present when it should have appeared.';  return drive.wait(function() {return drive.isElementPresent({ id : idLocator }) &&    drive.findElement({ id : idLocator }).isDisplayed().then(function (displayed) {           if (!displayed) return false;           return drive.findElement({ id : idLocator }).isEnabled();       });   }, defaultTimeout, errMsg);};this.waitForCss = function(cssLocator, elementName) {var errMsg = elementName + ' was still not present when it should have appeared.'; return drive.wait(function() {return drive.isElementPresent({ css : cssLocator }) &&    drive.findElement({ css : cssLocator }).isDisplayed().then(function (displayed) {           if (!displayed) return false;           return drive.findElement({ css : cssLocator }).isEnabled();       });   }, defaultTimeout, errMsg);};this.waitForXpath = function(xpathLocator, elementName) {var errMsg = elementName + ' was still not present when it should have appeared.'; return drive.wait(function() {return drive.isElementPresent({ xpath : xpathLocator }) &&    drive.findElement({ xpath : xpathLocator }).isDisplayed().then(function (displayed) {           if (!displayed) return false;           return drive.findElement({ xpath : xpathLocator }).isEnabled();       });   }, defaultTimeout, errMsg);};};module.exports.World = World;module.exports.getdrive = getdrive;

1、首先，switch，会根据 在 gruntfile.js 中，指定的 registerTask  ，进行筛选，并启动不同的driver ，firefox 或者 chrome。

******************PS:这里的 driver ，就是 selenium - webdriver 。

2、其次，var World = function World()   方法。

就是封装的一些方法 ，供 logintest.page.js 调用，可以自己定义 一些工具方法，写在这个方法下。

demo中的三个方法  1、this.waitForId     2、 this.waitForCss  3、 this.waitForXpath。  这三个方法的意思是，

等待某些元素加载完成，适用情况很简单，比如网速不好的时候，你不知道   某个 input  输入框，或者 某个 button  按钮，在什么时候加载完成。

但是，你可以根据 这个控件 的ID，或者CSS ，或者 Xpath ，来设置，等这个控件加载完成后，才继续执行测试。

************PS: 说一下Xpath。*************

自己百度什么是xpath 。

xpath 教程 下载：http://share.weiyun.com/29efd2f50d8f2b0cb093c97b5b4efc31

在谷歌浏览器，可以直接获取xpath 信息。在 F12 控制台 的 Element 中，找到对应元素的  html 代码。右键 Copy --> Copy Xpath

复制出来的就是      xpath  地址       //*[@id="article_details"]/div[2]/div[2]/span[5]/a

*************************x path   end ***************************************************************

现在，结合 worle.js 再去看 logintest.step.js 和 logintest.page.js ，可以看出。

在 step 文件中，在所有的实现业务逻辑方法中，

用到的公共元素，可以提取到page.js 中，

用到的公共方法，提取到world.js 中使用。

that‘s  all