Imitate network glitches

Question

Imitate network glitches

We have been utilizing the protractor tool for end-to-end testing for quite some time.

Currently, we are exploring various corner cases that involve modifying the responses from API endpoint requests. To achieve this, we are utilizing protractor-http-mock, which offers a convenient method to replace HTTP responses with predefined mocks.

However, what if we need to test a scenario where a sudden loss of connection occurs? What options do we have in such a situation?

In essence, we aim to create a situation where requests to specific endpoints result in a network connection error, allowing us to observe how our application responds.

I am open to suggestions, and I am currently considering the following strategies:

Exploring third-party Node.js libraries similar to protractor-http-mock
Mocking the $http AngularJS service
Utilizing a proxy and finding a way to control it during tests (considering grunt-connect-proxy, which seems mature, but unsure about dynamically changing its behavior per test)
Managing it at a browser level - for example, using the Network Throttling feature in Google Chrome (though, it seems Selenium may not have control over this, see Network throttling with Chrome and Selenium) (considering a browser add-on/extension)

javascript angularjs testing selenium protractor

Answer 1

Answer №1

It appears that the Comcast tool is well-equipped to fulfill the majority of your functional needs:

Comcast is designed to mimic typical network issues such as latency, bandwidth restrictions, and dropped/reordered/corrupted packets.

The tool operates by utilizing system tools in a portable manner. For BSD-based systems like OSX, it incorporates tools like ipfw and pfctl for inducing failures. On Linux, iptables and tc are employed. Comcast essentially acts as a simplified interface for these controls.

https://github.com/tylertreat/Comcast

Here's an example of its usage on Linux:

comcast --device=eth0 --latency=250 --target-bw=1000 --default-bw=1000000 --packet-loss=10% --target-addr=8.8.8.8,10.0.0.0/24 --target-proto=tcp,udp,icmp --target-port=80,22,1000:2000

You have the flexibility to adjust the settings in real-time and increase packet loss up to 100% as necessary.

Answer 2

It appears that the Comcast tool is well-equipped to fulfill the majority of your functional needs:

Comcast is designed to mimic typical network issues such as latency, bandwidth restrictions, and dropped/reordered/corrupted packets.

The tool operates by utilizing system tools in a portable manner. For BSD-based systems like OSX, it incorporates tools like ipfw and pfctl for inducing failures. On Linux, iptables and tc are employed. Comcast essentially acts as a simplified interface for these controls.

https://github.com/tylertreat/Comcast

Here's an example of its usage on Linux:

comcast --device=eth0 --latency=250 --target-bw=1000 --default-bw=1000000 --packet-loss=10% --target-addr=8.8.8.8,10.0.0.0/24 --target-proto=tcp,udp,icmp --target-port=80,22,1000:2000

You have the flexibility to adjust the settings in real-time and increase packet loss up to 100% as necessary.

Answer 3

Answer №2

If you're looking for guidance on implementing mocks, I hope this can point you in the right direction.

While the project provides a general overview, there may be some semantic and translation issues in the readme.md file, which I plan to address soon. Please bear with me as I work on this. If you notice any errors in my English or spelling, please feel free to let me know.

I recently worked on a demonstration project showcasing how to integrate Protractor + CucumberJS + sugar-step. The project currently features a basic Angular app and three E2E tests.

Although the demo is functional, it is still unfinished and requires additional features that I believe would enhance E2E Testing.

The first test compares a service against a default service (mock for Dev environment)
The second test verifies that the service request returns an error with a status code of 404
The third test confirms that the service request returns an error with a status code of 500

How can different mock responses be set for each scenario?

One approach is to utilize Cucumber's Around feature, which can inject a
```
angular.module('mock-Service-response-x',fn...)
```
before any feature or scenario, removing it once the feature or scenario has run

What can be tested using this method?

A wide range of scenarios, including responses with significant delays, any status code responses, and specialized data for testing unique scenarios that would be challenging to simulate using a traditional backend service

