单元测试/集成测试前端框架 - Frontend FrameworkWeb 前端开发

Angular 2 E2E测试入门

2017-01-17  本文已影响733人  紫诺_qiu

E2E测试(集成测试)是一种模拟用户行为的测试。(以demo-app首页为例)

E2E测试与单元测试的区别:

环境配置

    npm install -g angular-cli@latest
    npm install -g protractor
    ng serve
    protractor
    ng e2e
    yarn e2e

测试场景

创建e2e测试实例

如果只有一个单一的功能,我们可以直接在app.e2e-spec.ts文件中添加。如果需要测试多个功能或者是更复杂的场景,我们可以在e2e文件夹中新建文件夹,并在对应的文件夹中创建其测试文件。需要注意的是每个测试文件都必须以.e2e-spec.ts结尾,这样Protractor测试工具才可以加载到。

import { browser, element, by } from 'protractor'; //每个测试文件都要引入一个browswe全局变量

describe('Demo App', function () {
   beforeEach(() => {
    browser.get('/');  //导航到首页
  });
});
    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()统计元素个数
  });
    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('登录成功!');

  });

参考资料

上一篇 下一篇

猜你喜欢

热点阅读