Merge branch 'develop' into 7.0-release

2026-01-14 02:50:04 -06:00 · 2021-02-19 15:07:36 -05:00
parent 098c3027dd 02aec1eb62
commit 80d8bcf141
41 changed files with 1031 additions and 741 deletions
--- a/.github/workflows/merge-master-into-develop.yml
+++ b/.github/workflows/merge-master-into-develop.yml
@@ -1,4 +1,4 @@
-name: merge-master-into-develop
+name: Merge master into develop
 on:
  push:
    branches:
@@ -20,7 +20,7 @@ jobs:
        run: git checkout develop
      - name: Check for merge conflict
        id: check-conflict
-        run: echo "::set-output name=merge_conflict::$(git merge-tree $(git merge-base HEAD master) master HEAD | egrep '<<')"
+        run: echo "::set-output name=merge_conflict::$(git merge-tree $(git merge-base HEAD master) master HEAD | egrep '<<<<<<<')"
      - name: Merge master into develop
        run: git merge master
        if: ${{ !steps.check-conflict.outputs.merge_conflict }}
@@ -43,19 +43,32 @@ jobs:
        run: git push origin ${{ steps.gen-names.outputs.branch_name }}
        if: ${{ steps.check-conflict.outputs.merge_conflict }}
      - name: Create Pull Request
-        uses: repo-sync/pull-request@v2
+        uses: actions/github-script@v3
        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          source_branch: ${{ steps.gen-names.outputs.branch_name }}
-          destination_branch: "develop"
-          pr_title: |
-            chore: merge master - ${{ steps.gen-names.outputs.sha }} into develop
-          pr_body: |
-            There was a merge conflict when trying to automatically merge master into develop. Please resolve the conflict and complete the merge.
+          script: |
+            const pull = await github.pulls.create({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              base: 'develop',
+              head: '${{ steps.gen-names.outputs.branch_name }}',
+              title: 'chore: merge master (${{ steps.gen-names.outputs.sha }}) into develop',
+              body: `There was a merge conflict when trying to automatically merge master into develop. Please resolve the conflict and complete the merge.

-            DO NOT SQUASH AND MERGE
+              DO NOT SQUASH AND MERGE

-            @${{ github.actor }}
-          pr_reviewer: ${{ github.actor }}
-          pr_label: "auto-merge"
+              @${context.actor}`,
+              maintainer_can_modify: true,
+            })
+            await github.pulls.requestReviewers({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: pull.data.number,
+              reviewers: [context.actor],
+            })
+            await github.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: pull.data.number,
+              labels: ['auto-merge'],
+            })
        if: ${{ steps.check-conflict.outputs.merge_conflict }}
--- a/circle.yml
+++ b/circle.yml
@@ -210,7 +210,7 @@ commands:
      - store_test_results:
          path: /tmp/cypress
      - store_artifacts:
-          path: /tmp/artifacts
+          path: ./packages/runner-ct/cypress/videos
      - store-npm-logs

  run-e2e-tests:
--- a/cli/package.json
+++ b/cli/package.json
@@ -52,7 +52,7 @@
    "minimist": "^1.2.5",
    "ospath": "^1.2.2",
    "pretty-bytes": "^5.4.1",
-    "ramda": "~0.26.1",
+    "ramda": "~0.27.1",
    "request-progress": "^3.0.0",
    "supports-color": "^7.2.0",
    "tmp": "~0.2.1",