Why opt for AngularJS for UI-Mocks instead of a proxy?

UI Control (based on specific needs), with Angular enabling actions like disabling ngAnimations or jQuery animations entirely, and simulating local browser time with Date to replicate date-dependent behaviors automatically.
Cost (depending on the project), as setting up a local proxy for all web services on every development environment can be resource-intensive (in terms of hardware, effort, or implementation time).
Dependency, where parallel working by development teams may lead to interdependence, allowing the UI team to create simple mocks based on known implementation specifics of required web services, facilitating progress even if other layers are delayed in their respective feature development

These considerations vary based on the project at hand and do not signify the definitive solution, but personally, I advocate for maintaining independent layers within a project to facilitate timely feature releases in any one layer, regardless of delays in others.

To all readers, I welcome any comments, corrections, or suggestions you may have.

Answer 4

If you're looking for guidance on implementing mocks, I hope this can point you in the right direction.

While the project provides a general overview, there may be some semantic and translation issues in the readme.md file, which I plan to address soon. Please bear with me as I work on this. If you notice any errors in my English or spelling, please feel free to let me know.

I recently worked on a demonstration project showcasing how to integrate Protractor + CucumberJS + sugar-step. The project currently features a basic Angular app and three E2E tests.

Although the demo is functional, it is still unfinished and requires additional features that I believe would enhance E2E Testing.

The first test compares a service against a default service (mock for Dev environment)
The second test verifies that the service request returns an error with a status code of 404
The third test confirms that the service request returns an error with a status code of 500

How can different mock responses be set for each scenario?

One approach is to utilize Cucumber's Around feature, which can inject a
```
angular.module('mock-Service-response-x',fn...)
```
before any feature or scenario, removing it once the feature or scenario has run

What can be tested using this method?

A wide range of scenarios, including responses with significant delays, any status code responses, and specialized data for testing unique scenarios that would be challenging to simulate using a traditional backend service

Why opt for AngularJS for UI-Mocks instead of a proxy?

UI Control (based on specific needs), with Angular enabling actions like disabling ngAnimations or jQuery animations entirely, and simulating local browser time with Date to replicate date-dependent behaviors automatically.
Cost (depending on the project), as setting up a local proxy for all web services on every development environment can be resource-intensive (in terms of hardware, effort, or implementation time).
Dependency, where parallel working by development teams may lead to interdependence, allowing the UI team to create simple mocks based on known implementation specifics of required web services, facilitating progress even if other layers are delayed in their respective feature development

These considerations vary based on the project at hand and do not signify the definitive solution, but personally, I advocate for maintaining independent layers within a project to facilitate timely feature releases in any one layer, regardless of delays in others.

To all readers, I welcome any comments, corrections, or suggestions you may have.

Answer 5

Answer №3

Is there a specific method you plan to use for this task? Perhaps a programmatically driven approach?

If that is the case, the ideal solution would involve utilizing a proxy, with a recommended tool like browserMobProxy which works seamlessly with selenium/webdriver tools.

If you prefer an external approach, consider utilizing external Traffic shapers or proxies. For example: and

vaurien --protocol http --proxy nonexistingproxy.com:8000 --backend website.com:80

Why avoid using browser capabilities? Firstly, you would need to reload the page to enact them and secondly, you would not be able to redefine the proxy settings in protractor. Regarding plugins, it can be challenging to interact with them programmatically without significant benefits, especially when dealing with multiple browsers.

Answer 6

Is there a specific method you plan to use for this task? Perhaps a programmatically driven approach?

If that is the case, the ideal solution would involve utilizing a proxy, with a recommended tool like browserMobProxy which works seamlessly with selenium/webdriver tools.

If you prefer an external approach, consider utilizing external Traffic shapers or proxies. For example: and

vaurien --protocol http --proxy nonexistingproxy.com:8000 --backend website.com:80

