E2E测试（集成测试）是一种模拟用户行为的测试。（以demo-app首页为例）
E2E测试与单元测试的区别：
- 单元测试是测试代码的自身行为。在用户看来好像什么也没有做，但可以确保其方法能达到期望的目的。
- E2E测试是一种模拟用户行为的测试。使用e2e的JavaScript API代替我们在浏览器上做的手工操作，并且我们可以看到这个过程。
环境配置
- 使用Angular-cli进行开发，安装命令
npm install -g angular-cli@latest
- Angular2 端到端测试使用protractor工具来运行，安装命令
npm install -g protractor
- 项目启动（运行e2e测试前必须启动项目）
ng serve
- 运行测试
protractor
ng e2e
yarn e2e
测试场景
- 应用初始化后，列表项中一共13条数据。
- 应用初始化后，会显示demo-module标题。
- 点击列表项中的任意一项，页面可跳转到对应页面。
- 输入用户名、密码，点击登录，返回登录状态。
创建e2e测试实例
如果只有一个单一的功能，我们可以直接在app.e2e-spec.ts文件中添加。如果需要测试多个功能或者是更复杂的场景，我们可以在e2e文件夹中新建文件夹，并在对应的文件夹中创建其测试文件。需要注意的是每个测试文件都必须以.e2e-spec.ts结尾，这样Protractor测试工具才可以加载到。
import { browser, element, by } from 'protractor'; //每个测试文件都要引入一个browswe全局变量
describe('Demo App', function () {
beforeEach(() => {
browser.get('/'); //导航到首页
});
});
- 测试初始化时加载13条数据
it('should show thirteen items when we first load the demo app', () => {
browser.get('/');
const items = element.all(by.css('app-root ion-content button')); //选择多个元素
const expectCount = 13;
expect(items.count()).toBe(expectCount); // items.count()统计元素个数
});
- 测试应用初始化后，会显示demo-module标题。
it('should display message title demo-module', () => {
browser.get('/');
const title = element(by.css('app-root ion-title'));
const titleText = title.getText(); //抓取元素文本
expect(titleText).toEqual('demo-module');
});
- 测试点击列表项中的任意一项，页面可跳转到对应页面。
it('should display fifthItem details message', () => {
browser.get('/');
const itemNumber = 4;
const fifthItem = element.all(by.css('app-root ion-content button')).get(itemNumber);
fifthItem.click(); //点击元素
const outText = element(by.css('app-root sino-text-content')).getText();
expect(outText).toContain('关于做好保密自查自评工作的通知');
});
- 测试登录功能
it('should show message of login', () => {
browser.get('/#/login'); //使用deepLink配置路径之后，可直接导航到对应页面
const loginContent = element(by.css('sino-login'));
const loginContentEl = loginContent.getText();
expect(loginContentEl).toContain('登录页面');
const userName = element(by.css('.userName')).sendKeys('王佳禾'); //传递对应参数的值
const password = element(by.css('.password')).sendKeys('1');
const button = element(by.css('sino-login button'));
button.click(); //点击事件
const toast = element(by.css('.toast-message'));
const toastEl = toast.getText();
expect(browser.ExpectedConditions).toBe('登录成功!');
});
