- Selenium
- Protractor
- E2E Testing for Angular
- Testing Syncfusion Angular Component using Protractor
- See also
Contact Support
Getting Started for Selenium E2E Testing using Protractor in Angular
19 Oct 20235 minutes to read
This documents explains the selenium E2E testing for Angular web applications using Protractor
.
NOTE
Starting from Angular version 12, the Angular CLI no longer includes Protractor by default and has plans to remove Protractor support in the future. As a result, Protractor reached its end-of-life in August 2023. For more information, refer to this article.
Selenium
Selenium is the most preferred framework for End-to-End (E2E) testing of the web applications. But users cannot utilize Selenium directly for the dynamic web applications such as Angular.
Normally, HTML elements are located using CSS selectors such as ID, Class, attributes, and values in Selenium. However, when working with Angular applications, due to synchronization issues, you cannot identify Angular-specific attributes like ng-model, ng-class, ng-bind, and ng-options using regular CSS selectors.
Protractor
is specifically developed to overcome the above problem in Selenium E2E testing for Angular web applications.
Protractor
Protractor is a wrapper around WebDriverJS, which is the JavaScript binding for the WebDriver API. It is an End-to-End (E2E) testing framework specifically developed to automate Angular web applications using new locator strategies.
For more information about the list of Protractor API, refer to this documentation.
E2E Testing for Angular
Using Protractor, users can test the web application either using in-build ChromeDriver
of Chrome browser or Selenium Standalone server
.
Protractor with ChromeDriver
To setup the Protractor with ChromeDriver, set the directConnect
property to true in the e2e/protractor.conf.js
configuration file as shown below.
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 } }));
}
};
The Angular web application created using Angular CLI prior to v12 will automatically include the configuration and setup for the built-in ChromeDriver Protractor E2E testing, along with a sample test case.
Protractor with Standalone Selenium Server
To set up Protractor with a Selenium Standalone server, follow these steps:
- Open the Protractor configuration
e2e/protractor.conf.js
file. - Set the
directConnect
property to false. - Set the
seleniumAddress
property tohttp://localhost:4444/wd/hub
. - Ensure that the Selenium server is up and running before executing the test cases. The Protractor configuration for Selenium standalone as shown in the following code block.
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: false,
baseUrl: 'http://localhost:4200/',
seleniumAddress: 'http://localhost:4444/wd/hub',
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 } }));
}
};
To install/update and start the Selenium server, run the following commands before running the test cases and maintain the server in active state until the testing is finished.
webdriver-manager update
webdriver-manager start
Testing Syncfusion Angular Component using Protractor
The Syncfusion Angular Components are accessed using Protractor locators like ID, CSS, name, and more. The following code samples explain how to use the Angular button component in Protractor testing.
1.To install the Angular Button component, refer to the Getting Started documentation.
2.Set the ID to the Button component in the ./src/app/app.component.ts
file as follows.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render Button. -->
<button id="my_button" ejs-button>Button</button>`
})
export class AppComponent { }
2.Get the EJ2 Angular Button component using the Protractor locator in the ./e2e/src/app.po.ts
file as follows.
element(by.id('my_button')).getText()
3.To check the actual and expected value, use the expect
method in the ./e2e/src/app.e2e-spec.ts
file as follows.
import { AppPage } from './app.po';
it('should display welcome message', () => {
page.navigateTo();
// console.log(page.getTitleText());
expect(page.getTitleText()).toEqual('BUTTON');
});
4.To start the test cases, run the following command.
ng e2e