github-action VS cypress-crud-api-test

# .github/workflows/main.yml name: cypress-crud-api-test on: push: workflow_dispatch: # if this branch is pushed back to back, cancel the older branch's workflow concurrency: group: ${{ github.ref }} && ${{ github.workflow }} cancel-in-progress: true jobs: test: strategy: # uses 1 CI machine matrix: machines: [1] runs-on: ubuntu-20.04 steps: - name: Checkout 🛎 uses: actions/checkout@v2 # https://github.com/cypress-io/github-action - name: Run api tests 🧪 uses: cypress-io/[email protected] with: browser: chrome record: true group: crud api test env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} LAUNCH_DARKLY_PROJECT_KEY: ${{ secrets.LAUNCH_DARKLY_PROJECT_KEY }} LAUNCH_DARKLY_AUTH_TOKEN: ${{ secrets.LAUNCH_DARKLY_AUTH_TOKEN }} LAUNCHDARKLY_SDK_KEY: ${{ secrets.LAUNCHDARKLY_SDK_KEY }} #{{ # Here we are running the unit tests after the e2e # taking advantage of npm install in Cypress GHA. # Ideally we install first, and carry over the cache # to unit and e2e jobs. # Check this link for the better way: # https://github.com/muratkeremozcan/react-hooks-in-action-with-cypress/blob/main/.github/workflows/main.yml - name: run unit tests run: npm run test

For much more info regarding the Cypress Github Action, check out their detailed documentation. I'm just barely scratching the surface of its capabilities here.

Cypress maintains a very neat GitHub Action that makes CI usage convenient with custom parameters.

Any blog post is lackluster without working code, so here is a PR from scratch adding esbuild to a repository with Cypress. You can find the final code on the main branch of the repository we will use in this example. Other examples can be found at tour-of-heroes-react-cypress-ts as well as a VueJS app. The framework and the bundler the framework uses are irrelevant, any repo can take advantage of cypress-esbuild-preprocessor for e2e tests.

This is part two of a multi-part series. In the previous post we setup the flags, now we will test them. Before diving into testing feature flags, we will setup Cypress and transfer over the final CRUD e2e spec from the repo cypress-crud-api-test. That repo was featured in the blog post CRUD API testing a deployed service with Cypress. Note that the said repo and this service used to be separated - that is a known anti-pattern - and now we are combining the two in a whole. The change will provide us with the ability to use the LaunchDarkly (LD) client instance to make flag value assertions. We would not have that capability if the test code was in a separate repo than the source code, unless the common code was moved to a package & was imported to the two repos. In the real world if we had to apply that as a solution, we would want to have valuable trade-offs.

The code for this entire guide is available at GitHub. For learning purposes, you can check out the branch base to start from scratch and follow the guide. main has the final version of the repo. The code samples are setup to copy paste into the repo and work at every step.