背景

因为项目需要用到Angular2的端对端测试
所以先用官方网站的Tour of Heroes项目练手

流程

1.在e2e文件夹中的app.e2e-spec.ts文件中输入下面的代码
2.cd到本项目根文件夹
3.在控制台中输入 npm start
3.开启另一个控制台中输入 ng e2e

效果图

代码

import { AngularTourOfHeroesPage } from './app.po';
import { ComponentFixture,TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { browser,element,by } from 'protractor';



describe('Tour of Heroes',function () {

  //测试:当访问网站的时候应该跳转到/dashboard这个路由
  it('should redirect index.html to http://localhost:4200/dashboard',function () {
    browser.get('').then(function (url) {
      expect(browser.getCurrentUrl()).toBe('http://localhost:4200/dashboard');//断言
      browser.sleep(1000);//睡眠1秒，观察效果
    });
  });

  //测试Dashboard页面
  describe('Dashboard Heroes',function(){

    //每个测试用例it开始前执行
    beforeEach(function(){
      browser.get('http://localhost:4200');//浏览器导航到该地址
    });

    //测试：用户点击英雄，跳转显示该英雄的详细信息
    it('should show the details of hero which user clicked',function(){
      var heroes = element.all(by.className('col-1-4'));//获得4个Dashboard英雄元素

      heroes.get(0).click().then(function(){//点击第一个英雄
        expect(element(by.tagName('h2')).getText()).toBe('Narco details!');//断言
      });
    });

    //测试：对用户输入进行异步查询，点击查询结果可跳转到该英雄的详细信息
    it('should search the hero list as user types into the search Box',function(){
      var heroList = element.all(by.className('search-result'));//获得查询到的英雄
      var query = element(by.id('search-Box'));//输入框元素

      query.sendKeys('a');//输入框输入a
      expect(heroList.count()).toBe(8); //断言
      query.clear();//清空输入框

      query.sendKeys('b');//输入框输入b
      expect(heroList.count()).toBe(2);//断言

      heroList.get(0).click().then(function(){//点击查询得到的第一个英雄
        expect(element(by.tagName('h2')).getText()).toBe('Bombasto details!');//断言
      });
    });
  });

  //测试Heroes页面
  describe('Heroes',function(){

    beforeEach(function(){
      browser.get('');
      element(by.linkText('Heroes')).click();
    });

    //测试：列表显示10个英雄
    it('should show 10 heroes',function(){
      var heroes = element.all(by.tagName('li'));
      expect(heroes.count()).toBe(10);
    });

    //测试：点击英雄显示View Details按钮，点击按钮显示该英雄详细信息
    it('should show Detail of Hero which user clicked',function(){
      var heroList = element.all(by.tagName('li'));

      heroList.get(0).click();
      element(by.buttonText('View Details')).click();
      expect(element(by.tagName('h2')).getText()).toBe('Mr. Nice details!');
    });

  });




  //测试Detail页面
  describe('Detail',function () {

    beforeEach(function () {
      browser.get('');
    });

    //测试：修改英雄名字，点击返回到Dashboard页面，显示修改后的名字
    it('Dashboard Page: should show new name of hero after user edited',() => { var heroes = element.all(by.className('col-1-4')); heroes.get(0).click().then(() => { element(by.tagName('input')).clear(); element(by.tagName('input')).sendKeys('HuBa'); browser.sleep(1000);//睡眠1秒，观察效果 element(by.buttonText('Back')).click(); var heroes = element.all(by.tagName('h4')); expect(heroes.get(0).getText()).toBe('Huba');//should be Huba }); }); //测试：修改英雄名字，点击返回到Heroes页面，显示修改后的名字 it('Heroes Page: should show new name of hero after user edited',() => { element(by.linkText('Heroes')).click(); var heroes = element.all(by.tagName('li')); heroes.get(0).click(); element(by.buttonText('View Details')).click(); element(by.tagName('input')).clear(); element(by.tagName('input')).sendKeys('BaBaLa'); browser.sleep(1000);//睡眠1秒，观察效果 element(by.buttonText('Back')).click(); expect(heroes.get(0).getText()).toBe('11 BaBaLa'); }); }); });