Why avoid using browser capabilities? Firstly, you would need to reload the page to enact them and secondly, you would not be able to redefine the proxy settings in protractor. Regarding plugins, it can be challenging to interact with them programmatically without significant benefits, especially when dealing with multiple browsers.

Answer 7

Answer №4

Facebook has developed a tool called ATC, which stands for Augmented Traffic Control. This tool is used to simulate network conditions.

ATC allows users to manipulate bandwidth, latency, packet loss, and packet corruption rates within their network.

Because ATC is an open-source tool, there is potential to customize it further by creating different "error" profiles or integrating it with tools like Webdriver.

For more information about ATC, visit this link. The ATC GitHub repository can be found here.

Answer 8

Facebook has developed a tool called ATC, which stands for Augmented Traffic Control. This tool is used to simulate network conditions.

ATC allows users to manipulate bandwidth, latency, packet loss, and packet corruption rates within their network.

Because ATC is an open-source tool, there is potential to customize it further by creating different "error" profiles or integrating it with tools like Webdriver.

For more information about ATC, visit this link. The ATC GitHub repository can be found here.

Imitate network glitches

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display only alphabetic characters in the text field

Is there a way to utilize a POST request to pass a React component from server.js to App.js for rendering?

When referencing a particular React commit in package.json, it may result in the installation of react-tools instead of react itself

The child division was not dynamically included

What is the best approach to dealing with "Cannot <METHOD> <ROUTE>" errors in Express?

Displaying iterative content using Vue.js from an array of items

The navigation underline stays in place even after being clicked, and also appears below

Arrange the JSONB data type with sequelize literal in your order

"Timed out connection following the upload of a file in Laravel and subsequent

typescript - transforming text into numerical values

Is it possible to have two large text areas situated next to each other, taking up the entire width of the website like in Sublime Text editor, and arranged

Receiving partial data through the API

AngularJS textbox validation for numbers and required in repeating mode ensures that the user input is a

Oops! Looks like there's a type error in module ".mdx" - it seems that it doesn't have the exported member "metadata". Maybe try using "import metadata from ".mdx"" instead?

Tips for adding elements to an angular $scope.array?

Modify Knockout applyBindings to interpret select choices as numeric values

Issue: In Firefox, resizing elements using position:absolute does not work as expected

Tips for finding and selecting the "speed test" link on Netflix with the help of Selenium in Python

What could be causing this issue of the Angular Material table not displaying properly?

Setting up Access-Control-Allow-Origin in WildFly 8.1.0 configuration

Imitate network glitches

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display only alphabetic characters in the text field

Is there a way to utilize a POST request to pass a React component from server.js to App.js for rendering?

When referencing a particular React commit in package.json, it may result in the installation of react-tools instead of react itself

The child division was not dynamically included

What is the best approach to dealing with "Cannot <METHOD> <ROUTE>" errors in Express?

Displaying iterative content using Vue.js from an array of items

The navigation underline stays in place even after being clicked, and also appears below

Arrange the JSONB data type with sequelize literal in your order

"Timed out connection following the upload of a file in Laravel and subsequent

typescript - transforming text into numerical values

Is it possible to have two large text areas situated next to each other, taking up the entire width of the website like in Sublime Text editor, and arranged

Receiving partial data through the API

AngularJS textbox validation for numbers and required in repeating mode ensures that the user input is a

Oops! Looks like there's a type error in module "*.mdx" - it seems that it doesn't have the exported member "metadata". Maybe try using "import metadata from "*.mdx"" instead?

Tips for adding elements to an angular $scope.array?

Modify Knockout applyBindings to interpret select choices as numeric values

Issue: In Firefox, resizing elements using position:absolute does not work as expected

Tips for finding and selecting the "speed test" link on Netflix with the help of Selenium in Python

What could be causing this issue of the Angular Material table not displaying properly?

Setting up Access-Control-Allow-Origin in WildFly 8.1.0 configuration

Oops! Looks like there's a type error in module ".mdx" - it seems that it doesn't have the exported member "metadata". Maybe try using "import metadata from ".mdx"" instead?