TÀI LIỆU HAY - CHIA SẺ KHÓA HỌC MIỄN PHÍ

Angular automation with Protractor + Typescript + Cucumber

Angular is a popular front-end web application framework widely used for building dynamic web pages and mobile applications. With the growing demand for automation testing, Protractor has gained popularity as a widely used testing tool for Angular projects. Protractor is an end-to-end testing framework built on top of WebDriverJS that simulates user interactions with web pages and helps test the functionality of Angular applications.
Typescript is a superset of JavaScript that allows developers to write more maintainable and scalable code. With its static typing and class-based object-oriented programming features, it has become popular among developers building applications with Angular.
Cucumber is an open-source BDD (Behavior-Driven Development) testing framework that enables collaboration between developers, testers, and business stakeholders by defining tests in a human-readable format.

Combining Protractor, Typescript, and Cucumber can further enhance the testing process for Angular applications by providing a robust framework for automation testing that is easy to maintain and scalable.

Setting up the environment
To start with automation testing with Protractor, Typescript, and Cucumber, the following prerequisites are required:

1. Node.js and NPM - to install and manage packages required for automation testing
2. Visual Studio Code - a lightweight code editor that supports Typescript
3. Protractor and Cucumber - installed globally on your machine

Once the prerequisites are in place, create a new Angular project with the following commands:

1. ng new angular-project
2. cd angular-project
3. ng serve

Create a folder named "e2e" in the root of the project directory and run the following command to generate the Protractor configuration file:

1. ng e2e --port 4201

The Protractor configuration file will be generated at "e2e/protractor.conf.js".

Writing the test scenario
To write the test scenario, create a new Typescript file named "angular-spec.ts" in the "e2e/src" folder. In this file, define the test steps using Cucumber syntax.

For example, to test the login functionality of an Angular application, the following code can be used:

```
import { Given, When, Then } from "cucumber";
import { browser } from "protractor";

Given('I am on the login page', async () => {
await browser.get('http://localhost:4200/login');
});

When('I enter {string} and {string}', async (username: string, password: string) => {
const usernameInput = element(by.name('username'));
const passwordInput = element(by.name('password'));
await usernameInput.sendKeys(username);
await passwordInput.sendKeys(password);
});

Then('I should be logged in', async () => {
const loginButton = element(by.css('button[type="submit"]'));
await loginButton.click();
});
```

Here, the test scenario defines three steps - navigating to the login page, entering the username and password, and clicking on the login button. The code uses Protractor to locate elements on the page and simulate user interactions.

Running the test scenario
To run the test scenario, first start the Angular application with the following command:

1. ng serve

Then, in a new terminal window, run the following command to execute the tests:

1. ng e2e --port 4201

This will run the tests using the Protractor configuration file generated earlier.

Conclusion
Angular automation with Protractor + Typescript + Cucumber provides a robust framework for automation testing of Angular applications. The combination of Protractor's end-to-end testing capabilities, Typescript's maintainability and scalability, and Cucumber's BDD syntax provides a powerful testing solution that enables collaboration between developers, testers, and business stakeholders. By following the steps outlined in this article, you can quickly set up and run automated tests for your Angular applications.