End-to-End Testing with Protractor

End-to-End (E2E) testing in Angular ensures that the application works as expected from the user's perspective. This guide covers the basics of setting up and writing E2E tests for Angular applications using Protractor.

Setting Up Protractor

Angular CLI comes with Protractor pre-configured. To create a new Angular project with E2E testing setup:

ng new my-app

Writing E2E Tests

Write E2E tests in the e2e/src folder. For example, to test the application's title:

// e2e/src/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 welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Welcome to my-app!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});

Creating Page Objects

Use Page Objects to encapsulate page-specific actions and elements:

// e2e/src/app.po.ts
import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo(): Promise {
    return browser.get(browser.baseUrl) as Promise;
  }

  getTitleText(): Promise {
    return element(by.css('app-root .content span')).getText() as Promise;
  }
}

Running E2E Tests

Run your E2E tests using the Angular CLI:

ng e2e

Configuring Protractor

Configure Protractor by updating the protractor.conf.js file:

// protractor.conf.js
exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

Debugging E2E Tests

Debug your E2E tests in the browser by adding the debugger statement in your test code and running:

ng e2e --dev-server-target=my-app:serve:development

Handling Asynchronous Operations

Use Protractor's built-in support for handling asynchronous operations:

// e2e/src/app.e2e-spec.ts
it('should wait for the async operation', async () => {
  await page.navigateTo();
  const result = await page.performAsyncOperation();
  expect(result).toBe('Expected Result');
});

Key Points

Conclusion

End-to-End testing with Protractor is crucial for ensuring the reliability and usability of your Angular applications. By writing comprehensive E2E tests, using Page Objects, and handling asynchronous operations, you can build robust and user-friendly applications. Happy testing!