The Angular CLI also provides end-to-end testing for applications out of the box and uses Protractor to do so. e2e testing is used to test the application by running the application in a browser and testing whether everything works as expected end-to-end. Protractor uses Selenium behind the scenes to run the application and does testing by using JavaScript.
Let's run the e2e test case for the application using the Angular CLI command:
> ng e2e
This should open the browser and navigate to the home page. It should fail:
**************************************************
* Failures *
************************************************
1) workspace-project App should display welcome message
- Failed: No element found using locator: By(css selector, app-root h1)
Executed 1 of 1 spec (1 FAILED) in 2 secs.
[23:35:36] I/launcher - 0 instance(s) of WebDriver still running
[23:35:36] I/launcher - chrome #01 failed 1 test(s)
[23:35:36] I/launcher - overall: 1 failed spec(s)
[23:35:36] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined
The test cases are found in the e2e folder. Currently, there is only one spec file, app.e2e-spec.ts, which has one test in it:
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Welcome to ngx-behance!');
});
page is the object that was created using AppPage using the app.po.ts file. Po stands for page objects here. Let's update the getTitleText function in the app.po.ts file to get the new text on the home page:
export class AppPage {
...
getTitleText() {
return element(by.css('app-root .navbar-brand')).getText();
}
}
Then, we need to update the test case:
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Angular Behance');
});
We need to be aware that the e2e test cases are being run in an actual environment. There might be delays when the click event occurs and we may have to wait for an element to become visible. Let's add some helper functions to our e2e application using Protractor.
Let's create a new file, action.ts, in a new folder called shared in the e2e/src folder. In this file, we are asking the browser to wait for a period of time so that the content on the view is rendered, and then perform the tests:
import {
browser,
ElementFinder,
ExpectedConditions as waitFor,
ExpectedConditions,
ElementArrayFinder,
} from 'protractor';
export function click(locator: ElementFinder, title: string, errorString?: string, timeout: number = 1000) {
console.log(`Clicking ${title}`);
browser.wait(ExpectedConditions.presenceOf(locator));
browser.wait(
waitFor.elementToBeClickable(locator),
timeout,
errorString || `timed out waiting for ${title} to be clickable`);
locator.click();
}
export function count(locator: ElementArrayFinder, title: string) {
console.log(`Counting ${title}`);
return locator.count();
}
export function wait(locator: ElementFinder, title = '', time = 10000) {
browser.wait(waitFor.visibilityOf(locator), time, `timed out waiting to
select ${title}`);
}
Let's use the count method to assert that more than one card is being displayed. To do that, let's create a page object to get the count of cards in app.po.ts:
export class AppPage {
...
getCards() {
return element.all(by.css('.card'));
}
}
Now, we will add a new expectation to our test so that we can check whether there's more than one card.
The following test case navigates to the page, checks whether the page title is as expected, and also verifies whether there's more than one card on the page. Simple, right?
it('should display welcome message and cards', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Angular Behance');
expect(count(page.getCards(), 'behance
cards')).toBeGreaterThanOrEqual(1)
});
In our next test case, let's test that, when the user clicks on a card, they will be taken to the details page. To do this, we need to create a couple of page objects; first to get the first card item and, second to get the heading of the details page:
export class AppPage {
...
getFirstCardTitle() {
return element.all(by.css('.card-text')).first();
}
getBehancveDetailsPageHeading() {
return element(by.css('.media-body h1'));
}
}
Now, let's use these page objects in our new test case to test its functionality:
it('clicking on a card should show details', () => {
page.navigateTo();
const title = page.getFirstCardTitle().getText();
click(page.getFirstCardTitle(), 'first card');
const heading = page.getBehancveDetailsPageHeading();
wait(heading, 'Behance details page header');
expect(heading.getText()).toBe(title);
});
With this, we've learned how e2e tests help us. e2e tests are heavily emphasized since they help in automating the process, and in some cases remove the requirement for manual testing.