Question

我在我的项目中使用e2e测试，但是有一些问题导致我的测试失败。这是我的app.po.ts：

import { browser, by, element } from 'protractor';

export class AppPage {
    public baseUrl: string = browser.baseUrl;

    public navigateTo(url?: string) {
        browser.get(url || '/');
    }

    public getPageTitle() {
        return browser.getTitle();
    }

    public getCurrentUrl() {
        return browser.getCurrentUrl();
    }

    public getText(selector: string) {
        let elementText = element(by.css(selector)).getText();
        return elementText;
    }
}

export class LoginPage extends AppPage {
    setUser(text) {
        let selector = 'input[name=email]';
        let elementRef = element(by.css(selector));
        elementRef.sendKeys(text);
        return elementRef.getAttribute('value');
    }

    getUser() {
        element(by.css('input[name=email]')).getAttribute('value');
    }

    setPassword(text) {
        let selector = 'input[name=password]';
        let elementRef = element(by.css(selector));
        elementRef.sendKeys(text);
        return elementRef.getAttribute('value');
    }

    getPassword() {
        element(by.css('input[name=password]')).getAttribute('value');
    }

    submit() {
        let submitElm = element(by.css('#m_login_signin_submit'));
        submitElm.click();
    }
}

这是我的测试文件：

import { AddNotificationGroup, AppPage, LoginPage } from './app.po';

describe('Admin Panel: Sample flow', () => {

    describe('Device List', () => {
        let page: AppPage;

        beforeEach(() => {
            page = new AppPage();
        });

        it('should display welcome message', async () => {
            page.navigateTo('/snmp-device-list');
            expect(page.getPageTitle()).toEqual('DCMon Dashboard');
        });
    });

    describe('Login', () => {
        let page: LoginPage;
        let baseUrl: string;

        beforeEach(() => {
            page = new LoginPage();
            page.navigateTo('/login');
            baseUrl = page.baseUrl;
        });

        it('check the login page title', async () => {
            expect(page.getPageTitle()).toEqual('DCMon Dashboard | Login');
        });

        it('login with wrong user', async () => {
            let user = 'baduser@test.com';
            let password = '123456';
            expect(page.getText('.m-login__title')).toEqual('Sign In To Admin');
            expect(page.setUser(user)).toEqual(user);
            expect(page.setPassword(password)).toEqual(password);
            page.submit();
            expect(page.getCurrentUrl()).toContain(baseUrl + 'login');
        });

        it('login with correct user', async () => {
            let user = 'test@test.com';
            let password = '123456';
            expect(page.getText('.m-login__title')).toEqual('Sign In To Admin');
            expect(page.setUser(user)).toEqual(user);
            expect(page.setPassword(password)).toEqual(password);
            page.submit();
            expect(page.getCurrentUrl()).toEqual(baseUrl + '');
        });
    });

    describe('Add Modbus Device', async () => {
        let page: AppPage;
        let baseUrl: string;

        beforeEach(() => {
            page = new AppPage();
            page.navigateTo('/add-modbus-device');
            baseUrl = page.baseUrl;
        });

        it('check the login page title', async () => {
            expect(page.getPageTitle()).toEqual('DCMon Dashboard');
        });
    });

    describe('Add Notification-Group', () => {
        let page: AppPage;
        let baseUrl: string;

        beforeEach(() => {
            page = new AppPage();
            page.navigateTo('/notification/groups/add');
            baseUrl = page.baseUrl;
        });

        it('check the page title', async () => {
            expect(page.getPageTitle()).toEqual('DCMon Dashboard');
        });

        it('check the Headers', async () => {
            let text = page.getText('.m-subheader__title');
            expect(text).toEqual('NOTIFICATIONs');
            expect(page.getText('.m-portlet__head-text')).toEqual('Add Group');
        });
    });

});

这是我的路由器配置：

[
{
        path: "",
        component: ThemeComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: "",
                component: DefaultComponent,
                children: [
                    {
                        path: "modbus-devices",
                        component: DeviceListComponent,
                        data: { deviceType: 'modbus' }
                    },
                    {
                        path: "snmp-devices",
                        component: DeviceListComponent,
                        data: { deviceType: 'snmp' }
                    },
                    {
                        path: "add-modbus-device",
                        component: ModbusAddDeviceComponent
                    },
                    {
                        path: "edit-modbus-device/:id",
                        component: ModbusEditDeviceComponent
                    },
                    {
                        path: "add-snmp-device",
                        component: SnmpAddDeviceComponent
                    },
                    {
                        path: "edit-snmp-device/:id",
                        component: SnmpEditDeviceComponent
                    },
                    {
                        path: "notification/groups",
                        component: NotificationGroupListComponent
                    },
                    {
                        path: "notification/setting",
                        component: NotificationPrioritySettingComponent
                    },
                    {
                        path: "notification/groups/add",
                        component: NotificationGroupAddComponent,
                        data: { edit: false }
                    },
                    {
                        path: "notification/groups/edit/:id",
                        component: NotificationGroupAddComponent,
                        data: { edit: true }
                    }
                ]
            }
        ],
    }, {
        path: 'login',
        component: AuthComponent
    },
    {
        path: 'logout',
        component: LogoutComponent
    }
]

更新：

我的身份验证码：

import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs/Rx";

@Injectable()
export class AuthGuard implements CanActivate {

    token: string;

    get authToken() {
        return localStorage.getItem('token');
    }

    constructor(private _router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
        this.token = this.authToken;
        if (this.token) {
            return true;
        }
        if (location.pathname !== '/login') {
            this._router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        }
        return false;

    }
}

测试刚刚在登录页面中传递，在AuthGuard中我检查用户是否登录（localstorage），用户是否可以看到这些页面。登录测试是第一步，用户将登录，之后当用户请求任何页面时，AuthGuard返回true。

在每个测试中，将在浏览器中生成所请求的页面，但测试将失败并返回：

Failed: Timed out waiting for asynchronous Angular tasks to finish after 4 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details:[github][1]

Answer 1

对我有用：在使用Protractor登录（获取输入字段，sendKeys，单击登录按钮）之前，您应该使用browser.get(['/login'])（是的，在量角器代码中）使Protractor实现刚刚发生的重定向通过AuthGuard。令人惊讶的是，Protractor接受登录后发生的重定向，而无需额外的browser.get。

量角器无法检测角度分量渲染页面

1 个答案: