多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] ## 为什么要写测试? Web应用程序越来越复杂,这意味着有更多的可能出错。测试是帮助我们提高代码质量、降低错误的最好方法和工具之一。 * 测试可以确保得到预期结果。 * 加快开发速度。 * 方便维护。 * 提供用法的文档。 ## 测试的类型 ### 单元测试 单元测试(unit testing)指的是以软件的单元为单位,对软件进行测试。单元(unit)可以是一个函数,也可以是一个模块或组件。它的基本特征就是,只要输入不变,必定返回同样的输出。 单元测试这个词,本身就暗示,软件应该以模块化结构存在。每个模块的运作,是独立于其他模块的。一个软件越容易写单元测试,往往暗示着它的模块化结构越好,各模块之间的耦合就越弱;越难写单元测试,或者每次单元测试,不得不模拟大量的外部条件,很可能暗示软件的模块化结构越差,模块之间存在较强的耦合。 单元测试的要求是,每个模块都必须有单元测试,而软件由模块组成。 单元测试通常采取断言(assertion)的形式,也就是测试某个功能的返回结果,是否与预期结果一致。如果与预期不一致,就表示测试失败。 单元测试是函数正常工作、不出错的最基本、最有效的方法之一。 每一个单元测试发出一个特定的输入到所要测试的函数,看看函数是否返回预期的输出,或者采取了预期的行动。单元测试证明了所测试的代码行为符合预期。 单元测试有助于代码的模块化,因此有助于长期的重用。因为有了测试,你就知道代码是可靠的,可以按照预期运行。从这个角度说,测试可以节省开发时间。单元测试的另一个好处是,有了测试,就等于就有了代码功能的文档,有助于其他开发者了解代码的意图。 单元测试应该避免依赖性问题,比如不存取数据库、不访问网络等等,而是使用工具虚拟出运行环境。这种虚拟使得测试成本最小化,不用花大力气搭建各种测试环境。 单元测试的步骤 * 准备所有的测试条件 * 调用(触发)所要测试的函数 * 验证运行结果是否正确 * 还原被修改的记录 ### 集成测试 集成测试(Integration test)指的是多个部分在一起测试,比如在一个测试数据库上,测试数据库连接模块。 ### 功能测试 功能测试(Functional test)指的是,自动测试整个应用程序的某个功能,比如使用Selenium工具自动打开浏览器运行程序。 ## 开发模式 ### TDD TDD是“测试驱动的开发”(Test-Driven Development)的简称,指的是先写好测试,然后再根据测试完成开发。使用这种开发方式,会有很高的测试覆盖率。 TDD的开发步骤如下。 * 先写一个测试。 * 写出最小数量的代码,使其能够通过测试。 * 优化代码。 * 重复前面三步。 TDD开发的测试覆盖率通常在90%以上,这意味着维护代码和新增特性会非常容易。因为测试保证了你可以信任这些代码,修改它们不会破坏其他代码的运行。 TDD接口提供以下四个方法。 * suite() * test() * setup() * teardown() 下面代码是测试计数器是否加1。 ~~~ suite('Counter', function() { test('tick increases count to 1', function() { var counter = new Counter(); counter.tick(); assert.equal(counter.count, 1); }); }); ~~~ ### BDD BDD是“行为驱动的开发”(Behavior-Driven Development)的简称,指的是写出优秀测试的最佳实践的总称。 BDD认为,不应该针对代码的实现细节写测试,而是要针对行为写测试。BDD测试的是行为,即软件应该怎样运行。 BDD接口提供以下四个方法。 * describe() * it() * before() * after() * beforeEach() * afterEach() 下面是测试计数器是否加1的BDD写法。 ~~~ describe('Counter', function() { it('should increase count by 1 after calling tick', function() { var counter = new Counter(); var expectedCount = counter.count + 1; counter.tick(); assert.equal(counter.count, expectedCount); }); }); ~~~ ## 断言 断言是判断实际值与预期值是否相等的工具。 断言有assert、expext、should三种风格,或者称为三种写法。 ~~~ // assert风格 assert.equal(event.detail.item, '(item).); // expect风格 expect(event.detail.item).to.equal('(item)'); // should风格 event.detail.item.should.equal('(item)'); ~~~ Chai.js是一个很流行的断言库,同时支持上面三种风格。 (1) assert风格 ~~~ var assert = require('chai').assert; var foo = 'bar'; var beverages = { tea: [ 'chai', 'matcha', 'oolong' ] }; assert.typeOf(foo, 'string', 'foo is a string'); assert.equal(foo, 'bar', 'foo equal `bar`'); assert.lengthOf(foo, 3, 'foo`s value has a length of 3'); assert.lengthOf(beverages.tea, 3, 'beverages has 3 types of tea'); ~~~ 上面代码中,assert方法的最后一个参数是错误提示信息,只有测试没有通过时,才会显示。 (2)expect风格 ~~~ var expect = require('chai').expect; var foo = 'bar'; var beverages = { tea: [ 'chai', 'matcha', 'oolong' ] }; expect(foo).to.be.a('string'); expect(foo).to.equal('bar'); expect(foo).to.have.length(3); expect(beverages).to.have.property('tea').with.length(3); ~~~ (3)should风格 ~~~ var should = require('chai').should(); var foo = 'bar'; var beverages = { tea: [ 'chai', 'matcha', 'oolong' ] }; foo.should.be.a('string'); foo.should.equal('bar'); foo.should.have.length(3); beverages.should.have.property('tea').with.length(3); ~~~ ## Mocha.js Mocha是一个测试框架,也就是运行测试的工具。它使用下面的命令安装。 ~~~ $ npm install -g mocha ~~~ Mocha自身不带断言库,所以还需要安装一个断言库,这里选用Chai.js。 ~~~ $ npm install -g chai ~~~ Mocha默认执行test目录的脚本文件,所以我们将所有测试脚本放在test子目录。 Mocha允许指定测试脚本文件,可以使用通配符,同时指定多个文件。 ~~~ $ mocha --reporter spec spec/{my,awesome}.js $ mocha --ui tdd test/unit/*.js etc ~~~ 如果希望测试非存放于test子目录的测试用例,可以在test子目录中新建Mocha的配置文件mocha.opts。在该文件中写入以下内容。 ~~~ server-tests ~~~ 上面代码指定Mocha默认测试server-tests子目录的测试脚本。 ~~~ server-tests --recursive ~~~ 上面代码中,--recursive参数指定同时运行子目录中的测试用例脚本。 report参数用于指定Mocha的报告格式。 ~~~ $ mocha --reporter spec server-test/*.js ~~~ 上面代码指定报告格式是spec。 grep参数用于搜索测试用例的名称(即it方法的第一个参数),然后只执行匹配的测试用例。 ~~~ $ mocha --reporter spec --grep "Fnord:" server-test/*.js ~~~ 上面代码只测试名称中包含“Fnord:”的测试用例。 invert参数表示只运行不符合条件的测试脚本。 ~~~ $ mocha --grep auth --invert ~~~ 测试脚本中,describe方法和it方法都允许调用only方法,表示只运行某个测试套件或测试用例。 ~~~ describe("using only", function() { it.only("this is the only test to be run", function() { }); it("this is not run", function() { }); }); ~~~ 上面代码中,只有第一个测试用例会运行。 describe方法和it方法还可以调用skip方法,表示跳过指定的测试套件或测试用例。 ~~~ describe("using only", function() { it.skip("this is the only test to be run", function() { }); it("this is not run", function() { }); }); ~~~ 上面代码中,只有第二个测试用例会执行。 如果测试用例包含异步操作,可以done方法显式指定测试用例的运行结束时间。 ~~~ it('logs a', function(done) { var f = function(){ console.log('logs a'); done(); }; setTimeout(f, 500); }); ~~~ 上面代码中,正常情况下,函数f还没有执行,Mocha就已经结束运行了。为了保证Mocha等到测试用例跑完再结束运行,可以手动调用done方法 ## WebDriver WebDriver是一个浏览器的自动化框架。它在各种浏览器的基础上,提供一个统一接口,将接收到的指令转为浏览器的原生指令,驱动浏览器。 WebDriver由Selenium项目演变而来。Selenium是一个测试自动化框架,它的1.0版叫做Selenium RC,通过一个代理服务器,将测试脚本转为JavaScript脚本,注入不同的浏览器,再由浏览器执行这些脚本后返回结果。WebDriver就是Selenium 2.0,它对每个浏览器提供一个驱动,测试脚本通过驱动转换为浏览器原生命令,在浏览器中执行。 ### 定制测试环境 DesiredCapabilities对象用于定制测试环境。 * 定制DesiredCapabilities对象的各个属性 * 创建DesiredCapabilities实例 * 将DesiredCapabilities实例作为参数,新建一个WebDriver实例 ### 操作浏览器的方法 WebDriver提供以下方法操作浏览器。 close():退出或关闭当前浏览器窗口。 ~~~ driver.close(); ~~~ quit():关闭所有浏览器窗口,中止当前浏览器driver和session。 ~~~ driver.quit(); ~~~ getTitle():返回当前网页的标题。 ~~~ driver.getTitle(); ~~~ getCurrentUrl():返回当前网页的网址。 ~~~ driver.getCurrentUrl(); ~~~ getPageSource():返回当前网页的源码。 ~~~ // 断言是否含有指定文本 assert(driver.getPageSource().contains("Hello World"), "预期含有文本Hello World"); ~~~ click():模拟鼠标点击。 ~~~ // 例一 driver.findElement(By.locatorType("path")) .click(); // 例二 driver.get("https://www.google.com"); driver.findElement(By.name("q")) .sendKeys("webDriver"); driver.findElement(By.id("sblsbb")) .click(); ~~~ clear():清空文本输入框。 ~~~ // 例一 driver.findElement(By.locatorType("path")).clear(); // 例二 driver.get("https://www.google.com"); driver.findElement(By.name("q")) .sendKeys("webDriver"); driver.findElement(By.name("q")) .clear(); driver.findElement(By.name("q")) .sendKeys("testing"); ~~~ sendKeys():在文本输入框输入文本。 ~~~ driver.findElement(By.locatorType("path")) .sendKeys("your text"); ~~~ submit():提交表单,或者用来模拟按下回车键。 ~~~ // 例一 driver.findElement(By.locatorType("path")) .submit(); // 例二 driver.get("https://www.google.com"); driver.findElement(By.name("q")) .sendKeys("webdriver"); element.submit(); ~~~ findElement():返回选中的第一个元素。 ~~~ driver.get("https://www.google.com"); driver.findElement(By.id("lst-ib")); ~~~ findElements():返回选中的所有元素(0个或多个)。 ~~~ // 例一 driver.findElement(By.id("searchbox")) .sendKeys("webdriver"); driver.findElements(By.xpath("//div[3]/ul/li")) .get(0) .click(); // 例二 driver.findElements(By.tagName("select")) .get(0) .findElements(By.tagName("option")) .get(3) .click() .get(4) .click() .get(5) .click(); // 例三:获取页面所有链接 var links = driver .get("https://www.google.com") .findElements(By.tagName("a")); var linkSize = links.size(); var linksSrc = []; console.log(linkSize); for(var i=0;i<linkSize;i++) {   linksSrc[i] = links.get(i).getAttribute("href"); } for(int i=0;i<linkSize;i++){   driver.navigate().to(linksSrc[i]);   Thread.sleep(3000); } ~~~ 可以使用`size()`,查看到底选中了多少个元素。 ### 网页元素的定位 WebDriver提供8种定位器,用于定位网页元素。 * By.id:HTML元素的id属性 * By.name:HTML元素的name属性 * By.xpath:使用XPath语法选中HTML元素 * By.cssSelector:使用CSS选择器语法 * By.className:HTML元素的class属性 * By.linkText:链接文本(只用于选中链接) * By.tagName:HTML元素的标签名 * By.partialLinkText:部分链接文本(只用于选中链接) 下面是一个使用id定位器,选中网页元素的例子。 ~~~ driver.findElement(By.id("sblsbb")).click(); ~~~ ### 网页元素的方法 以下方法属于网页元素的方法,而不是webDriver实例的方法。需要注意的是,有些方法是某些元素特有的,比如只有文本框才能输入文字。如果在网页元素上调用不支持的方法,WebDriver不会报错,也不会给出给出任何提示,只会静静地忽略。 getAttribute():返回网页元素指定属性的值。 ~~~ driver.get("https://www.google.com"); driver.findElement(By.xpath("//div[@id='lst-ib']")) .getAttribute("class"); ~~~ getText():返回网页元素的内部文本。 ~~~ driver.findElement(By.locatorType("path")).getText(); ~~~ getTagName():返回指定元素的标签名。 ~~~ driver.get("https://www.google.com"); driver.findElement(By.xpath("//div[@class='sbib_b']")) .getTagName(); ~~~ isDisplayed():返回一个布尔值,表示元素是否可见。 ~~~ driver.get("https://www.google.com"); assert(driver.findElement(By.name("q")) .isDisplayed(), '搜索框应该可选择'); ~~~ isEnabled():返回一个布尔值,表示文本框是否可编辑。 ~~~ driver.get("https://www.google.com"); var Element = driver.findElement(By.name("q")); if (Element.isEnabled()) {   driver.findElement(By.name("q")) .sendKeys("Selenium Essentials"); } else {   throw new Error(); } ~~~ isSelected():返回一个布尔值,表示一个元素是否可选择。 ~~~ driver.findElement(By.xpath("//select[@name='jump']/option[1]")) .isSelected() ~~~ getSize():返回一个网页元素的宽度和高度。 ~~~ var dimensions=driver.findElement(By.locatorType("path")) .getSize();  dimensions.width; dimensions.height; ~~~ getLocation():返回网页元素左上角的x坐标和y坐标。 ~~~ var point = driver.findElement(By.locatorType("path")).getLocation(); point.x; // 等同于 point.getX(); point.y; // 等同于 point.getY(); ~~~ getCssValue():返回网页元素指定的CSS属性的值。 ~~~ driver.get("https://www.google.com"); var element = driver.findElement(By.xpath("//div[@id='hplogo']")); console.log(element.getCssValue("font-size")); console.log(element.getCssValue("font-weight")); console.log(element.getCssValue("color")); console.log(element.getCssValue("background-size")); ~~~ ### 页面跳转的方法 以下方法用来跳转到某一个页面。 get():要求浏览器跳到某个网址。 ~~~ driver.get("URL"); ~~~ navigate().back():浏览器回退。 ~~~ driver.navigate().back(); ~~~ navigate().forward():浏览器前进。 ~~~ driver.navigate().forward(); ~~~ navigate().to():跳转到浏览器历史中的某个页面。 ~~~ driver.navigate().to("URL"); ~~~ navigate().refresh():刷新当前页面。 ~~~ driver.navigate().refresh(); // 等同于 driver.navigate() .to(driver.getCurrentUrl()); // 等同于 driver.findElement(By.locatorType("path")) .sendKeys(Keys.F5); ~~~ ### cookie的方法 getCookies():获取cookie ~~~ driver.get("https://www.google.com"); driver.manage().getCookies(); ~~~ getCookieNamed() :返回指定名称的cookie。 ~~~ driver.get("https://www.google.com"); console.log(driver.manage().getCookieNamed("NID")); ~~~ addCookie():将cookie加入当前页面。 ~~~ driver.get("https://www.google.com"); driver.manage().addCookie(cookie0); ~~~ deleteCookie():删除指定的cookie。 ~~~ driver.get("https://www.google.co.in"); driver.manage().deleteCookieNamed("NID"); ~~~ ### 浏览器窗口的方法 maximize():最大化浏览器窗口。 ~~~ var driver = new FirefoxDriver(); driver.manage().window().maximize(); ~~~ getSize():返回浏览器窗口、图像、网页元素的宽和高。 ~~~ driver.manage().window().getSize(); ~~~ getPosition():返回浏览器窗口左上角的x坐标和y坐标。 ~~~ console.log("Position X: " + driver.manage().window().getPosition().x); console.log("Position Y: " + driver.manage().window().getPosition().y); console.log("Position X: " + driver.manage().window().getPosition().getX()); console.log("Position Y: " + driver.manage().window().getPosition().getY()); ~~~ setSize():定制浏览器窗口的大小。 ~~~ var d = new Dimension(320, 480); driver.manage().window().setSize(d); driver.manage().window().setSize(new Dimension(320, 480)); ~~~ setPosition():移动浏览器左上角到指定位置。 ~~~ var p = new Point(200, 200); driver.manage().window().setPosition(p); driver.manage().window().setPosition(new Point(300, 150)); ~~~ getWindowHandle():返回当前浏览器窗口。 ~~~ var parentwindow = driver.getWindowHandle(); driver.switchTo().window(parentwindow); ~~~ getWindowHandles():返回所有浏览器窗口。 ~~~ var childwindows =  driver.getWindowHandles(); driver.switchTo().window(childwindow); ~~~ switchTo.window():在浏览器窗口之间切换。 ~~~ driver.SwitchTo().Window(childwindow); driver.close(); driver.SwitchTo().Window(parentWindow); ~~~ ### 弹出窗口 以下方法处理浏览器的弹出窗口。 dismiss() :关闭弹出窗口。 ~~~ var alert = driver.switchTo().alert(); alert.dismiss(); ~~~ accept():接受弹出窗口,相当于按下接受OK按钮。 ~~~ var alert = driver.switchTo().alert(); alert.accept(); ~~~ getText():返回弹出窗口的文本值。 ~~~ var alert = driver.switchTo().alert(); alert.getText(); ~~~ sendKeys():向弹出窗口发送文本字符串。 ~~~ var alert = driver.switchTo().alert(); alert.sendKeys("Text to be passed"); ~~~ authenticateUsing():处理HTTP认证。 ~~~ var user = new UserAndPassword("USERNAME", "PASSWORD"); alert.authenticateUsing(user); ~~~ ### 鼠标和键盘的方法 以下方法模拟鼠标和键盘的动作。 * click():鼠标在当前位置点击。 * clickAndHold():按下鼠标不放 * contextClick():右击鼠标 * doubleClick():双击鼠标 * dragAndDrop():鼠标拖放到目标元素 * dragAndDropBy():鼠标拖放到目标坐标 * keyDown():按下某个键 * keyUp():从按下状态释放某个键 * moveByOffset():移动鼠标到另一个坐标位置 * moveToElement():移动鼠标到另一个网页元素 * release():释放拖拉的元素 * sendKeys():控制键盘输出