Angular Protractor e2e testing: waiting browser.md

Angular Protractor e2e testing: Make the browser waiting

Files

• app.e2e-spec.ts
• app.po.ts

Code example

app.e2e-spec.ts

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

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

  it('should display message saying Ristorante Con Fusion', () => {
    page.navigateTo('/');
    expect(page.getTitleText('app-root h1')).toEqual('Ristorante Con Fusion');
  });

  it('should navigate to about us page by clicking on the link', () => {
    page.navigateTo();
    page.getAllElements('a')
      .then(links => {
        links[3].click();

        expect(page.getTitleText('h3')).toEqual('About Us');
      })
      .catch(console.error);
  });

  it('should enter a new comment for the first dish', () => {
    page.navigateTo('/dishdetail/0');

    const newAuthor = page.getElement('input[formControlName="author"]');
    newAuthor.sendKeys('Test Author');

    const newComment = page.getElement('textarea[formControlName="comment"]');
    newComment.sendKeys('Test Comment');

    const newSubmitBtn = page.getElement('button[type="submit"]');
    browser.sleep(2000);

    newSubmitBtn.click();
    browser.sleep(3000);
  });
});

app.po.ts

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

export class AppPage {
  private link = browser.baseUrl;
  private selector = 'app-root .content span';

  navigateTo(link: string = this.link): Promise<unknown> {
    return browser.get(link) as Promise<unknown>;
  }

  getTitleText(selector: string = this.selector): Promise<string> {
    return element(by.css(selector)).getText() as Promise<string>;
  }

  getElement(selector: string) {
    return element(by.css(selector)).getWebElement();
  }

  getAllElements(selector: string) {
    return element.all(by.css(selector)).getWebElements() as Promise<WebElement[]>;
  }
}