@knapsack-pro/cypress

@knapsack-pro/cypress runs your E2E tests with Cypress.io test runner and does dynamic tests allocation across parallel CI nodes using KnapsackPro.com Queue Mode to provide the fastest CI build time (optimal test suite timing).

Learn about Knapsack Pro Queue Mode in the video how to run tests with dynamic test suite split and learn what CI problems can be solved thanks to it.

Read article about runnning javascript E2E tests faster with Cypress on parallel CI nodes.

Table of Contents

• Installation
• FAQ
• Development
  • Requirements
  • Dependencies
  • Setup
  • Publishing
  • Testing
    • CI
    • Example Cypress test suite

Installation

See the docs to get started.

FAQ

• FAQ for Knapsack Pro Cypress can be found here.

• This project depends on @knapsack-pro/core. Please check the FAQ for @knapsack-pro/core to learn more about core features available to you.

Development

Requirements

You can use NVM to manage Node version in development.

• >= Node 18.13.0 LTS

Dependencies

• @knapsack-pro/core

Setup

1. Setup @knapsack-pro/core project.

Follow below steps or use bin/setup_development script to take care of steps 2-5.

2. Install dependencies:

   $ npm install
   $(npm bin)/cypress install

3. In order to use local version of @knapsack-pro/core run:

   $ npm link @knapsack-pro/core

4. Compile TypeScript code to lib directory by running:

   $ npm start

5. Register @knapsack-pro/cypress package globally in your local system. This way we will be able to develop other npm packages dependent on it:

   $ npm link

6. Set up your IDE:

   • Visual Studio Code

     • Install the following plugins:

       • Prettier - Code formatter
       • ESLint
       • EditorConfig for VS Code

     • Go to File > Preferences > Settings > Text Editor > Formatting

       Turn on Format On Save checkbox.

   From now on, every change in code base will be automatically formatted by Prettier. ESLint shows errors and warnings in VSCode.

7. Write some code.

Publishing

1. Sign in to npm registry with command:

   $ npm adduser

2. Ensure you have the latest version of @knapsack-pro/core in package.json:

   {
     "dependencies": {
       "@knapsack-pro/core": "^x.x.x"
     }
   }

   Then run npm install. This way you will be able to test @knapsack-pro/core installed from npm registry instead of local one that was linked with npm link @knapsack-pro/core.

   Now commit updated package.json and package-lock.json.

   $ git commit -am "Update @knapsack-pro/core"

3. Before releasing a new version of package please update CHANGELOG.md with github_changelog_generator:

   $ gem install github_changelog_generator
   
   # generate CHANGELOG.md
   $ github_changelog_generator --user KnapsackPro --project knapsack-pro-cypress
   $ git commit -am "Update CHANGELOG.md"
   $ git push origin master

4. If you have added new files to the repository and they should be part of the released npm package then please ensure they are included in files array in package.json.

5. If you have changed any headers in README.md please refresh table of contents with:

   $ npm run doctoc

6. Compile project:

   # ensure you use local version of @knapsack-pro/core
   $ npm link @knapsack-pro/core
   
   $ npm run build

7. In order to bump version of the package run below command. It will also create a version commit and tag for the release:

   # bump patch version 0.0.x
   $ npm version patch
   
   # bump minor version 0.x.0
   $ npm version minor

8. Push to git repository created commit and tag:

   $ git push origin master --tags

9. Now when git tag is on Github you can update CHANGELOG.md again.

   $ github_changelog_generator --user KnapsackPro --project knapsack-pro-cypress
   $ git commit -am "Update CHANGELOG.md"
   $ git push origin master

10. Now you can publish package to npm registry:

    $ npm publish

11. Update the latest available library version in TestSuiteClientVersionChecker for the Knapsack Pro API repository.

Testing

CI

If your feature requires code change in @knapsack-pro/core then please push the @knapsack-pro/core to GitHub first. Then you can push changes for @knapsack-pro/cypress to ensure the CI will use the latest @knapsack-pro/core.

Example Cypress test suite

To test @knapsack-pro/cypress against real test suite we use forked cypress-example-kitchensink project.