> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/testing/end-to-end-testing.md).

# End to End Testing

By definition, unit-tests **don't test interactions between modules** and some side-effects.

The whole application **must also be tested automatically**.

## Protractor

Protractor is an e2e *(end-to-end)* testing framework developed by the AngularJS team.

It can test AngularJS or Angular web applications but also **non-AngularJS web applications**.

Protractor uses the Selenium webdriver to communicate with browsers and control them.

Protractor tests are written in **JavaScript *****(or TypeScript)***** with Jasmine**.

```javascript
describe('angularjs homepage todo list', () => {

    it('should add a todo', () => {
    
        browser.get('https://angularjs.org');

        /* Add an element. */
        element(by.model('todoList.todoText')).sendKeys('write first protractor test');
        element(by.css('[value="add"]')).click();

        /* Check todo list content. */
        const todoList = element.all(by.repeater('todo in todoList.todos'));
        expect(todoList.count()).toEqual(1);
        expect(todoList.get(0).getText()).toEqual('write first protractor test');

    });

});
```

{% hint style="success" %}
**Page objects:**

Factorize each view's *(or page)* logic in a dedicated and **reusable class** *(separation of concerns)*.
{% endhint %}

```javascript
import { PageTodo } from './pages/page-todo';

describe('angularjs homepage todo list', () => {

    it('should add a todo', () => {

        const pageTodo = new PageTodo();
    
        browser.get(pageTodo.pageUrl());

        /* Add an element. */
        pageTodo.addTodo({title: 'write first protractor test'});

        /* Check todo list content. */
        const todoElementList = pageTodo.todoElementList();

        expect(todoElementList.count()).toEqual(1);
        expect(todoElementList.get(0).getText()).toEqual('write first protractor test');

    });

});
```

## Cross-Browser & Cross-Device Test Automation with Browserstack

Browserstack is a cloud service with a large set of remotely controllable devices and browsers.

With Browserstack, you can run your Protractor tests on mobile and desktop.

<https://www.browserstack.com>

{% embed url="<https://www.browserstack.com>" %}

Browserstack records logs, captures screenshots and records testing videos.

{% hint style="info" %}
Apps can also be tested manually on Browserstack.
{% endhint %}

{% hint style="info" %}
You can open a tunnel with Browserstack to test locally hosted applications.
{% endhint %}

## Cypress

Cypress is another JavaScript End to End Testing Framework.

{% hint style="warning" %}
It doesn't use Selenium so it's not cross-browser.
{% endhint %}

With Cypress, it is easier to have a Test-Driven Development approach as tests can be re-run automatically on every change without having to respawn a browser.

<https://www.cypress.io/>

{% embed url="<https://www.cypress.io/>" %}

## Takeaways

### Cross-Browser & Cross-Device E2E Testing Automation Blog Post

<https://blog.wishtack.com/2015/05/07/cross-browser-testing-test-automation-with-protractor-and-browserstack/>

{% embed url="<https://blog.wishtack.com/2015/05/07/cross-browser-testing-test-automation-with-protractor-and-browserstack/>" %}

### Boilerplate to run your first protractor tests

<https://github.com/wishtack/wt-protractor-boilerplate>

{% embed url="<https://github.com/wishtack/wt-protractor-boilerplate>" %}

### Useful modules

<https://github.com/wishtack/wt-protractor-runner>

{% embed url="<https://github.com/wishtack/wt-protractor-runner>" %}

<https://github.com/wishtack/wt-protractor-utils>

{% embed url="<https://github.com/wishtack/wt-protractor-utils>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://web-dev-guide.wishtack.io/testing/end-to-end-testing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.