Как решить проблему перехода по страницам при e2e-тестировании?

Question

[Ivan Stroykin]

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

Пишу e2e-тесты для проекта, появились проблемы связанные со входом в систему.
Вход:

auth

browser.get('/login');
element(by.css('input[formControlName=email]')).sendKeys('blablabla');
element(by.css('input[formControlName=password]')).sendKeys('blablabla');
element(by.id('login')).click();

Тест:

test

describe('Project Test', () => {
  let page: TestPage;
  let auth: Auth();

  beforeEach(() => {
    page = new TestPage();
    auth = new Auth();
  });

  if('should test', () => {
    auth.login();
    // далее идет переход на страницу и клик по элементу который видимо еще не существует и тест падает
  });
});

Как дождаться полного перехода?

Comments

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

https://stackoverflow.com/questions/32854344/wait-...

[Ivan Stroykin]

Алексей Зуев, что-то не в какую ) и первый вариант попробовал, и второй.
Вот так вот второй вариант расписал:

browser.driver.manage().window().maximize();
browser.get('/login');
element(by.css('input[formControlName=email]')).sendKeys('blablabla');
element(by.css('input[formControlName=password]')).sendKeys('blablabla');
const loginButton = element(by.id('login'));
loginButton.click();
const el = element(by.id('test-link'));
browser.wait(
    protractor.until.elementIsVisible(el), 3000, 'Error: Element did not display within 3 seconds'
);

Получаю ошибку:

Failed: No element found using locator: By(css selector, *[id="test-link"])

[Ivan Stroykin]

Алексей Зуев, если после loginButton.click(); написать:

browser.sleep(1000);
browser.pause();

То пройдет вход в систему и появится страница на которой есть этот элемент. А это менее чем через 1 сек., а я даю целых 3 сек. Не понимаю в чем проблема :(

[Ivan Stroykin]

Алексей Зуев, после клика на кнопку "Войти" написал:

const EC = protractor.ExpectedConditions;
const el = element(by.id('test')); // кнопка с id="test"
browser.wait(EC.presenceOf(el), 10000)
  .then(() => {
    console.log('YES');
    el.click();
  }, (error) => {
    console.log('NO');
  });

Пишет: "YES" и падает с ошибкой:

Failed: unknown error: failed to change window state to maximized, current state is normal

Ниже ошибка:

Не удалось: время ожидания ожидания асинхронных угловых задач заканчивается через 11 секунд. Это может быть связано с тем, что текущая страница не является угловым приложением.

То есть он написал "Yes" - нашел эту кнопку, но почему-то не смог нажать, не понятно...

[Ivan Stroykin]

Алексей Зуев, вынес вход в систему:

it('Login', () => {
  page.getNavigate();
  page.fillFields();
  page.clickButtonLogin();
});

далее прописал:

it('Test', () => {
  browser.sleep(2000);
  browser.get('/test').then(() => {
    browser.pause();
  });
});

Страница корректно перезагружается. Смотрю через инспектор элементов, кнопка с нужным мне id есть. Но если пишу:

browser.sleep(3000);
element(by.id('test')).click();

Падает с ошибкой:

Не удалось: время ожидания ожидания асинхронных угловых задач заканчивается через 11 секунд. Это может быть связано с тем, что текущая страница не является угловым приложением.

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

Иван Стройкин, The same as https://github.com/angular/protractor/issues/4290 and https://stackoverflow.com/questions/40817733/protr...

[Ivan Stroykin]

Алексей Зуев, ничего не помогает, беда )
У меня сейчас e2e тесты написаны на python, с обычными sleep(n-time) и всё работает. А тут, по сути, должно быть всё намного легче и по той же технологии, но не работает...)

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

Иван Стройкин, у меня для тестов люди выбрали старый добрый selenium.

[Ivan Stroykin]

Алексей Зуев, Посмотрите пожалуйста на ответ, который я написал ниже как решение. Может на Ваш взгляд что-то лучше изменить?

[Ivan Stroykin]

Алексей Зуев, у меня тоже тестировщики пишут на python используя selenium. Вот сейчас задумался, а есть ли плюсы в переходе на фреймворк Jasmin для e2e-тестов. кроме как единого языка ))

Answer 1

[Ivan Stroykin]

На данный момент реализовал всё следующим образом. В директории e2e есть директории:
- /+page1 - тесты на страницу 1
- /+page2 - тесты на страницу 2
- /+page3 - тесты на страницу 3
- /shared - для общих решений

В /shared находится auth.ts со следующим содержимом:

auth.ts

const DEFAULT_LINK: string = '/';
const EMAIL: string = 'blablabla';
const PASSWORD: string = 'blablabla';

export class Auth {
  constructor() {
    browser.driver.manage().window().maximize();
    browser.get(DEFAULT_LINK);
    this.login();
  }

  login() {
    browser.sleep(1000);

    const email = element(by.css('input[formControlName=email]'));
    const pass = element(by.css('input[formControlName=password]'));
    const button = element(by.id('login'));

    email.sendKeys(EMAIL);
    pass.sendKeys(PASSWORD);
    button.click();

    browser.ignoreSynchronization = true;
    browser.sleep(1000);
  }

  logout() {
    browser.sleep(1000);

    const buttonLogin = element(by.xpath('путь до кнопки выхода'));
    const buttonConfirm = element(by.xpath('путь до кнопки подтверждения выхода'));

    buttonLogout.click();
    buttonConfirm.click();

    browser.ignoreSynchronization = true;
    browser.sleep(1000);
  }
}

В /+page1 содержится 2 файла: page1.e2e-spec.ts и page1.po.ts (аналогично и в других "page" директориях)

page1.e2e-spec.ts

// imports

describe('Page test1', () => {
  let auth: Auth;
  let page: Page1;

  beforeEach(() => {
    auth = new Auth();
    page = new Page1();
  });

  afterEach(() => {
    auth.logout(); // Проверяем каждую страницу отдельно, поэтому после завершения теста страницы - разлогиниваемся
  });

  it('Test 1...', () => {
    // некие тесты
  });
});