<commit_before>---
title: Migrating from Protractor to Cypress
---

<Alert type="info">

## <Icon name="graduation-cap"></Icon> What you'll learn

- Benefits of using Cypress in Angular apps
- How Cypress can create reliable e2e tests for Angular apps
- How to migrate Protractor tests to Cypress

</Alert>

## Introduction

Protractor has been a popular end-to-end testing tool for Angular and AngularJS apps. However, Protractor is [no longer included](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49) in new Angular projects as of Angular 12. We've got you covered here with this migration guide to help you and your team transition from Protractor to Cypress.

<Alert type="warning">

If you see any inaccuracies with this guide or feel like something has been misrepresented, please [start a discussion here](https://github.com/cypress-io/cypress/discussions/new).

</Alert>

To start, let's look at a quick code sample to see how approachable Cypress is coming from Protractor. In this scenario, we have a test to validate that a user can sign up for a new account.

<Badge type="danger">Before: Protractor</Badge>

```js
describe('Authorization tests', () => {
  it('allows the user to signup for a new account', () => {
    browser.get('/signup')
    element(by.css('#email-field')).sendKeys('<EMAIL>')
    element(by.css('#confirm-email-field')).sendKeys('<EMAIL>')
    element(by.css('#password-field')).sendKeys('<PASSWORD>')
    element(by.cssContainingText('button', 'Create new account')).click()

    expect(browser.getCurrentUrl()).toEqual('/signup/success')
  })
})
```

<Badge type="success">After: Cypress</Badge>

```js
describe('Authorization Tests', () => {
  it('allows the user to signup for a new account', () => {
    cy.visit('/signup')
    cy.get('#email-field').type('<EMAIL>')
    cy.get('#confirm-email-field').type('<EMAIL>')
    cy.get('#password-field').type('<PASSWORD>')
    cy.get('button').contains('Create new account').click()

    cy.url().should('include', '/signup/success')
  })
})
```

## Benefits of Using Cypress

As many developers can attest to, end-to-end testing is one of those things that they know they _should_ do, but often do not. Or if they do run tests, the tests are often flaky and often very expensive due to how long it can take to run. And while there are often ideals of complete code coverage, the realities of business and deadlines often take precedence and the tests are left unwritten, or worse, ignored when errors are being reported because they are not reliable. Not only does Cypress make sure that your tests will be reliable, but it provides developers with tools that make e2e testing an asset to development rather than a hindrance.

### Interact with your tests in a browser

When Protractor runs tests, the browser automation launches a browser instance and often runs through tests too fast for the human eye. Without additional configuration, this often leads to a reliance on lengthy terminal messages that can be expensive from a context-switching perspective.

With the [Cypress Test Runner](/guides/core-concepts/test-runner), your tests run in an interactive browser environment in real time. The Cypress Test Runner's [command log](/guides/core-concepts/test-runner#Command-Log) displays the tests from your test suite and their assertions. When you [click on a command or assertion](https://docs.cypress.io/guides/core-concepts/test-runner#Clicking-on-Commands) in the command log, the Cypress Test Runner displays a DOM snapshot from that point in time so you can see what the application under test looked like at the time of the test's execution. This allows you to see the **real rendered UI** and the behavior of the app under **real user interactions.** Since the app is loaded within a real browser, you can also manually explore its behavior while it is under the state of a desired test scenario.

The Test Runner also helps you to write your tests by making it as easy as possible to find the right CSS selectors for the DOM elements in your application with its [Selector Playground](https://docs.cypress.io/guides/core-concepts/test-runner#Selector-Playground). The Selector Playground helps you cut down on time spent finding the right selectors so you can focus on what's important: writing tests that verify your app's logic.

<DocsVideo src="/img/guides/migrating-to-cypress/DevTools.mp4" title="interacting with tests in a browser"></DocsVideo>

### Faster feedback loops

When it comes to your end-to-end tests, being able to see your tests as they run is critical to allowing you to confidently iterate faster. With Cypress, your tests are automatically re-run upon file save as you are iterating on them.

Having your code editor and application under test within a browser side-by-side (shown below) while re-running tests on save is a highly productive workflow. It provides an instant feedback loop that allows you to iterate faster with confidence.

<DocsVideo src="/img/guides/migrating-to-cypress/codeframe-ex.webm" title="auto-reloading"></DocsVideo>

### Time travel through tests

The Cypress Test Runner gives you time travel capabilities to see exactly how your app was behaving at any point during test execution. (TODO: takes DOM snapshots before and after network requests) Cypress takes DOM snapshots of your application under test as the Test Runner executes the commands and assertions in your tests. This enables you to view the **real UI** of your application at any point during your tests' execution. By clicking from one command to another in the [command log](/guides/core-concepts/test-runner#Command-Log), you can see which elements Cypress acted upon and how your application responded to the simulated **real user behavior**.

<DocsVideo src="/img/guides/migrating-to-cypress/interactivity.mp4" title="Time travel debugging"></DocsVideo>

### Gain Visibility in Headless Mode with Screenshots and Videos
<commit_msg>fix: remove todo comment in protractor guide<commit_after>---
title: Migrating from Protractor to Cypress
---

<Alert type="info">

## <Icon name="graduation-cap"></Icon> What you'll learn

- Benefits of using Cypress in Angular apps
- How Cypress can create reliable e2e tests for Angular apps
- How to migrate Protractor tests to Cypress

</Alert>

## Introduction

Protractor has been a popular end-to-end testing tool for Angular and AngularJS apps. However, Protractor is [no longer included](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49) in new Angular projects as of Angular 12. We've got you covered here with this migration guide to help you and your team transition from Protractor to Cypress.

<Alert type="warning">

If you see any inaccuracies with this guide or feel like something has been misrepresented, please [start a discussion here](https://github.com/cypress-io/cypress/discussions/new).

</Alert>

To start, let's look at a quick code sample to see how approachable Cypress is coming from Protractor. In this scenario, we have a test to validate that a user can sign up for a new account.

<Badge type="danger">Before: Protractor</Badge>

```js
describe('Authorization tests', () => {
  it('allows the user to signup for a new account', () => {
    browser.get('/signup')
    element(by.css('#email-field')).sendKeys('<EMAIL>')
    element(by.css('#confirm-email-field')).sendKeys('<EMAIL>')
    element(by.css('#password-field')).sendKeys('<PASSWORD>')
    element(by.cssContainingText('button', 'Create new account')).click()

    expect(browser.getCurrentUrl()).toEqual('/signup/success')
  })
})
```

<Badge type="success">After: Cypress</Badge>

```js
describe('Authorization Tests', () => {
  it('allows the user to signup for a new account', () => {
    cy.visit('/signup')
    cy.get('#email-field').type('<EMAIL>')
    cy.get('#confirm-email-field').type('<EMAIL>')
    cy.get('#password-field').type('<PASSWORD>')
    cy.get('button').contains('Create new account').click()

    cy.url().should('include', '/signup/success')
  })
})
```

## Benefits of Using Cypress

As many developers can attest to, end-to-end testing is one of those things that they know they _should_ do, but often do not. Or if they do run tests, the tests are often flaky and often very expensive due to how long it can take to run. And while there are often ideals of complete code coverage, the realities of business and deadlines often take precedence and the tests are left unwritten, or worse, ignored when errors are being reported because they are not reliable. Not only does Cypress make sure that your tests will be reliable, but it provides developers with tools that make e2e testing an asset to development rather than a hindrance.

### Interact with your tests in a browser

When Protractor runs tests, the browser automation launches a browser instance and often runs through tests too fast for the human eye. Without additional configuration, this often leads to a reliance on lengthy terminal messages that can be expensive from a context-switching perspective.

With the [Cypress Test Runner](/guides/core-concepts/test-runner), your tests run in an interactive browser environment in real time. The Cypress Test Runner's [command log](/guides/core-concepts/test-runner#Command-Log) displays the tests from your test suite and their assertions. When you [click on a command or assertion](https://docs.cypress.io/guides/core-concepts/test-runner#Clicking-on-Commands) in the command log, the Cypress Test Runner displays a DOM snapshot from that point in time so you can see what the application under test looked like at the time of the test's execution. This allows you to see the **real rendered UI** and the behavior of the app under **real user interactions.** Since the app is loaded within a real browser, you can also manually explore its behavior while it is under the state of a desired test scenario.

The Test Runner also helps you to write your tests by making it as easy as possible to find the right CSS selectors for the DOM elements in your application with its [Selector Playground](https://docs.cypress.io/guides/core-concepts/test-runner#Selector-Playground). The Selector Playground helps you cut down on time spent finding the right selectors so you can focus on what's important: writing tests that verify your app's logic.

<DocsVideo src="/img/guides/migrating-to-cypress/DevTools.mp4" title="interacting with tests in a browser"></DocsVideo>

### Faster feedback loops

When it comes to your end-to-end tests, being able to see your tests as they run is critical to allowing you to confidently iterate faster. With Cypress, your tests are automatically re-run upon file save as you are iterating on them.

Having your code editor and application under test within a browser side-by-side (shown below) while re-running tests on save is a highly productive workflow. It provides an instant feedback loop that allows you to iterate faster with confidence.

<DocsVideo src="/img/guides/migrating-to-cypress/codeframe-ex.webm" title="auto-reloading"></DocsVideo>

### Time travel through tests

The Cypress Test Runner gives you time travel capabilities to see exactly how your app was behaving at any point during test execution. Cypress takes DOM snapshots of your application under test as the Test Runner executes the commands and assertions in your tests. This enables you to view the **real UI** of your application at any point during your tests' execution. By clicking from one command to another in the [command log](/guides/core-concepts/test-runner#Command-Log), you can see which elements Cypress acted upon and how your application responded to the simulated **real user behavior**.

<DocsVideo src="/img/guides/migrating-to-cypress/interactivity.mp4" title="Time travel debugging"></DocsVideo>

### Gain Visibility in Headless Mode with Screenshots and Videos

{'fraction_non_alphanumeric': 0.08716097069443278, 'fraction_numerical': 0.0023511629859769923, 'mean_word_length': 4.693116634799235, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 55, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3219560', 'n_tokens_mistral': 3178, 'n_tokens_neox': 3052, 'n_words': 1515}