--- a/npm/eslint-plugin-dev/CHANGELOG.md
+++ b/npm/eslint-plugin-dev/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [@cypress/eslint-plugin-dev-v5.1.0](https://github.com/cypress-io/cypress/compare/@cypress/eslint-plugin-dev-v5.0.2...@cypress/eslint-plugin-dev-v5.1.0) (2021-02-16)
+
+
+### Features
+
+* component testing ([#14479](https://github.com/cypress-io/cypress/issues/14479)) ([af26fbe](https://github.com/cypress-io/cypress/commit/af26fbebe6bc609132013a0493a116cc78bb1bd4))
+
 # [@cypress/eslint-plugin-dev-v5.0.2](https://github.com/cypress-io/cypress/compare/@cypress/eslint-plugin-dev-v5.0.1...@cypress/eslint-plugin-dev-v5.0.2) (2020-10-29)


--- a/npm/react/CHANGELOG.md
+++ b/npm/react/CHANGELOG.md
@@ -1,3 +1,52 @@
+# [@cypress/react-v5.0.1](https://github.com/cypress-io/cypress/compare/@cypress/react-v5.0.0...@cypress/react-v5.0.1) (2021-02-17)
+
+
+### Bug Fixes
+
+* trigger semantic release ([#15128](https://github.com/cypress-io/cypress/issues/15128)) ([3a6f3b1](https://github.com/cypress-io/cypress/commit/3a6f3b1928277f7086062b1107f424e5a0247e00))
+
+# [@cypress/react-v5.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v4.16.4...@cypress/react-v5.0.0) (2021-02-17)
+
+
+### Bug Fixes
+
+* update dependencies of npm/react-vue ([#15095](https://github.com/cypress-io/cypress/issues/15095)) ([e028262](https://github.com/cypress-io/cypress/commit/e028262aed485865c4f40162c1f8102970ef91f8))
+* **component-testing:** make content adjust to size of window ([#14876](https://github.com/cypress-io/cypress/issues/14876)) ([4cf3896](https://github.com/cypress-io/cypress/commit/4cf3896ecbb074831709f73f22768457fdaf5779))
+
+
+### Features
+
+* component testing ([#14479](https://github.com/cypress-io/cypress/issues/14479)) ([af26fbe](https://github.com/cypress-io/cypress/commit/af26fbebe6bc609132013a0493a116cc78bb1bd4))
+
+
+### BREAKING CHANGES
+
+* change of architecture for
+component testing
+
+Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
+
+# [@cypress/react-v5.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v4.16.4...@cypress/react-v5.0.0) (2021-02-16)
+
+
+### Bug Fixes
+
+* update dependencies of npm/react-vue ([#15095](https://github.com/cypress-io/cypress/issues/15095)) ([e028262](https://github.com/cypress-io/cypress/commit/e028262aed485865c4f40162c1f8102970ef91f8))
+* **component-testing:** make content adjust to size of window ([#14876](https://github.com/cypress-io/cypress/issues/14876)) ([4cf3896](https://github.com/cypress-io/cypress/commit/4cf3896ecbb074831709f73f22768457fdaf5779))
+
+
+### Features
+
+* component testing ([#14479](https://github.com/cypress-io/cypress/issues/14479)) ([af26fbe](https://github.com/cypress-io/cypress/commit/af26fbebe6bc609132013a0493a116cc78bb1bd4))
+
+
+### BREAKING CHANGES
+
+* change of architecture for
+component testing
+
+Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
+
 # [@cypress/react-v4.16.4](https://github.com/cypress-io/cypress/compare/@cypress/react-v4.16.3...@cypress/react-v4.16.4) (2021-01-27)


--- a/npm/react/circle.yml
+++ b/npm/react/circle.yml
@@ -1,371 +0,0 @@
-version: 2.1
-orbs:
-  cypress: cypress-io/cypress@1.26.0
-
-workflows:
-  build:
-    jobs:
-      # install and cache dependencies in this job
-      # AND build the library once
-      # then the workspace will be passed to other jobs
-      - cypress/install:
-          name: Install
-          executor: cypress/base-12
-          build: npm run transpile
-          post-steps:
-            - run:
-                name: Show info 📺
-                command: npx cypress info
-            - run:
-                name: Linting code 🧹
-                command: npm run lint
-            - run:
-                name: Stop exclusive tests 1️⃣
-                command: npm run stop-only
-            - run:
-                name: Build folder 🏗
-                command: npm run build
-            - run:
-                name: Run unit tests 👷
-                command: npm run test:unit
-
-      - cypress/run:
-          name: Example A11y
-          requires:
-            - Install
-          executor: cypress/base-12
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/a11y
-          command: npm test
-          store_artifacts: true
-
-      - cypress/run:
-          name: Example Babel
-          requires:
-            - Install
-          executor: cypress/base-12
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: false
-          working_directory: examples/using-babel
-          command: npm test
-          store_artifacts: true
-
-      - cypress/run:
-          name: Example Babel + Typescript
-          requires:
-            - Install
-          executor: cypress/base-12
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/using-babel-typescript
-          command: npm test
-          store_artifacts: true
-
-      - cypress/run:
-          name: Example React Scripts
-          requires:
-            - Install
-          executor: cypress/base-12
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/react-scripts
-          command: npm test
-          store_artifacts: true
-          post-steps:
-            - run:
-                name: Check coverage 📈
-                command: |
-                  npm run check-coverage
-                  npm run only-covered
-                working_directory: examples/react-scripts
-
-      - cypress/run:
-          name: Example Next.js
-          requires:
-            - Install
-          executor: cypress/base-12
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/nextjs
-          command: npm test
-          store_artifacts: true
-          post-steps:
-            - run:
-                name: Check coverage 📈
-                command: |
-                  npm run check-coverage
-                  npm run only-covered
-                working_directory: examples/nextjs
-
-      - cypress/run:
-          # react-scripts example with component tests not in "src" folder
-          # but in "cypress/component" folder
-          name: Example Component Folder
-          executor: cypress/base-12
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/react-scripts-folder
-          command: npm test
-          store_artifacts: true
-          post-steps:
-            - run:
-                name: Check coverage 📈
-                command: |
-                  npm run check-coverage
-                  npm run only-covered
-                working_directory: examples/react-scripts-folder
-
-      - cypress/run:
-          name: Example Tailwind
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          executor: cypress/base-12
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/tailwind
-          command: |
-            DEBUG=cypress-react-unit-test,find-webpack npm test
-          store_artifacts: true
-          post-steps:
-            - run:
-                name: Check coverage 📈
-                command: |
-                  ls -la
-                  npm run check-coverage
-                  npm run only-covered
-                working_directory: examples/tailwind
-
-      - cypress/run:
-          name: Example Webpack file
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          executor: cypress/base-12
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/webpack-file
-          command: npm test
-          store_artifacts: true
-          post-steps:
-            - run:
-                name: Check coverage 📈
-                command: |
-                  npm run check-coverage
-                  npm run only-covered
-                working_directory: examples/webpack-file
-
-      - cypress/run:
-          name: Example Rollup
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          executor: cypress/base-12
-          install-command: npm install --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/rollup
-          command: npm test
-          store_artifacts: true
-
-      - cypress/run:
-          name: Example Webpack options
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          executor: cypress/base-12
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/webpack-options
-          command: npm test
-          store_artifacts: true
-          post-steps:
-            - run:
-                name: Check coverage 📈
-                command: |
-                  npm run check-coverage
-                  npm run only-covered
-                working_directory: examples/webpack-options
-
-#      - cypress/run:
-#          name: Example Sass
-#          requires:
-#            - Install
-#          # we need the same OS version as in install job
-#          # because we will use native Sass dependency
-#          executor: cypress/base-12
-#          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-#          install-command: npm install  --no-bin-links
-#          verify-command: echo 'Already verified'
-#          no-workspace: true
-#          working_directory: examples/sass-and-ts
-#          command: npm test
-#          store_artifacts: true
-#          post-steps:
-#            - run:
-#                name: Check coverage 📈
-#                command: |
-#                  npm run check-coverage
-#                  npm run only-covered
-#                working_directory: examples/sass-and-ts
-
-      - cypress/run:
-          name: Example Snapshots
-          requires:
-            - Install
-          executor: cypress/base-12
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/snapshots
-          command: npm test
-          store_artifacts: true
-
-      - cypress/run:
-          name: Visual Sudoku
-          executor: cypress/base-12
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/visual-sudoku
-          command: npm test
-          store_artifacts: true
-          post-steps:
-            - store_artifacts:
-                path: examples/visual-sudoku/cypress/snapshots
-
-      - cypress/run:
-          name: Visual with Applitools
-          executor: cypress/base-12
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/visual-testing-with-applitools
-          # to correctly run this job, we need Applitools token
-          # external pull requests do not have environment variables set
-          # thus the job will always fail. Let's skip this job if the
-          # environment variable is missing
-          command: |
-            if [ -z "$APPLITOOLS_API_KEY" ]; then
-              echo "Skipping Applitools test job, missing environment variable APPLITOOLS_API_KEY"
-            else
-              npm test
-            fi
-          store_artifacts: true
-
-      - cypress/run:
-          name: Visual with Percy
-          executor: cypress/base-12
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/visual-testing-with-percy
-          # run Percy agent and then run Cypress component tests
-          # https://docs.percy.io/docs/cypress
-          command: npx percy exec -- npm test
-          store_artifacts: true
-
-      - cypress/run:
-          name: Visual with Happo
-          executor: cypress/base-12
-          requires:
-            - Install
-          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install  --no-bin-links
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          working_directory: examples/visual-testing-with-happo
-          command: npm run test:happo
-          store_artifacts: true
-
-      - cypress/run:
-          name: Component Tests
-          executor: cypress/base-12
-          parallelism: 4
-          requires:
-            - Install
-          # notice a trick to avoid re-installing dependencies
-          # in this job - a do-nothing "install-command" parameter
-          install-command: echo 'Nothing to install in this job'
-          # we are not going to use results from this job anywhere else
-          no-workspace: true
-          record: false
-          store_artifacts: true
-          # following examples from
-          # https://circleci.com/docs/2.0/parallelism-faster-jobs/
-          # TODO probably only run component tests and move integration sanity checks into own job
-          command: |
-            TESTFILES=$(circleci tests glob "cypress/{component,integration}/**/*spec.{js,jsx,ts,tsx}" | circleci tests split --total=4)
-            echo "Test files for this machine are $TESTFILES"
-            npx cypress run --spec $TESTFILES
-
-      # this job attaches the workspace left by the install job
-      # so it is ready to run Cypress tests
-      # only we will run semantic release script instead
-      - cypress/run:
-          name: NPM release
-          # only run NPM release from specific branch(es)
-          filters:
-            branches:
-              only:
-                - main
-          # we need newer Node for semantic release
-          executor: cypress/base-12
-          requires:
-            - Install
-            - Component Tests
-            - Example A11y
-            - Example Babel
-            - Example Component Folder
-            - Example React Scripts
-            # - Example Sass
-            - Example Snapshots
-            - Example Tailwind
-            - Example Webpack file
-            - Example Webpack options
-            - Example Rollup
-            - Visual Sudoku
-            - Visual with Percy
-            - Visual with Happo
-            - Visual with Applitools
-          install-command: echo 'Already installed'
-          verify-command: echo 'Already verified'
-          no-workspace: true
-          # instead of "cypress run" do NPM release 😁
-          # clear environment variables to trick semantic-release
-          # into thinking this is NOT a pull request.
-          # (under the hood the module env-ci is used to check if this is a PR)
-          command: |
-            npm run build
-            CIRCLE_PR_NUMBER= \
-            CIRCLE_PULL_REQUEST= \
-            CI_PULL_REQUEST= \
-            npm run semantic-release
--- a/npm/react/package.json
+++ b/npm/react/package.json
@@ -13,7 +13,7 @@
    "pretest": "yarn transpile",
    "test": "yarn cy:run",
    "transpile": "tsc",
-    "watch": "yarn build --watch"
+    "watch": "yarn build --watch --watch.exclude ./dist/**/*"
  },
  "dependencies": {
    "@babel/plugin-transform-modules-commonjs": "7.12.1",
@@ -156,6 +156,9 @@
      "optional": true
    }
  },
+  "publishConfig": {
+    "access": "public"
+  },
  "ciJobs": [
    "npm-react",
    "npm-react-axe",
--- a/npm/vite-dev-server/CHANGELOG.md
+++ b/npm/vite-dev-server/CHANGELOG.md
@@ -0,0 +1,13 @@
+# [@cypress/vite-dev-server-v1.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v1.0.0...@cypress/vite-dev-server-v1.0.1) (2021-02-17)
+
+
+### Bug Fixes
+
+* trigger semantic release ([#15128](https://github.com/cypress-io/cypress/issues/15128)) ([3a6f3b1](https://github.com/cypress-io/cypress/commit/3a6f3b1928277f7086062b1107f424e5a0247e00))
+
+# @cypress/vite-dev-server-v1.0.0 (2021-02-16)
+
+
+### Features
+
+* adding vite-dev-server plugin ([#14839](https://github.com/cypress-io/cypress/issues/14839)) ([0225406](https://github.com/cypress-io/cypress/commit/022540605139545d137125dbb6a85eb995053fcb))
--- a/npm/vite-dev-server/package.json
+++ b/npm/vite-dev-server/package.json
@@ -29,5 +29,10 @@
  "repository": {
    "type": "git",
    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress/tree/master/npm/vite-dev-server#readme",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
+  "publishConfig": {
+    "access": "public"
  }
 }
--- a/npm/vue/CHANGELOG.md
+++ b/npm/vue/CHANGELOG.md
@@ -1,3 +1,41 @@
+# [@cypress/vue-v2.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.0.0...@cypress/vue-v2.0.1) (2021-02-17)
+
+
+### Bug Fixes
+
+* trigger semantic release ([#15128](https://github.com/cypress-io/cypress/issues/15128)) ([3a6f3b1](https://github.com/cypress-io/cypress/commit/3a6f3b1928277f7086062b1107f424e5a0247e00))
+
+# [@cypress/vue-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v1.0.0...@cypress/vue-v2.0.0) (2021-02-16)
+
+
+### Bug Fixes
+
+* code coverage for vue ([68032c1](https://github.com/cypress-io/cypress/commit/68032c1fcb19999a917c89374ea0a85a9c0a9150))
+* update dependencies of npm/react-vue ([#15095](https://github.com/cypress-io/cypress/issues/15095)) ([e028262](https://github.com/cypress-io/cypress/commit/e028262aed485865c4f40162c1f8102970ef91f8))
+* **Component Testing:** Broken links in docs ([#14251](https://github.com/cypress-io/cypress/issues/14251)) ([a72529f](https://github.com/cypress-io/cypress/commit/a72529f396baee669c9b112d9296d314177f8cc1))
+* **deps:** update dependency debug to version 4.3.1 🌟 ([#14583](https://github.com/cypress-io/cypress/issues/14583)) ([9be6165](https://github.com/cypress-io/cypress/commit/9be61657f4150ba5dee7b67f806d810f3106d13b))
+* add discord chat link for component testing readme ([#8780](https://github.com/cypress-io/cypress/issues/8780)) ([529abdc](https://github.com/cypress-io/cypress/commit/529abdc07c9848fabacf3e304d1dad0def18ebc3))
+* adding build-prod tasks to all of the npm dependencies that need artifacts ([#9045](https://github.com/cypress-io/cypress/issues/9045)) ([550c05c](https://github.com/cypress-io/cypress/commit/550c05cc3d7a2a179de21138ae5f8118277df6ef))
+* adding build-prod tasks to all of the npm dependencies that need artifacts ([#9046](https://github.com/cypress-io/cypress/issues/9046)) ([462829b](https://github.com/cypress-io/cypress/commit/462829bea1d903b0f1666d4ef2dd85e56636b725))
+* Fix cypress-vue-unit-test reference ([#8756](https://github.com/cypress-io/cypress/issues/8756)) ([fa253d2](https://github.com/cypress-io/cypress/commit/fa253d24c04d4f4cecca94729651fcacd48b4ff1))
+* make imported @cypress/react working and pass CI ([#8718](https://github.com/cypress-io/cypress/issues/8718)) ([5e4b638](https://github.com/cypress-io/cypress/commit/5e4b6383854a78d10249621ffea9e4e20effe192))
+* reset head between tests to avoid style bleed ([#8828](https://github.com/cypress-io/cypress/issues/8828)) ([ee7b819](https://github.com/cypress-io/cypress/commit/ee7b8196c8c0e0a9a55b44885e8f43f6120d4869))
+* update bugs link in package.json ([#9015](https://github.com/cypress-io/cypress/issues/9015)) ([34186cb](https://github.com/cypress-io/cypress/commit/34186cb8b76c230a2506cabb0358d44c3205e0c4))
+
+
+### Features
+
+* component testing ([#14479](https://github.com/cypress-io/cypress/issues/14479)) ([af26fbe](https://github.com/cypress-io/cypress/commit/af26fbebe6bc609132013a0493a116cc78bb1bd4))
+* create-cypress-tests wizard ([#8857](https://github.com/cypress-io/cypress/issues/8857)) ([21ee591](https://github.com/cypress-io/cypress/commit/21ee591d1e9c4083a0c67f2062ced92708c0cedd))
+
+
+### BREAKING CHANGES
+
+* change of architecture for
+component testing
+
+Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
+
 # [@cypress/vue-v1.1.0-alpha.3](https://github.com/cypress-io/cypress/compare/@cypress/vue-v1.1.0-alpha.2...@cypress/vue-v1.1.0-alpha.3) (2021-01-27)


--- a/npm/vue/circle.yml
+++ b/npm/vue/circle.yml
@@ -1,90 +0,0 @@
-version: 2.1
-orbs:
-  cypress: cypress-io/cypress@1
-
-workflows:
-  build:
-    jobs:
-      # install and cache dependencies in this job
-      # AND build the library once
-      # then the workspace will be passed to other jobs
-      - cypress/install:
-          name: Install
-          executor: cypress/base-12
-          # creates files in "dist" folder
-          build: |
-            npm run build
-            echo ""
-            echo "Build package archive 📦"
-            echo ""
-            # first show the contents to be packed
-            npm pack --dry
-            echo ""
-            echo "packing ..."
-            echo ""
-            npm pack
-            echo ""
-            ls -la
-          post-steps:
-            - run:
-                name: Show info 📺
-                command: npx cypress info
-            - run:
-                name: Linting code 🧹
-                command: npm run lint
-
-      - cypress/run:
-          name: Test
-          executor: cypress/base-12
-          parallelism: 2
-          requires:
-            - Install
-          # notice a trick to avoid re-installing dependencies
-          # in this job - a do-nothing "install-command" parameter
-          install-command: echo 'Nothing to install in this job'
-          # we are not going to use results from this job anywhere else
-          no-workspace: true
-          record: false
-          store_artifacts: true
-          # following examples from
-          # https://circleci.com/docs/2.0/parallelism-faster-jobs/
-          command: |
-            TESTFILES=$(circleci tests glob "cypress/{component,integration}/**/*spec.{js,jsx,ts,tsx}" | circleci tests split --total=2)
-            echo "Test files for this machine are $TESTFILES"
-            npx cypress run --spec $TESTFILES
-
-#      - cypress/run:
-#          name: Example CLI
-#          executor: cypress/base-12
-#          requires:
-#            - Install
-#          install-command: npm install
-#          verify-command: echo 'Already verified'
-#          no-workspace: true
-#          working_directory: examples/cli
-#          command: |
-#            echo "🦶🏻 Scaffolding component tests"
-#            echo ""
-#            # scaffolds Babel + Webpack combo
-#            npx --package @vue/cli vue add cypress-experimental
-#            echo ""
-#            echo "🦶🏻 test scaffolded project, should work"
-#            echo ""
-#            DEBUG=@cypress/vue npx cypress run --spec 'tests/components/**/*.js'
-#            # let's inspect the scaffolded app
-#            ls -la
-#            echo ""
-#            echo "🦶🏻 install the current @cypress/vue"
-#            echo ""
-#            npm install ../../@cypress/vue
-#            echo ""
-#            echo "🦶🏻 run component tests"
-#            echo ""
-#            DEBUG=@cypress/vue npx cypress run --spec 'tests/components/**/*.js'
-#            echo ""
-#            echo "🦶🏻 look at the generated files, should have coverage"
-#            # (after updating cypress-experimental)
-#            echo ""
-#            ls -la
-#          store_artifacts: true
-
--- a/npm/vue/package.json
+++ b/npm/vue/package.json
@@ -69,6 +69,7 @@
    "vue"
  ],
  "publishConfig": {
+    "access": "public",
    "registry": "http://registry.npmjs.org/"
  },
  "ciJobs": [
--- a/npm/webpack-batteries-included-preprocessor/CHANGELOG.md
+++ b/npm/webpack-batteries-included-preprocessor/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [@cypress/webpack-batteries-included-preprocessor-v2.1.5](https://github.com/cypress-io/cypress/compare/@cypress/webpack-batteries-included-preprocessor-v2.1.4...@cypress/webpack-batteries-included-preprocessor-v2.1.5) (2021-01-27)
+
+
+### Bug Fixes
+
+* ignore browserslist file ([#14754](https://github.com/cypress-io/cypress/issues/14754)) ([a21e76f](https://github.com/cypress-io/cypress/commit/a21e76fb0fb8706b4a188bc944137fb33030b42a))
+
 # [@cypress/webpack-batteries-included-preprocessor-v2.1.4](https://github.com/cypress-io/cypress/compare/@cypress/webpack-batteries-included-preprocessor-v2.1.3...@cypress/webpack-batteries-included-preprocessor-v2.1.4) (2021-01-05)


--- a/npm/webpack-dev-server/CHANGELOG.md
+++ b/npm/webpack-dev-server/CHANGELOG.md
@@ -0,0 +1,21 @@
+# [@cypress/webpack-dev-server-v1.0.2](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v1.0.1...@cypress/webpack-dev-server-v1.0.2) (2021-02-18)
+
+
+### Bug Fixes
+
+* add webpack-dev-server to peerDependencies, improve peerDependency error handling, fix index-template.html path ([#15149](https://github.com/cypress-io/cypress/issues/15149)) ([2863e33](https://github.com/cypress-io/cypress/commit/2863e338920362cbb1ecf20c2fab28fbd3a52c33))
+
+# [@cypress/webpack-dev-server-v1.0.1](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v1.0.0...@cypress/webpack-dev-server-v1.0.1) (2021-02-17)
+
+
+### Bug Fixes
+
+* add a trivial change to trigger semantic release ([#15127](https://github.com/cypress-io/cypress/issues/15127)) ([fb7540e](https://github.com/cypress-io/cypress/commit/fb7540e99d56e0cff89aaf2fe76065b9815bdbec))
+* trigger semantic release ([#15128](https://github.com/cypress-io/cypress/issues/15128)) ([3a6f3b1](https://github.com/cypress-io/cypress/commit/3a6f3b1928277f7086062b1107f424e5a0247e00))
+
+# @cypress/webpack-dev-server-v1.0.0 (2021-02-16)
+
+
+### Features
+
+* component testing ([#14479](https://github.com/cypress-io/cypress/issues/14479)) ([af26fbe](https://github.com/cypress-io/cypress/commit/af26fbebe6bc609132013a0493a116cc78bb1bd4))
--- a/npm/webpack-dev-server/index.js
+++ b/npm/webpack-dev-server/index.js
@@ -1 +1,5 @@
+const { validatePeerDependencies } = require('./dist/errors')
+
+validatePeerDependencies()
+
 module.exports = require('./dist')
--- a/npm/webpack-dev-server/package.json
+++ b/npm/webpack-dev-server/package.json
@@ -25,14 +25,21 @@
  },
  "peerDependencies": {
    "html-webpack-plugin": "> 3",
-    "webpack": "> 4"
+    "webpack": "> 4",
+    "webpack-dev-server": "> 3"
  },
  "files": [
-    "dist"
+    "dist",
+    "index-template.html"
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress/tree/master/npm/webpack-dev-server#readme",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
+  "publishConfig": {
+    "access": "public"
  }
 }
--- a/npm/webpack-dev-server/src/errors.ts
+++ b/npm/webpack-dev-server/src/errors.ts
@@ -0,0 +1,80 @@
+export interface MissingDependency {
+  prettyName: string
+  packageName: string
+}
+
+const peerDeps: MissingDependency[] = [
+  {
+    prettyName: 'Webpack Dev Server',
+    packageName: 'webpack-dev-server',
+  },
+  {
+    prettyName: 'Html Webpack Plugin',
+    packageName: 'html-webpack-plugin',
+  },
+  {
+    prettyName: 'Webpack',
+    packageName: 'webpack',
+  },
+]
+
+const makePrettyLibs = (libs) => {
+  return libs.reduce((acc, curr, idx) => {
+    acc.prettyNames.push(curr.prettyName)
+    acc.packageNames.push(curr.packageName)
+
+    if (idx >= libs.length) return acc
+
+    return {
+      prettyNames: acc.prettyNames.join(', '),
+      packageNames: acc.packageNames.join(' '),
+    }
+  }, { prettyNames: [], packageNames: [] })
+}
+
+export class MissingPeerDependency extends Error {
+  private libs: { prettyNames: string[], packageNames: string[] }
+
+  constructor (message,
+    libs: MissingDependency[]) {
+    const prettyLibs = makePrettyLibs(libs)
+
+    super(`${message} ${prettyLibs.prettyNames}`)
+    this.name = 'PeerDependencyMissing'
+    this.libs = prettyLibs
+
+    Object.setPrototypeOf(this, MissingPeerDependency.prototype)
+  }
+
+  get prettyMessage () {
+    return `❌ Missing ${this.libs.prettyNames}. Please install them with npm or yarn.
+
+    npm i ${this.libs.packageNames} -D
+    yarn add ${this.libs.packageNames} --dev
+
+    Updating webpack config is unnecessary
+`
+  }
+}
+
+export function validatePeerDependencies () {
+  const missingPeerDeps = peerDeps.filter((peerDep) => {
+    try {
+      require(peerDep.packageName)
+    } catch (err) {
+      return true
+    }
+
+    return false
+  })
+
+  if (missingPeerDeps.length) {
+    const error = new MissingPeerDependency(`@cypress/webpack-dev-server is missing peer dependencies`, missingPeerDeps)
+
+    console.error(error.prettyMessage) // eslint-disable-line
+
+    throw error
+  }
+
+  return true
+}
--- a/npm/webpack-dev-server/src/index.ts
+++ b/npm/webpack-dev-server/src/index.ts
@@ -14,13 +14,6 @@ export interface DevServerOptions {
  devServerEvents: EventEmitter
 }

-export interface StartDevServer {
-  /* this is the Cypress options object */
-  options: DevServerOptions
-  /* support passing a path to the user's webpack config */
-  webpackConfig?: Record<string, any>
-}
-
 type DoneCallback = () => unknown

 export interface ResolvedDevServerConfig {
@@ -28,6 +21,13 @@ export interface ResolvedDevServerConfig {
  close: (done?: DoneCallback) => void
 }

+export interface StartDevServer {
+  /* this is the Cypress options object */
+  options: DevServerOptions
+  /* support passing a path to the user's webpack config */
+  webpackConfig?: Record<string, any>
+}
+
 export async function startDevServer (startDevServerArgs: StartDevServer) {
  const webpackDevServer = await createDevServer(startDevServerArgs)

--- a/npm/webpack-preprocessor/CHANGELOG.md
+++ b/npm/webpack-preprocessor/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [@cypress/webpack-preprocessor-v5.6.0](https://github.com/cypress-io/cypress/compare/@cypress/webpack-preprocessor-v5.5.0...@cypress/webpack-preprocessor-v5.6.0) (2021-02-16)
+
+
+### Features
+
+* component testing ([#14479](https://github.com/cypress-io/cypress/issues/14479)) ([af26fbe](https://github.com/cypress-io/cypress/commit/af26fbebe6bc609132013a0493a116cc78bb1bd4))
+
 # [@cypress/webpack-preprocessor-v5.5.0](https://github.com/cypress-io/cypress/compare/@cypress/webpack-preprocessor-v5.4.11...@cypress/webpack-preprocessor-v5.5.0) (2020-11-30)


--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cypress",
-  "version": "6.5.0",
+  "version": "6.6.0",
  "description": "Cypress.io end to end testing tool",
  "private": true,
  "scripts": {
@@ -174,7 +174,7 @@
    "pretty-ms": "7.0.0",
    "print-arch": "1.0.0",
    "proxyquire": "2.1.3",
-    "ramda": "0.24.1",
+    "ramda": "0.27.1",
    "semantic-release": "17.2.3",
    "semantic-release-monorepo": "7.0.3",
    "semver": "7.3.2",
--- a/packages/desktop-gui/cypress/integration/runs_list_spec.js
+++ b/packages/desktop-gui/cypress/integration/runs_list_spec.js
@@ -333,7 +333,7 @@ describe('Runs List', function () {
    })

    it('displays "need to set up" message', () => {
-      cy.contains('You could see test recordings here')
+      cy.contains('Connect to the Dashboard to see your recorded test runs here')
    })
  })

@@ -348,7 +348,7 @@ describe('Runs List', function () {
    })

    it('displays "need to set up" message', () => {
-      cy.contains('You could see test recordings here')
+      cy.contains('Connect to the Dashboard to see your recorded test runs here')
    })

    describe('click setup project', function () {
@@ -448,7 +448,7 @@ describe('Runs List', function () {
      it('displays "need to set up" message', function () {
        this.ipcError({ type: 'NO_PROJECT_ID' })

-        cy.contains('You could see test recordings here')
+        cy.contains('Connect to the Dashboard to see your recorded test runs here')
      })

      it('displays old runs if another error', function () {
@@ -735,7 +735,7 @@ describe('Runs List', function () {
      })

      it('displays "need to set up" message', () => {
-        cy.contains('You could see test recordings here')
+        cy.contains('Connect to the Dashboard to see your recorded test runs here')
        cy.percySnapshot()
      })

@@ -834,7 +834,7 @@ describe('Runs List', function () {
        })

        it('displays "need to set up" message', () => {
-          cy.contains('You could see test recordings here')
+          cy.contains('Connect to the Dashboard to see your recorded test runs here')
        })

        it('banner does not cover browser dropdown', () => {
--- a/packages/desktop-gui/cypress/integration/setup_project_modal_spec.js
+++ b/packages/desktop-gui/cypress/integration/setup_project_modal_spec.js
@@ -47,7 +47,7 @@ describe('Connect to Dashboard', function () {
  })

  it('displays "need to set up" message', () => {
-    cy.contains('You could see test recordings here')
+    cy.contains('Connect to the Dashboard to see your recorded test runs here')
  })

  describe('when there is a current user', function () {
--- a/packages/desktop-gui/src/runs/dashboard-banner.jsx
+++ b/packages/desktop-gui/src/runs/dashboard-banner.jsx
@@ -4,15 +4,14 @@ import React from 'react'
 const DashboardBanner = () => {
  return (
    <div className='dashboard-banner'>
-      <div className='left-vector' />
-      <div className='right-vector' />
-      <div className='dashboard-banner-db'>
+      <div className='dashboard-banner-tr'>
+        <div className='dashboard-banner-tr-title'>Test Runner</div>
        {_.map(['pass', 'fail', 'pass'], (test, i) => (
          <div key={`test-${i}`} className={`dashboard-banner-test ${test}`}>
            <div className='dashboard-banner-test-left'>
              <div className='dashboard-banner-test-title'>
                <div className='test-title-top'>
-                  <i className='fas fa-check' />
+                  <i className={`fas ${test === 'pass' ? 'fa-check' : 'fa-times'}`} />
                  {_.capitalize(test)}ed test
                </div>
                <div className='test-title-bottom'>
@@ -22,17 +21,34 @@ const DashboardBanner = () => {
                </div>
              </div>
            </div>
-            <div className='dashboard-banner-test-mid'>
-              <i className='far fa-clock' />
-              <div className='fake-text' />
-            </div>
-            <div className='dashboard-banner-test-end'>
-              <i className='fas fa-hourglass-end' />
-              <div className='fake-text' />
-            </div>
          </div>
        ))}
      </div>
+      <div className='dashboard-banner-connectors'>
+        {_.map([2, 4, 3], (num, i) => (
+          <div className='connector-row' key={`connector-row-${i}`}>
+            {_.map(_.range(num), (x) => <div className='connector-bar' key={`connector-bar-${i}-${x}`} />)}
+          </div>
+        ))}
+      </div>
+      <div className='dashboard-banner-dashboard'>
+        <div className='dashboard-banner-dashboard-title'>Cypress Dashboard</div>
+        <div className='dashboard-banner-dashboard-content'>
+          <div className='dashboard-banner-graph'>
+            <div className='fake-text graph-title' />
+            <div className='graph-bars'>
+              {_.map(_.range(4), (i) => (
+                <div className='graph-bar' key={`graph-bar-${i}`}>
+                  <div className='graph-bar-section' />
+                  <div className='graph-bar-section' />
+                  <div className='graph-bar-section' />
+                </div>
+              ))}
+            </div>
+            <div className='fake-text graph-footer' />
+          </div>
+        </div>
+      </div>
    </div>
  )
 }
--- a/packages/desktop-gui/src/runs/project-not-setup.jsx
+++ b/packages/desktop-gui/src/runs/project-not-setup.jsx
@@ -7,6 +7,7 @@ import { configFileFormatted } from '../lib/config-file-formatted'
 import SetupProject from './setup-project-modal'
 import DashboardBanner from './dashboard-banner'
 import authStore from '../auth/auth-store'
+import { IconFailurePoint, IconSupercharge, IconFailAlerts } from './svg-icons'

@observer
 export default class ProjectNotSetup extends Component {
@@ -20,13 +21,9 @@ export default class ProjectNotSetup extends Component {

  render () {
    return (
-      <div>
-        <div className="empty">
-          {
-            this.props.isValid ?
-              <div>{this._getStartedWithCI()}</div> :
-              <div>{this._invalidProject()}</div>
-          }
+      <>
+        <div className='empty'>
+          { this.props.isValid ? this._getStartedWithCI() : this._invalidProject() }
        </div>
        <BootstrapModal
          show={this.state.setupProjectModalOpen}
@@ -35,30 +32,41 @@ export default class ProjectNotSetup extends Component {
        >
          {this._projectSetup()}
        </BootstrapModal>
-      </div>
+      </>
    )
  }

  _getStartedWithCI () {
    return (
      <div className='empty-no-runs'>
-        <DashboardBanner/>
-        <h4>You could see test recordings here!</h4>
-        <div className='empty-no-runs-details'>
-          <h5>Connect to Cypress Dashboard for free:</h5>
-          <ul>
-            <li>Record test runs in CI and debug failed tests with ease</li>
-            <li>Understand the health of your tests with test analytics</li>
-            <li>Improve testing efficiency with parallelization, load balancing, and more</li>
-          </ul>
+        <div>
+          <DashboardBanner/>
+          <h4>Connect to the Dashboard to see your recorded test runs here!</h4>
+          <h5>Sign up and get started for free.</h5>
+          <button
+            className='btn btn-primary btn-wide'
+            onClick={this._showSetupProjectModal}
+          >
+            Connect to Dashboard
+          </button>
+        </div>
+        <div className='what-is-dashboard'>
+          <h5>What is Cypress Dashboard?</h5>
+          <div className='columns'>
+            <div className='column'>
+              <IconFailurePoint />
+              <span>See exact point of failure of tests running in CI.</span>
+            </div>
+            <div className='column'>
+              <IconSupercharge />
+              <span>Supercharge test times with parallelization.</span>
+            </div>
+            <div className='column'>
+              <IconFailAlerts />
+              <span>Get instant test failure alerts via Slack or GitHub.</span>
+            </div>
+          </div>
        </div>
-        <button
-          className='btn btn-primary btn-wide'
-          onClick={this._showSetupProjectModal}
-        >
-          Connect to Dashboard
-        </button>
-        <p>After logging in, you'll see recorded test runs here and in your Cypress Dashboard.</p>
      </div>
    )
  }
@@ -67,7 +75,7 @@ export default class ProjectNotSetup extends Component {
    return (
      <div className='empty-runs-not-displayed'>
        <h4>
-          <i className='fas fa-exclamation-triangle errored'></i>{' '}
+          <i className='fas fa-exclamation-triangle errored' />{' '}
          Runs cannot be displayed
        </h4>
        <p>We were unable to find an existing project matching the <code>projectId</code> in your {configFileFormatted(this.props.project.configFile)}.</p>
@@ -77,7 +85,7 @@ export default class ProjectNotSetup extends Component {
          className='btn btn-warning'
          onClick={this._showSetupProjectModal}
        >
-          <i className='fas fa-wrench'></i>{' '}
+          <i className='fas fa-wrench' />{' '}
          Set up a new project
        </button>
        <p>
--- a/packages/desktop-gui/src/runs/runs.scss
+++ b/packages/desktop-gui/src/runs/runs.scss
@@ -531,91 +531,11 @@
 }

 .dashboard-banner {
-  background-color: #311C56;
-  box-shadow: 0 0 3px 0 rgba(0,0,0,0.20);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  height: 185px;
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-
-  .left-vector {
-    z-index: 900;
-    position: absolute;
-    width: 250px;
-    height: 225px;
-    left: -100px;
-    bottom: -140px;
-    border-radius: 100px;
-
-    background-color: #3d2665;
-    transform: matrix(-0.97, -0.08, 0.24, -1, 0, 0);
-  }
-
-  .right-vector {
-    z-index: 900;
-    position: absolute;
-    width: 250px;
-    height: 225px;
-    right: -65px;
-    top: -100px;
-    border-radius: 100px;
-
-    background-color: #3d2665;
-    transform: matrix(0.42, 0.82, -1.09, 0.18, 0, 0);
-  }
-}
-
-.dashboard-banner-db {
-  z-index: 1000;
-  background-color: #fff;
-  width: 600px;
-  margin: 0 auto;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-
-.dashboard-banner-test {
-  padding: 10px 20px;
-  display: flex;
-  justify-content: space-between;
-  color: #888B91;
-  height: 50px;
  align-items: center;
-  border-bottom: 1px solid #f4f5f7;
-  font-size: 11px;
-
-  i {
-    padding-right: 8px;
-  }
-
-  &:first-of-type {
-    border-top-left-radius: 3px;
-  }
-
-  .test-title-top {
-    margin-bottom: 4px;
-    display: flex;
-  }
-
-  .test-title-bottom {
-    display: flex;
-    margin-left: 20px;
-
-    &>div:nth-child(1) {
-      width: 45px;
-    }
-
-    &>div:nth-child(2) {
-      width: 60px;
-    }
-
-    &>div:nth-child(3) {
-      width: 20px;
-    }
-  }
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  padding: 25px 15px 20px;

  .fake-text {
    background-color: #E0E0E0;
@@ -625,47 +545,324 @@
    margin-top: 3px;
  }

-  .dashboard-banner-test-title {
-    font-weight: bold;
+  .dashboard-banner-tr {
+    border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.25);
+    flex-basis: 250px;
+    min-width: 200px;
+
+    .dashboard-banner-tr-title {
+      background: #26282e;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      color: #fff;
+      font-family: $font-title;
+      font-size: 13px;
+      padding: 6px 10px 2px;
+      text-align: left;
+    }
+
+    .dashboard-banner-test {
+      align-items: center;
+      border-bottom: 1px solid #f4f5f7;
+      color: #888B91;
+      display: flex;
+      font-size: 11px;
+      height: 40px;
+      justify-content: space-between;
+      padding: 0 10px;
+
+      i {
+        padding-right: 8px;
+      }
+
+      &:last-of-type {
+        border-bottom: none;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      .test-title-top {
+        margin-bottom: 4px;
+        display: flex;
+      }
+
+      .test-title-bottom {
+        display: flex;
+        margin-left: 20px;
+
+        &>div:nth-child(1) {
+          width: 45px;
+        }
+
+        &>div:nth-child(2) {
+          width: 55px;
+        }
+
+        &>div:nth-child(3) {
+          width: 18px;
+        }
+      }
+
+      .dashboard-banner-test-title {
+        font-weight: bold;
+        display: flex;
+        flex-direction: column;
+        padding-right: 100px;
+
+        i {
+          margin-top: 3px;
+        }
+      }
+
+      &.pass {
+        border-left: 5px solid #1CB77E;
+
+        .dashboard-banner-test-title {
+          color: #1CB77E;
+        }
+      }
+
+      &.fail {
+        border-left: 5px solid #ec6573;
+
+        .dashboard-banner-test-title {
+          color: #ec6573;
+        }
+      }
+    }
+  }
+
+  .dashboard-banner-dashboard {
+    background: #F7F7Fa;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.25);
+    flex-basis: 250px;
+    min-width: 200px;
+
+    .dashboard-banner-dashboard-title {
+      background: #fff;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+      font-family: $font-title;
+      font-size: 13px;
+      padding: 6px 10px 2px;
+      text-align: left;
+    }
+
+    .dashboard-banner-dashboard-content {
+      height: 120px;
+      padding: 8px 0 0 8px;
+
+      .dashboard-banner-graph {
+        background: #fff;
+        border-bottom-right-radius: 5px;
+        border-top-left-radius: 2px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 6px 0 0 12px;
+
+        .graph-title {
+          height: 8px;
+          width: 70px;
+        }
+
+        .graph-footer {
+          height: 5px;
+          width: 25px;
+        }
+
+        .graph-bars {
+          display: flex;
+          padding: 5px 0;
+
+          .graph-bar {
+            display: flex;
+            flex-direction: column;
+            height: 70px;
+            justify-content: flex-end;
+            padding-right: 10px;
+            width: 100%;
+
+            &:last-of-type {
+              padding-right: 0;
+            }
+
+            .graph-bar-section {
+              &:nth-child(1) {
+                background: #E0E0E0;
+              }
+
+              &:nth-child(2) {
+                background: #ec6573;
+              }
+
+              &:nth-child(3) {
+                background: #1CB77E;
+              }
+            }
+
+            &:nth-child(1) {
+              .graph-bar-section {
+                &:nth-child(1) {
+                  height: 10px;
+                }
+
+                &:nth-child(2) {
+                  height: 8px;
+                }
+
+                &:nth-child(3) {
+                  height: 20px;
+                }
+              }
+            }
+
+            &:nth-child(2) {
+              .graph-bar-section {
+                &:nth-child(1) {
+                  height: 16px;
+                }
+
+                &:nth-child(2) {
+                  height: 6px;
+                }
+
+                &:nth-child(3) {
+                  height: 32px;
+                }
+              }
+            }
+
+            &:nth-child(3) {
+              .graph-bar-section {
+                &:nth-child(1) {
+                  height: 12px;
+                }
+
+                &:nth-child(2) {
+                  height: 12px;
+                }
+
+                &:nth-child(3) {
+                  height: 46px;
+                }
+              }
+            }
+
+            &:nth-child(4) {
+              .graph-bar-section {
+                &:nth-child(1) {
+                  height: 14px;
+                }
+
+                &:nth-child(2) {
+                  height: 6px;
+                }
+
+                &:nth-child(3) {
+                  height: 38px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dashboard-banner-connectors {
    display: flex;
    flex-direction: column;
-    padding-right: 100px;
+    overflow: hidden;
+    flex-basis: 120px;
+    flex-shrink: 4;
+    min-width: 20px;

-    i {
-      margin-top: 3px;
-    }
-  }
+    .connector-row {
+      display: flex;
+      padding: 10px 0;
+      width: 120px;

-  &.pass {
-    border-left: 5px solid #48996b;
+      .connector-bar {
+        border-radius: 10px;
+        height: 5px;
+        margin-right: 10px;

-    .dashboard-banner-test-title {
-      color: #48996b;
-    }
-  }
+        &:first-of-type {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }

-  &.fail {
-    border-left: 4px solid #DB7177;
+        &:last-of-type {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+          margin-right: 0;
+        }
+      }

-    .dashboard-banner-test-title {
-      color: #DB7177;
+      &:nth-child(1) {
+        .connector-bar {
+          &:nth-child(1) {
+            background: #F5A327;
+            width: 35px;
+          }
+
+          &:nth-child(2) {
+            background: #1CB77E;
+            border-bottom-right-radius: 10px;
+            border-top-right-radius: 10px;
+            margin-right: 5px;
+            width: 100px;
+          }
+        }
+      }
+
+      &:nth-child(2) {
+        .connector-bar {
+          &:nth-child(1) {
+            background: #BCBDC4;
+            width: 10px;
+          }
+
+          &:nth-child(2) {
+            background: #1CB77E;
+            width: 80px;
+          }
+
+          &:nth-child(3) {
+            background: #ec6573;
+            width: 30px;
+          }
+
+          &:nth-child(4) {
+            background: #BCBDC4;
+            width: 10px;
+          }
+        }
+      }
+
+      &:nth-child(3) {
+        .connector-bar {
+          &:nth-child(1) {
+            background: #ec6573;
+            width: 35px;
+          }
+
+          &:nth-child(2) {
+            background: #F5A327;
+            width: 25px;
+          }
+
+          &:nth-child(3) {
+            background: #1CB77E;
+            width: 70px;
+          }
+        }
+      }
    }
  }
 }
-
-.dashboard-banner-test-mid, .dashboard-banner-test-end {
-  display: flex;
-  flex-direction: row;
-}
-
-.dashboard-banner-test-mid {
-  &>div:nth-of-type(1) {
-    width: 70px;
-  }
-}
-
-.dashboard-banner-test-end {
-  &>div:nth-of-type(1) {
-    width: 60px;
-  }
-}
--- a/packages/desktop-gui/src/runs/svg-icons.jsx
+++ b/packages/desktop-gui/src/runs/svg-icons.jsx
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+
+export class IconFailurePoint extends Component {
+  render () {
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 36 36"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...this.props}
+      >
+        <circle cx={24.75} cy={15.375} r={1.125} fill="currentColor" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24.75 6.75a.75.75 0 01.75.75V12a.75.75 0 01-1.5 0V7.5a.75.75 0 01.75-.75z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24.75 4.5a7.5 7.5 0 100 15 7.5 7.5 0 000-15zm-9 7.5a9 9 0 1118 0 9 9 0 01-18 0z"
+          fill="currentColor"
+        />
+        <path
+          d="M14.088 19.554a2.908 2.908 0 01.483-1.596c.234-.342.718-.278.972.049s.178.822.084 1.225c-.11.472.008 1.03.36 1.305 1.963 1.536 3.317 4.17 3.51 7.213a.715.715 0 01-.727.75H5.226a.715.715 0 01-.726-.75c.2-3.173 1.665-5.903 3.765-7.405.567-.406.601-1.519.045-1.94-2.037-1.544-3.583-4.15-3.806-7.156-.031-.413.308-.749.722-.749h7.529a.75.75 0 010 1.5H6.108c.389 2.198 1.602 4.068 3.108 5.21.79.598 1.01 1.53.992 2.21-.017.68-.284 1.582-1.07 2.145C7.63 22.643 6.441 24.594 6.085 27H17.91c-.34-2.294-1.436-4.177-2.847-5.282-.756-.592-.981-1.494-.975-2.164zM13.5 7.5H3.75a.75.75 0 000 1.5h9.75a.75.75 0 000-1.5zM20.25 30H3.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+}
+
+export class IconSupercharge extends Component {
+  render () {
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 36 36"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...this.props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.25 3.75a4.5 4.5 0 000 9h19.5a4.5 4.5 0 100-9H8.25zm-6 4.5a6 6 0 016-6h19.5a6 6 0 010 12H8.25a6 6 0 01-6-6z"
+          fill="currentColor"
+        />
+        <path
+          d="M8.25 6.75a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"
+          fill="currentColor"
+        />
+        <path
+          d="M18.531 9.486l1.409-2.65M22.281 9.486l1.409-2.65M26.031 9.486l1.409-2.65"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+        />
+        <path
+          d="M27.75 17.25H8.25a4.5 4.5 0 100 9H18a.75.75 0 010 1.5H8.25a6 6 0 010-12h19.5a6.001 6.001 0 015.954 5.252c.05.41-.29.748-.704.748s-.743-.338-.812-.747a4.501 4.501 0 00-4.438-3.753z"
+          fill="currentColor"
+        />
+        <path
+          d="M8.25 20.25a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"
+          fill="currentColor"
+        />
+        <path
+          d="M18.531 22.986l1.409-2.65M22.281 22.986l1.409-2.65"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M26.698 20.5a1 1 0 01.677-.25c.35 0 .686.116.978.264.3.15.601.36.894.602.587.484 1.191 1.148 1.736 1.9C32.054 24.498 33 26.473 33 28.276c0 3.34-2.66 6-6 6s-6-2.66-6-6c0-.913.166-1.694.374-2.264.103-.282.224-.532.354-.727.064-.095.145-.2.246-.291a.906.906 0 01.601-.243c.252 0 .453.1.566.165.123.072.238.16.331.237.078.064.162.137.24.205l.05.043c.097.084.192.165.291.243.404.32.755.494 1.113.464.332-.072.739-.398.944-1.63l.002-.01.002-.01c.195-1.009.194-1.8.192-2.4v-.139c0-.27 0-.609.073-.878.041-.151.125-.365.319-.54zm.89 4.233c-.24 1.433-.87 2.617-2.179 2.855l-.025.005-.026.002c-.983.11-1.75-.391-2.236-.776a9.975 9.975 0 01-.342-.285 5.213 5.213 0 00-.28 1.741c0 2.51 1.99 4.5 4.5 4.5s4.5-1.99 4.5-4.5c0-1.347-.742-3.01-1.733-4.379-.486-.673-1.007-1.237-1.475-1.624a3.859 3.859 0 00-.486-.348v.137c.002.607.004 1.521-.218 2.672zm-5.199 1.48z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+}
+
+export class IconFailAlerts extends Component {
+  render () {
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 36 36"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...this.props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24 3.75a7.5 7.5 0 100 15 7.5 7.5 0 000-15zm-9 7.5a9 9 0 1118 0 9 9 0 01-18 0zm9.75-4.5a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM4.874 10.73a1.45 1.45 0 011.025-.424h5.499a.75.75 0 000-1.5h-5.5a2.95 2.95 0 00-2.95 2.95v14.646H1.501a.75.75 0 00-.75.75v2.2A5.149 5.149 0 005.899 34.5h24.194a5.148 5.148 0 005.15-5.149v-2.2a.75.75 0 00-.75-.75h-1.45v-3.648a.75.75 0 00-1.5 0v3.649h-9.758a.75.75 0 00-.651.377 3.614 3.614 0 01-4.952 1.333 3.614 3.614 0 01-1.324-1.332.75.75 0 00-.65-.378H4.448V11.755c0-.384.153-.753.425-1.025zM2.25 27.902h11.544a5.114 5.114 0 008.404 0h11.544v1.45A3.65 3.65 0 0130.093 33H5.9a3.649 3.649 0 01-3.649-3.649v-1.45zM24 15.75a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+}
--- a/packages/desktop-gui/src/styles/components/_empty.scss
+++ b/packages/desktop-gui/src/styles/components/_empty.scss
@@ -1,4 +1,5 @@
 .empty, .well-message {
+  height: 100%;
  text-align: center;

  p {
@@ -14,26 +15,16 @@

 .empty-no-runs, .empty-log-in {
  h4 {
-    margin-top: 40px;
-    font-size: 22px;
-    color: #000;
-  }
-
-  .empty-no-runs-details {
-    text-align: left;
-    margin: 15px auto 0; 
-    width: 440px;
-  }
-
-  ul {
    color: #272B2F;
-    padding-left: 25px;
-    font-size: 13px;
+    font-family: $font-title;
+    font-size: 24px;
  }

  h5 {
    color: #272B2F;
-    font-size: 15px;
+    font-family: $font-title;
+    font-size: 18px;
+    font-weight: 400;
  }

  p {
@@ -44,6 +35,85 @@
  }
 }

+.empty-no-runs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .what-is-dashboard {
+    background: #f8f8f8;
+    flex-grow: 2;
+    margin-top: 20px;
+    padding: 8px 50px 10px;
+    text-align: left;
+
+    .columns {
+      align-items: center;
+      justify-content: space-between;
+      display: flex;
+
+      .column {
+        align-items: center;
+        display: flex;
+        width: 30%;
+
+        svg {
+          color: $brand-primary;
+          flex-shrink: 0;
+          font-size: 54px;
+        }
+
+        span {
+          font-family: $font-title;
+          font-size: 15px;
+          margin-left: 15px;
+        }
+      }
+    }
+
+    @media (max-width: 800px) {
+      padding-left: 20px;
+      padding-right: 20px;
+
+      .columns .column svg {
+        font-size: 42px;
+      }
+    }
+
+    @media (max-width: 620px) {
+      padding-left: 40px;
+      padding-right: 40px;
+
+      .columns {
+        flex-direction: column;
+
+        .column {
+          padding-bottom: 15px;
+          width: 85%;
+
+          &:last-of-type {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.empty-log-in {
+  h4 {
+    margin-top: 25px;
+  }
+
+  .login-content {
+    padding-top: 10px;
+  }
+
+  .dashboard-banner {
+    padding-top: 35px;
+  }
+}
+
 .empty-no-api-server {
  padding: 40px 100px 20px;
 }
--- a/packages/launcher/package.json
+++ b/packages/launcher/package.json
@@ -19,7 +19,7 @@
    "fs-extra": "8.1.0",
    "lodash": "4.17.19",
    "plist": "3.0.1",
-    "ramda": "0.24.1"
+    "ramda": "0.27.1"
  },
  "devDependencies": {
    "@packages/ts": "0.0.0-development",
--- a/packages/runner-ct/.gitignore
+++ b/packages/runner-ct/.gitignore
@@ -0,0 +1 @@
+cypress/videos/*
--- a/packages/runner-ct/cypress.json
+++ b/packages/runner-ct/cypress.json
@@ -1,4 +1,4 @@
 {
  "testFiles": "**/*spec.{ts,tsx}",
-  "video": false
+  "video": true
 }
--- a/packages/runner-ct/cypress/component/RunnerCt.spec.tsx
+++ b/packages/runner-ct/cypress/component/RunnerCt.spec.tsx
@@ -1,7 +1,7 @@
 /// <reference types="@percy/cypress" />
 import React from 'react'
 import { mount } from '@cypress/react'
-import App from '../../src/app/RunnerCt'
+import RunnerCt from '../../src/app/RunnerCt'
 import State from '../../src/lib/state'
 import '@packages/runner/src/main.scss'

@@ -12,18 +12,23 @@ class FakeEventManager {
  notifyRunningSpec = () => { }
 }

+const fakeConfig = { projectName: 'Project', env: {}, isTextTerminal: false } as any as Cypress.RuntimeConfigOptions
+
 describe('RunnerCt', () => {
+  beforeEach(() => {
+    cy.viewport(1000, 500)
+  })
+
  function assertSpecsListIs (state: 'closed' | 'open') {
    // for some reason should("not.be.visible") doesn't work here so ensure that specs list was outside of screen
-    cy.get('[data-cy=specs-list]').then(([el]) => {
-      const { x } = el.getBoundingClientRect()
+    cy.get('[data-cy=specs-list]').then(($el) => {
+      const { x } = $el[0].getBoundingClientRect()

      state === 'closed' ? expect(x).to.be.lessThan(0) : expect(x).to.be.lessThan(0)
    })
  }

-  it('renders App', () => {
-    cy.viewport(1000, 500)
+  it('renders RunnerCt', () => {
    const state = new State({
      reporterWidth: 500,
      spec: null,
@@ -31,11 +36,30 @@ describe('RunnerCt', () => {
    })

    mount(
-      <App
+      <RunnerCt
        state={state}
        // @ts-ignore - this is difficult to stub. Real one breaks things.
        eventManager={new FakeEventManager()}
-        config={{ projectName: 'Project', env: {} }}
+        config={fakeConfig}
+      />,
+    )
+
+    cy.percySnapshot()
+  })
+
+  it('renders RunnerCt for video recording', () => {
+    const state = new State({
+      reporterWidth: 500,
+      spec: null,
+      specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
+    })
+
+    mount(
+      <RunnerCt
+        state={state}
+        // @ts-ignore - this is difficult to stub. Real one breaks things.
+        eventManager={new FakeEventManager()}
+        config={{ ...fakeConfig, isTextTerminal: true }}
      />,
    )

@@ -44,7 +68,6 @@ describe('RunnerCt', () => {

  context('keyboard shortcuts', () => {
    beforeEach(() => {
-      cy.viewport(1000, 500)
      const state = new State({
        reporterWidth: 500,
        spec: null,
@@ -52,11 +75,11 @@ describe('RunnerCt', () => {
      })

      mount(
-        <App
+        <RunnerCt
          state={state}
          // @ts-ignore - this is difficult to stub. Real one breaks things.
          eventManager={new FakeEventManager()}
-          config={{ projectName: 'Project', env: {} }}
+          config={fakeConfig}
        />,
      )

@@ -80,7 +103,6 @@ describe('RunnerCt', () => {

  context('specs-list resizing', () => {
    beforeEach(() => {
-      cy.viewport(1000, 500)
      const state = new State({
        reporterWidth: 500,
        spec: null,
@@ -88,11 +110,11 @@ describe('RunnerCt', () => {
      })

      mount(
-        <App
+        <RunnerCt
          state={state}
          // @ts-ignore - this is difficult to stub. Real one breaks things.
          eventManager={new FakeEventManager()}
-          config={{ projectName: 'Project', env: {} }}
+          config={fakeConfig}
        />,
      )
    })
--- a/packages/runner-ct/src/app/RunnerCt.scss
+++ b/packages/runner-ct/src/app/RunnerCt.scss
@@ -69,9 +69,12 @@ main.app-ct {

 .app-wrapper {
  position: relative;
-  width: calc(100vw - #{$specs-list-offset});
  height: 100vh;
-  margin-inline: $specs-list-offset;
+
+  &.with-specs-drawer {
+    width: calc(100vw - #{$specs-list-offset});
+    margin-inline: $specs-list-offset;
+  }
 }

 .app-wrapper-screenshotting {
--- a/packages/runner-ct/src/app/RunnerCt.tsx
+++ b/packages/runner-ct/src/app/RunnerCt.tsx
@@ -24,17 +24,10 @@ import './RunnerCt.scss'
 import { KeyboardHelper, NoSpecSelected } from './NoSpecSelected'
 import { useScreenshotHandler } from './useScreenshotHandler'

-// Cypress.ConfigOptions only appears to have internal options.
-// TODO: figure out where the "source of truth" should be for
-// an internal options interface.
-export interface ExtendedConfigOptions extends Cypress.ConfigOptions {
-  projectName: string
-}
-
 interface AppProps {
  state: State
  eventManager: typeof EventManager
-  config: ExtendedConfigOptions
+  config: Cypress.RuntimeConfigOptions
 }

 const DEFAULT_LEFT_SIDE_OF_SPLITPANE_WIDTH = 355
@@ -48,10 +41,11 @@ const App: React.FC<AppProps> = observer(
    const pluginRootContainer = React.useRef<null | HTMLDivElement>(null)

    const { state, eventManager, config } = props
+    const isOpenMode = !config.isTextTerminal

    const [pluginsHeight, setPluginsHeight] = React.useState(500)
    const [isResizing, setIsResizing] = React.useState(false)
-    const [isSpecsListOpen, setIsSpecsListOpen] = React.useState(true)
+    const [isSpecsListOpen, setIsSpecsListOpen] = React.useState(isOpenMode)
    const [drawerWidth, setDrawerWidth] = React.useState(300)
    const windowSize = useWindowSize()
    const [leftSideOfSplitPaneWidth, setLeftSideOfSplitPaneWidth] = React.useState(DEFAULT_LEFT_SIDE_OF_SPLITPANE_WIDTH)
@@ -124,47 +118,53 @@ const App: React.FC<AppProps> = observer(
    return (
      <>
        <main className="app-ct">
-          <div
-            className={cs(
-              'specs-list-drawer',
-              {
-                'display-none': state.screenshotting,
-              },
-            )}
-            style={{
-              transform: isSpecsListOpen ? `translateX(0)` : `translateX(-${drawerWidth - 20}px)`,
-            }}
-          >
-            <ResizableBox
-              disabled={!isSpecsListOpen}
-              width={drawerWidth}
-              onIsResizingChange={setIsResizing}
-              onWidthChange={setDrawerWidth}
-              className="specs-list-container"
-              data-cy="specs-list-resize-box"
-              minWidth={200}
-              maxWidth={windowSize.width / 100 * 80} // 80vw
+          {isOpenMode && (
+            <div
+              className={cs(
+                'specs-list-drawer',
+                {
+                  'display-none': state.screenshotting,
+                },
+              )}
+              style={{
+                transform: isSpecsListOpen ? `translateX(0)` : `translateX(-${drawerWidth - 20}px)`,
+              }}
            >
-              <nav>
-                <a
-                  id="menu-toggle"
-                  onClick={() => setIsSpecsListOpen(!isSpecsListOpen)}
-                  className="menu-toggle"
-                  aria-label="Open the menu"
-                >
-                  <Burger />
-                </a>
-              </nav>
-              <SpecList
-                specs={state.specs}
-                inputRef={searchRef}
-                disableTextSelection={isResizing}
-                selectedSpecs={state.spec ? [state.spec.absolute] : []}
-                onSelectSpec={runSpec}
-              />
-            </ResizableBox>
-          </div>
-          <div className={cs('app-wrapper', { 'app-wrapper-screenshotting': state.screenshotting })}>
+              <ResizableBox
+                disabled={!isSpecsListOpen}
+                width={drawerWidth}
+                onIsResizingChange={setIsResizing}
+                onWidthChange={setDrawerWidth}
+                className="specs-list-container"
+                data-cy="specs-list-resize-box"
+                minWidth={200}
+                maxWidth={windowSize.width / 100 * 80} // 80vw
+              >
+                <nav>
+                  <a
+                    id="menu-toggle"
+                    onClick={() => setIsSpecsListOpen(!isSpecsListOpen)}
+                    className="menu-toggle"
+                    aria-label="Open the menu"
+                  >
+                    <Burger />
+                  </a>
+                </nav>
+                <SpecList
+                  specs={state.specs}
+                  inputRef={searchRef}
+                  disableTextSelection={isResizing}
+                  selectedSpecs={state.spec ? [state.spec.absolute] : []}
+                  onSelectSpec={runSpec}
+                />
+              </ResizableBox>
+            </div>
+          )}
+
+          <div className={cs('app-wrapper', {
+            'with-specs-drawer': isOpenMode,
+            'app-wrapper-screenshotting': state.screenshotting,
+          })}>
            <SplitPane
              split="vertical"
              primary="first"
--- a/packages/runner-ct/src/lib/state.ts
+++ b/packages/runner-ct/src/lib/state.ts
@@ -280,7 +280,7 @@ export default class State {
  }

  @action
-  initializePlugins = (config: Cypress.ConfigOptions, rootElement: HTMLElement) => {
+  initializePlugins = (config: Cypress.RuntimeConfigOptions, rootElement: HTMLElement) => {
    if (config.env.reactDevtools) {
      this.loadReactDevTools(rootElement)
      .then(action(() => {
--- a/packages/server/snapshots/cypress_spec.js
+++ b/packages/server/snapshots/cypress_spec.js
@@ -68,6 +68,7 @@ The ciBuildId is automatically detected if you are running Cypress in any of the
 - codeshipBasic
 - codeshipPro
 - concourse
+- codeFresh
 - drone
 - githubActions
 - gitlab
@@ -104,6 +105,7 @@ The ciBuildId is automatically detected if you are running Cypress in any of the
 - codeshipBasic
 - codeshipPro
 - concourse
+- codeFresh
 - drone
 - githubActions
 - gitlab
@@ -141,6 +143,7 @@ The ciBuildId is automatically detected if you are running Cypress in any of the
 - codeshipBasic
 - codeshipPro
 - concourse
+- codeFresh
 - drone
 - githubActions
 - gitlab
--- a/packages/server/lib/exec.js
+++ b/packages/server/lib/exec.js
@@ -12,7 +12,7 @@ const trimStdio = R.evolve({
  stderr: R.trim,
 })

-const loadShellVars = R.memoize(shellEnv)
+const loadShellVars = R.memoizeWith(R.toString, shellEnv)

 module.exports = {
  run (projectRoot, options) {
--- a/packages/server/lib/modes/run-ct.js
+++ b/packages/server/lib/modes/run-ct.js
@@ -1,4 +1,5 @@
 const run = (options) => {
+  // TODO make sure if we need to run this in electron by default to match e2e behavior?
  options.browser = options.browser || 'chrome'

  // if we're in run mode with component
--- a/packages/server/lib/util/ci_provider.js
+++ b/packages/server/lib/util/ci_provider.js
@@ -96,6 +96,7 @@ const CI_PROVIDERS = {
  'codeshipBasic': isCodeshipBasic,
  'codeshipPro': isCodeshipPro,
  'concourse': isConcourse,
+  codeFresh: 'CF_BUILD_ID',
  'drone': 'DRONE',
  githubActions: 'GITHUB_ACTIONS',
  'gitlab': isGitlab,
@@ -218,6 +219,20 @@ const _providerCiParams = () => {
      'BUILD_TEAM_NAME',
      'ATC_EXTERNAL_URL',
    ]),
+    // https://codefresh.io/docs/docs/codefresh-yaml/variables/
+    codeFresh: extract([
+      'CF_BUILD_ID',
+      'CF_BUILD_URL',
+      'CF_CURRENT_ATTEMPT',
+      'CF_STEP_NAME',
+      'CF_PIPELINE_NAME',
+      'CF_PIPELINE_TRIGGER_ID',
+      // variables added for pull requests
+      'CF_PULL_REQUEST_ID',
+      'CF_PULL_REQUEST_IS_FORK',
+      'CF_PULL_REQUEST_NUMBER',
+      'CF_PULL_REQUEST_TARGET',
+    ]),
    drone: extract([
      'DRONE_JOB_NUMBER',
      'DRONE_BUILD_LINK',
@@ -465,6 +480,12 @@ const _providerCommitParams = () => {
      // remoteOrigin: ???
      // defaultBranch: ???
    },
+    codeFresh: {
+      sha: env.CF_REVISION,
+      branch: env.CF_BRANCH,
+      message: env.CF_COMMIT_MESSAGE,
+      authorName: env.CF_COMMIT_AUTHOR,
+    },
    drone: {
      sha: env.DRONE_COMMIT_SHA,
      branch: env.DRONE_COMMIT_BRANCH,
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -95,7 +95,7 @@
    "ospath": "1.2.2",
    "p-queue": "6.1.0",
    "pluralize": "8.0.0",
-    "ramda": "0.24.1",
+    "ramda": "0.27.1",
    "randomstring": "1.1.5",
    "recast": "0.20.4",
    "resolve": "1.17.0",
--- a/packages/server/test/unit/ci_provider_spec.js
+++ b/packages/server/test/unit/ci_provider_spec.js
@@ -458,6 +458,52 @@ describe('lib/util/ci_provider', () => {
    return expectsCommitParams(null)
  })

+  it('codeFresh', () => {
+    resetEnv = mockedEnv({
+      // build information
+      'CF_BUILD_ID': 'cfBuildId',
+      'CF_BUILD_URL': 'cfBuildUrl',
+      'CF_CURRENT_ATTEMPT': 'cfCurrentAttempt',
+      'CF_STEP_NAME': 'cfStepName',
+      'CF_PIPELINE_NAME': 'cfPipelineName',
+      'CF_PIPELINE_TRIGGER_ID': 'cfPipelineTriggerId',
+
+      // variables added for pull requests
+      'CF_PULL_REQUEST_ID': 'cfPullRequestId',
+      'CF_PULL_REQUEST_IS_FORK': 'cfPullRequestIsFork',
+      'CF_PULL_REQUEST_NUMBER': 'cfPullRequestNumber',
+      'CF_PULL_REQUEST_TARGET': 'cfPullRequestTarget',
+
+      // git information
+      CF_REVISION: 'cfRevision',
+      CF_BRANCH: 'cfBranch',
+      CF_COMMIT_MESSAGE: 'cfCommitMessage',
+      CF_COMMIT_AUTHOR: 'cfCommitAuthor',
+    }, { clear: true })
+
+    expectsName('codeFresh')
+    expectsCiParams({
+      cfBuildId: 'cfBuildId',
+      cfBuildUrl: 'cfBuildUrl',
+      cfCurrentAttempt: 'cfCurrentAttempt',
+      cfStepName: 'cfStepName',
+      cfPipelineName: 'cfPipelineName',
+      cfPipelineTriggerId: 'cfPipelineTriggerId',
+      // pull request variables
+      cfPullRequestId: 'cfPullRequestId',
+      cfPullRequestIsFork: 'cfPullRequestIsFork',
+      cfPullRequestNumber: 'cfPullRequestNumber',
+      cfPullRequestTarget: 'cfPullRequestTarget',
+    })
+
+    expectsCommitParams({
+      sha: 'cfRevision',
+      branch: 'cfBranch',
+      message: 'cfCommitMessage',
+      authorName: 'cfCommitAuthor',
+    })
+  })
+
  it('drone', () => {
    resetEnv = mockedEnv({
      DRONE: 'true',
--- a/yarn.lock
+++ b/yarn.lock
@@ -27685,7 +27685,7 @@ ramda@0.25.0, ramda@^0.25.0:
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
  integrity sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==

-ramda@0.26.1, ramda@^0.26.0, ramda@^0.26.1, ramda@~0.26.1:
+ramda@0.26.1, ramda@^0.26.0, ramda@^0.26.1:
  version "0.26.1"
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
@@ -27695,16 +27695,16 @@ ramda@0.27.0:
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.0.tgz#915dc29865c0800bf3f69b8fd6c279898b59de43"
  integrity sha512-pVzZdDpWwWqEVVLshWUHjNwuVP7SfcmPraYuqocJp1yo2U1R7P+5QAfDhdItkuoGqIBnBYrtPp7rEPqDn9HlZA==

+ramda@0.27.1, ramda@^0.27.1, ramda@~0.27.1:
+  version "0.27.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
+  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
+
 ramda@0.9.1:
  version "0.9.1"
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.9.1.tgz#cc914dc3a82c608d003090203787c3f6826c1d87"
  integrity sha1-zJFNw6gsYI0AMJAgN4fD9oJsHYc=

-ramda@^0.27.1:
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
-  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
-
 randexp@0.4.6:
  version "0.4.6"
  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"