E2E測試（集成測試）是一種模擬用戶行為的測試颖杏。（以demo-app首頁為例）
E2E測試與單元測試的區(qū)別：
- 單元測試是測試代碼的自身行為潘飘。在用戶看來好像什么也沒有做拇涤，但可以確保其方法能達(dá)到期望的目的杏慰。
- E2E測試是一種模擬用戶行為的測試析命。使用e2e的JavaScript API代替我們?cè)跒g覽器上做的手工操作，并且我們可以看到這個(gè)過程逃默。
環(huán)境配置
- 使用Angular-cli進(jìn)行開發(fā)鹃愤，安裝命令
npm install -g angular-cli@latest
- Angular2 端到端測試使用protractor工具來運(yùn)行，安裝命令
npm install -g protractor
- 項(xiàng)目啟動(dòng)（運(yùn)行e2e測試前必須啟動(dòng)項(xiàng)目）
ng serve
- 運(yùn)行測試
protractor
ng e2e
yarn e2e
測試場景
- 應(yīng)用初始化后完域，列表項(xiàng)中一共13條數(shù)據(jù)软吐。
- 應(yīng)用初始化后，會(huì)顯示demo-module標(biāo)題吟税。
- 點(diǎn)擊列表項(xiàng)中的任意一項(xiàng)凹耙，頁面可跳轉(zhuǎn)到對(duì)應(yīng)頁面。
- 輸入用戶名肠仪、密碼肖抱，點(diǎn)擊登錄，返回登錄狀態(tài)异旧。
創(chuàng)建e2e測試實(shí)例
如果只有一個(gè)單一的功能意述，我們可以直接在app.e2e-spec.ts文件中添加。如果需要測試多個(gè)功能或者是更復(fù)雜的場景，我們可以在e2e文件夾中新建文件夾荤崇，并在對(duì)應(yīng)的文件夾中創(chuàng)建其測試文件拌屏。需要注意的是每個(gè)測試文件都必須以.e2e-spec.ts結(jié)尾，這樣Protractor測試工具才可以加載到术荤。
import { browser, element, by } from 'protractor'; //每個(gè)測試文件都要引入一個(gè)browswe全局變量
describe('Demo App', function () {
beforeEach(() => {
browser.get('/'); //導(dǎo)航到首頁
});
});
- 測試初始化時(shí)加載13條數(shù)據(jù)
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')); //選擇多個(gè)元素
const expectCount = 13;
expect(items.count()).toBe(expectCount); // items.count()統(tǒng)計(jì)元素個(gè)數(shù)
});
- 測試應(yīng)用初始化后倚喂，會(huì)顯示demo-module標(biāo)題。
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');
});
- 測試點(diǎn)擊列表項(xiàng)中的任意一項(xiàng)瓣戚，頁面可跳轉(zhuǎn)到對(duì)應(yīng)頁面端圈。
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(); //點(diǎn)擊元素
const outText = element(by.css('app-root sino-text-content')).getText();
expect(outText).toContain('關(guān)于做好保密自查自評(píng)工作的通知');
});
- 測試登錄功能
it('should show message of login', () => {
browser.get('/#/login'); //使用deepLink配置路徑之后，可直接導(dǎo)航到對(duì)應(yīng)頁面
const loginContent = element(by.css('sino-login'));
const loginContentEl = loginContent.getText();
expect(loginContentEl).toContain('登錄頁面');
const userName = element(by.css('.userName')).sendKeys('王佳禾'); //傳遞對(duì)應(yīng)參數(shù)的值
const password = element(by.css('.password')).sendKeys('1');
const button = element(by.css('sino-login button'));
button.click(); //點(diǎn)擊事件
const toast = element(by.css('.toast-message'));
const toastEl = toast.getText();
expect(browser.ExpectedConditions).toBe('登錄成功!');
});
