README.md

Getting Started

• What is Cypress? (video)
• Cypress in a Nutshell (video)

Best Practices

• Each it() should be its own atomic test (run independently of other tests). Each it() should likely start with cy.visit() or nav to page
• We are switching over our test ids from < ... data-test-id=".."/> to using the Cypress preferred < ... data-test=".."/>. This allows us to better take advantage of certain Cypress tooling, like the Selector Playground
• Use Cypress's Best Practices for Selecting Elements

Migrating Protractor tests to Cypress

When migrating a test suite from Protractor to Cypress, the following steps are recommended:

1. Create the new test suite in Cypress
2. If you need to create a new test id use the data-test attribute and the cy.byTestID() helper method. If you need to access the legacy data-test-id attribute, use the cy.byLegacyTestID() helper method.
3. Remove test suite from Protractor

Directory Structure

frontend/packages/integration-tests-cypress/
├── support    <--- add commands to Cypress 'cy.' global, other support configurations
│   ├── index.ts
│   ├── nav.ts
│   ├── project.ts
│   ├── README.md
│   └── selectors.ts
├── fixtures                <--- mock data
│   └── example.json
├── plugins
│   └── index.js            <--- webpack-preprocessor, enviornment variables, baseUrl, custom tasks
├── tests                   <--- test suites
│   ├── crud
│   │   └── namespace-crud.spec.ts
│   └── monitoring
│       └── monitoring.spec.ts
└── views                   <--- helper objects containing assertions and commands
    ├── details-page.ts
    ├── list-page.ts
    ├── form.ts    
    └── modal.ts

Additional Resources

• Assertions
• Debugging
• Cypress.io docs
• Cypress.io Recipes