Migrating from Protractor to Cypress
Nx helps configure your e2e tests for you. When running the Nx generator to create a new app, you can choose Protractor as an option, but the default is Cypress. If you have an existing set of e2e tests using Protractor and would like to switch to using Cypress, you can follow these steps.
Let's say your existing app is named my-awesome-app
and the e2e Protractor tests are located in my-awesome-app-e2e
.
-
Before you start, make sure you have a clean git working tree (by committing or stashing any in progress changes)
-
Create a throw away app named
delete-this-app
usingCypress
for the e2e setting.nx g @nrwl/angular:application --name=delete-this-app --e2eTestRunner=cypress
-
Rename
apps/my-awesome-app-e2e/src
toapps/my-awesome-app-e2e/src-protractor
mv apps/my-awesome-app-e2e/src apps/my-awesome-app-e2e/src-protractor
-
Move the contents of
apps/delete-this-app-e2e
toapps/my-awesome-app-e2e
mv apps/delete-this-app-e2e/* apps/my-awesome-app-e2e
-
In the
angular.json
(orworkspace.json
) file copy thee2e
target configuration fordelete-this-app-e2e
and use that to replace thee2e
target configuration formy-awesome-app-e2e
. In the new configuration section, replace any instance ofdelete-this-app
withmy-awesome-app
. -
Delete
delete-this-app
anddelete-this-app-e2e
nx g rm delete-this-app-e2e nx g rm delete-this-app
-
Edit
apps/my-awesome-app-e2e/cypress.json
and replace any instance ofdelete-this-app
withmy-awesome-app
. -
Delete
apps/my-awesome-app-e2e/protractor.conf.js
rm apps/my-awesome-app-e2e/protractor.conf.js
-
Migrate your
*.po.ts
files to use the Cypress API as opposed to the Protractor API.- The canonical way for Cypress to handle page objects is to create small reusable functions that use the
cy
object to return a reference to whatever element you want to interact with.
- The canonical way for Cypress to handle page objects is to create small reusable functions that use the
-
Migrate your Protractor
*.spec.ts
files to Cypress*.spec.ts
files.- Refer to the excellent Cypress docs for more information.
-
Run your Cypress tests with the same command that launched your Protractor tests.
nx e2e my-awesome-app-e2e