Как решить проблемы с e2e тестированием большого проекта на Angular (4)?

Question

[Ivan Stroykin]

Доброго времени суток,

есть довольно крупный проект, который написан на Angular (4). Сейчас появилась задача покрыть весь проект e2e и unit тестами. Решил начать с e2e. Посмотрел все нужные зависимости и настройки, поставив рядом свежую версию через Angular Cli. Прописал простой тест, несерьезный, просто проверив работоспособность, но в итоге даже он не работает.
В директории /e2e есть 2 файла:

app.po.ts

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

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return 'Welcome to app!';
  }
}

app.e2e-spec.ts

import { AppPage } from './app.po';

describe('Project App', () => {
  let page: AppPage;

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

  it('should display welcome message', () => {
    page.navigateTo();
    console.log('======================');
    console.log(page.getParagraphText());
    expect(page.getParagraphText()).toEqual('Welcome to app!');
  });
});

По сути, такой скрипт должен закончиться успехом. Но что-то идет не так. Запускаю ng e2e, проходит сборка проекта (ng serve), проходят начальные настройки, выходит сообщение: "Jasmine started". После этого открывается браузер (тестовый Google Chrome) и начинается загрузка приложения (preloader). Выводится console.log() из файла app.e2e-spec.ts и всё падает со следующими ошибками:

E/protractor - Could not find Angular on page localhost:49152 : retries looking for angular exceeded

Project App
✗ should display welcome message
- Failed: Angular could not be found on the page localhost:49152 If this is not an Angular application, you may need to turn off waiting for Angular.

Может кто сталкивался с таким?

Comments

[Алексей Зуев]

https://github.com/angular/angular-cli/issues/4042...

[Ivan Stroykin]

Алексей Зуев, не совсем понял. сделал как написано, выдает просто:
[3] e2e" exited with code 2
--> Sending SIGTERM to other processes..
[2] n exited with code 127
[1] dist/" exited with code 2
[0] lite-serve exited with code 127

[Алексей Зуев]

ng e2e или npm run e2e запускаете? у меня работает ваш тест. Может у вас версии angular-cli
глобальной и локальной не совпадают

[Алексей Зуев]

Project App
√ should display welcome message

Executed 1 of 1 spec SUCCESS in 3 secs.
[14:23:29] I/launcher - 0 instance(s) of WebDriver still running
[14:23:29] I/launcher - chrome #01 passed

[Ivan Stroykin]

Алексей Зуев, запускал:

ng build --no-progress && concurrently \"lite-server dist/\" \"ng e2e\" --kill-others --success first

а версии совпадают:

@angular/cli: 1.4.4
node: 7.10.1
os: linux x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/compiler-cli: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/platform-server: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/language-service: 4.4.4
typescript: 2.4.1

У меня две мысли. Первая, app.component выступает у меня как router-outlet для всех разделов, из-за этого могут быть проблемы? и вторая, когда просто запускаю ng e2e, идет сборка с поднятием сервера и начинает грузиться приложение, во время инициализации которого должен пройти запрос на backend, может из-за этого валиться? так как все запросы по определенному url разруливает nginx, а тут сервер поднимается на localhost на n-порту

[Алексей Зуев]

ng e2e должно работать.

поставив рядом свежую версию через Angular Cli

попробуйте на чистом проекте сначала

[Алексей Зуев]

Пробуйте еще browser.pause(); чтобы не закрывать браузер https://stackoverflow.com/questions/23373148/angul...

[Ivan Stroykin]

Алексей Зуев, на чистом проекте работает (просто ng e2e):

Jasmine started

project App
✓ should display welcome message

Executed 1 of 1 spec SUCCESS in 0.733 sec.
[15:47:57] I/launcher - 0 instance(s) of WebDriver still running
[15:47:57] I/launcher - chrome #01 passed

[Ivan Stroykin]

Алексей Зуев, попробовал добавить browser.pause(); но все равно закрывается после того как тест валится с ошибкой. Уже по максимум упростил:

describe('Project App', () => {
    it('should display welcome message', () => {
        browser.get('/');
        browser.pause();
        expect('test').toEqual('test');
    });
});

Всё равно валиться с ошибкой:

E/protractor - Could not find Angular on page localhost:49152 : retries looking for angular exceeded

[Ivan Stroykin]

Алексей Зуев, Может быть реально падает из-за того, что запрос на back при инициализации приложения отдает 500-ку? Тут даже не могу панель network вызвать, какой-то Google Chrome Test запускается и если пытаюсь вызвать network тест сразу падает

[Ivan Stroykin]

Алексей Зуев, Действительно, дело в запросе на backend )
Создал прокси конфиг:

{
    "/api": {
        "target": "http://127.0.0.1:8000",
        "secure": false
    }
}

Прописал в package.json в скриптах: "e2e": "ng e2e --proxy-config proxy.conf.json"
И получил долгожданное:

Project App
✓ should display welcome message

Executed 1 of 1 spec SUCCESS in 6 secs.

Спасибо большое. Навели на путь. Теперь нужно разобраться как правильно тесты писать) Кстати, не знаете примеров для создания правильной структуры для e2e тестирования?

Answer 1

[Ivan Stroykin]

Проблема в итоге у меня была следующая: фронт общается с бэком через nginx и при инициализации приложения у меня идет запрос на бэк. Естественно, при запуске тестов поднимался сервер на localhost:n-порт который не мог общаться с бэком. В результате запроса при инициализации прилетала 500-ка и тест валился.

Если у кого такая же проблема из-за бэка, когда всё разруливает nginx, то для тестов нужно прописать прокси. Вкратце, рядом с package.json создаем файл "proxy.conf.json", пишем туда:

{
    "/api": {
        "target": "http://НужныйАдрес:НужныйПротокол",
        "secure": false
    }
}

И в package.json прописываете для удобства: "e2e": "ng e2e --proxy-config proxy.conf.json" и запускаете: npm run e2e
Если хотите узнать больше про прокси, вот ссылка