unable to navigate in dashboard after checking credential in e2e testing

Question

I am new to e2e testing. I am writing test cases for angular login page its working in login but i am unable to navigate to homePage after checking login credential I am getting this in console.

1. It will route to home page When username password is correct then go to home page

• Failed: No element found using locator: By(css selector, app-homepage h1)

2. should Login work when login is successful — he should redirect to default home page page

• Failed: No element found using locator: By(css selector, app-homepage h1)

this is my spec file

import { LoginPage } from './login.po';
import { HomePage } from '../HomePgE2E/home.po';

describe('should  Login work', () => {
  let page: LoginPage;
  let homePage:HomePage;
  const wrongCredentias = {
    username: '',
    password: ''
  };

  beforeEach(() => {
    page = new LoginPage();
   homePage= new HomePage();
  });

  it('when user trying to login with wrong credentials he should stay on “login” page', () => {
    page.navigateTo();
    page.fillCredentials(wrongCredentias);
    expect(page.getPageTitleText()).toEqual('Sign in to your account');
    expect(page.getErrorMessage()).toEqual('Email cannot be empty.');
  });

  it('when login is successful — he should redirect to default home page page ', () => {
    page.navigateTo();
    page.fillCredentials();
    homePage.navigateTo();
    expect(homePage.getPageTitleText()).toEqual('welcome');
  });
});

And this welcome text coming from

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

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

   getPageTitleText() {
    return element(by.css('app-homepage h1')).getText();
  } 
}

Answer 1

Below code should work

import { LoginPage } from './login.po';
import { HomePage } from '../HomePgE2E/home.po';

describe('should  Login work', () => {
  let page: LoginPage;
  let homePage:HomePage;
  const wrongCredentias = {
    username: '',
    password: ''
  };

  beforeEach(async async () => {
   page = await new LoginPage();
   homePage=await new HomePage();
  });

  it('when user trying to login with wrong credentials he should stay on “login” page', async () => {
    await page.navigateTo();
    await page.fillCredentials(wrongCredentias);
    expect(page.getPageTitleText()).toEqual('Sign in to your account');
    expect(page.getErrorMessage()).toEqual('Email cannot be empty.');
  });

  it('when login is successful — he should redirect to default home page page ', () => {
    await page.navigateTo();
    await page.fillCredentials();
    await homePage.navigateTo();
    expect(homePage.getPageTitleText()).toEqual('welcome');
  });
});