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-appusingCypressfor the e2e setting.nx g @nrwl/angular:application --name=delete-this-app --e2eTestRunner=cypress -
Rename
apps/my-awesome-app-e2e/srctoapps/my-awesome-app-e2e/src-protractormv apps/my-awesome-app-e2e/src apps/my-awesome-app-e2e/src-protractor -
Move the contents of
apps/delete-this-app-e2etoapps/my-awesome-app-e2emv apps/delete-this-app-e2e/* apps/my-awesome-app-e2e -
In the
angular.json(orworkspace.json) file copy thee2etarget configuration fordelete-this-app-e2eand use that to replace thee2etarget configuration formy-awesome-app-e2e. In the new configuration section, replace any instance ofdelete-this-appwithmy-awesome-app. -
Delete
delete-this-appanddelete-this-app-e2enx g rm delete-this-app-e2e nx g rm delete-this-app -
Edit
apps/my-awesome-app-e2e/cypress.jsonand replace any instance ofdelete-this-appwithmy-awesome-app. -
Delete
apps/my-awesome-app-e2e/protractor.conf.jsrm apps/my-awesome-app-e2e/protractor.conf.js -
Migrate your
*.po.tsfiles 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
cyobject 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.tsfiles to Cypress*.spec.tsfiles.- 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