How to solve the page navigation problem in e2e testing?

Question

Angular

Good day,
I am writing e2e tests for a project, I have problems with logging in.
Entrance:

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:

test

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

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

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

How to wait for a complete transition?

Answer 1

At the moment I have implemented everything as follows. The e2e directory contains the following directories:
- /+page1 - tests for page 1
- /+page2 - tests for page 2
- /+page3 - tests for page 3
- /shared - for general solutions /shared contains
auth.ts with the following content :

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 contains 2 files: page1.e2e-spec.ts and page1.po.ts (similarly in other "page" directories)

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...', () => {
    // некие тесты
  });
});