Update Cypress to version 10 (#6146)

* Run Cypress migration scripts; Update failing parts

* Move env var assignments to Cypress configuration; Correct env patterns

* Correct imports within the Cypress tests

* Correct TS linting configuration errors after update

* Return directly spec path in cypress configuration

cypress.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'cypress';
+require('dotenv').config();
+
+/**
+ * Filter test spec paths based on env var configuration
+ * @returns
+ */
+const getSpecPattern = (): string[] => {
+  const optionalPaths = [
+    {
+      path:   'cypress/e2e/tests/setup/**/*.spec.ts',
+      active: process.env.TEST_SKIP_SETUP !== 'true'
+    }
+  ];
+  const activePaths = optionalPaths.filter(({ active }) => Boolean(active)).map(({ path }) => path);
+
+  return [
+    ...activePaths,
+    'cypress/e2e/tests/pages/**/*.spec.ts',
+    'cypress/e2e/tests/navigation/**/*.spec.ts'
+  ];
+};
+const baseUrl = (process.env.TEST_BASE_URL || 'https://localhost:8005').replace(/\/$/, '');
+
+export default defineConfig({
+  defaultCommandTimeout: 60000,
+  trashAssetsBeforeRuns: true,
+  env:                   {
+    baseUrl,
+    username:          process.env.TEST_USERNAME,
+    password:          process.env.TEST_PASSWORD,
+    bootstrapPassword: process.env.CATTLE_BOOTSTRAP_PASSWORD,
+  },
+  e2e:                   {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.ts')(on, config);
+    },
+    experimentalSessionAndOrigin: true,
+    specPattern:                  getSpecPattern(),
+    baseUrl
+  },
+});

cypress.json

@@ -1,10 +0,0 @@
-{
-  "experimentalSessionAndOrigin": true,
-  "trashAssetsBeforeRuns": true,
-  "testFiles": [
-    "tests/setup/**/*.spec.ts",
-    "tests/pages/**/*.spec.ts",
-    "tests/navigation/**/*.spec.ts"
-  ],
-  "defaultCommandTimeout": 60000
-}

cypress/e2e/po/components/async-button.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class AsyncButtonPo extends ComponentPo {
   click(): Cypress.Chainable {

cypress/e2e/po/components/checkbox-input.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class CheckboxInputPo extends ComponentPo {
   /**

cypress/e2e/po/components/component.po.ts

@@ -1,4 +1,4 @@
-import { CypressChainable } from '@/cypress/integration/po/po.types';
+import { CypressChainable } from '@/cypress/e2e/po/po.types';
 
 export default class ComponentPo {
   public self: () => CypressChainable

cypress/e2e/po/components/form.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class FormPo extends ComponentPo {
   /**

cypress/e2e/po/components/labeled-input.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class LabeledInputPo extends ComponentPo {
   /**

cypress/e2e/po/components/password.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class PasswordPo extends ComponentPo {
   /**

cypress/e2e/po/components/radio-group-input.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class RadioGroupInputPo extends ComponentPo {
   /**

cypress/e2e/po/components/radio-input.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class RadioInputPo extends ComponentPo {
   /**

cypress/e2e/po/pages/home.po.ts

@@ -1,4 +1,4 @@
-import PagePo from '@/cypress/integration/po/pages/page.po';
+import PagePo from '@/cypress/e2e/po/pages/page.po';
 
 export default class HomePagePo extends PagePo {
   static url: string = '/home'

cypress/e2e/po/pages/login-page.po.ts

@@ -1,7 +1,7 @@
-import PagePo from '@/cypress/integration/po/pages/page.po';
-import LabeledInputPo from '@/cypress/integration/po/components/labeled-input.po';
-import AsyncButtonPo from '@/cypress/integration/po/components/async-button.po';
-import PasswordPo from '~/cypress/integration/po/components/password.po';
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import PasswordPo from '@/cypress/e2e/po/components/password.po';
 
 export class LoginPagePo extends PagePo {
   static url: string = '/auth/login'

cypress/e2e/po/pages/page.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class PagePo extends ComponentPo {
   constructor(private path: string, selector: string = '.dashboard-root') {

cypress/e2e/po/pages/rancher-setup-auth-verify.po.ts

@@ -1,9 +1,9 @@
-import PagePo from '@/cypress/integration/po/pages/page.po';
-import LabeledInputPo from '@/cypress/integration/po/components/labeled-input.po';
-import CheckboxInputPo from '@/cypress/integration/po/components/checkbox-input.po';
-import RadioGroupInputPo from '@/cypress/integration/po/components/radio-group-input.po';
-import AsyncButtonPo from '@/cypress/integration/po/components/async-button.po';
-import PasswordPo from '~/cypress/integration/po/components/password.po';
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
+import CheckboxInputPo from '@/cypress/e2e/po/components/checkbox-input.po';
+import RadioGroupInputPo from '@/cypress/e2e/po/components/radio-group-input.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import PasswordPo from '@/cypress/e2e/po/components/password.po';
 
 export class RancherSetupAuthVerifyPage extends PagePo {
   static url: string = '/auth/login'

cypress/e2e/po/pages/rancher-setup.po.ts

@@ -1,7 +1,7 @@
-import PagePo from '@/cypress/integration/po/pages/page.po';
-import AsyncButtonPo from '@/cypress/integration/po/components/async-button.po';
-import FormPo from '@/cypress/integration/po/components/form.po';
-import PasswordPo from '~/cypress/integration/po/components/password.po';
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import FormPo from '@/cypress/e2e/po/components/form.po';
+import PasswordPo from '@/cypress/e2e/po/components/password.po';
 
 export class RancherSetupPagePo extends PagePo {
   static url: string = '/auth/login'

cypress/e2e/po/side-bars/burger-side-menu.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class BurgerMenuPo extends ComponentPo {
   constructor() {

cypress/e2e/po/side-bars/page-actions.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class PageActionsPo extends ComponentPo {
   constructor() {

cypress/e2e/po/side-bars/product-side-nav.po.ts

@@ -1,4 +1,4 @@
-import ComponentPo from '@/cypress/integration/po/components/component.po';
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class ProductNavPo extends ComponentPo {
   constructor() {

cypress/e2e/tests/navigation/page-actions.spec.ts

@@ -1,5 +1,5 @@
-import PageActions from '@/cypress/integration/po/side-bars/page-actions.po';
-import HomePagePo from '@/cypress/integration/po/pages/home.po';
+import PageActions from '@/cypress/e2e/po/side-bars/page-actions.po';
+import HomePagePo from '@/cypress/e2e/po/pages/home.po';
 
 describe('Page Actions', () => {
   beforeEach(() => {

cypress/e2e/tests/navigation/side-nav/main-side-menu.spec.ts

@@ -1,5 +1,5 @@
-import HomePagePo from '@/cypress/integration/po/pages/home.po';
-import BurgerMenuPo from '@/cypress/integration/po/side-bars/burger-side-menu.po';
+import HomePagePo from '@/cypress/e2e/po/pages/home.po';
+import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
 
 Cypress.config();
 describe('Side Menu: main', () => {

cypress/e2e/tests/navigation/side-nav/product-side-nav.spec.ts

@@ -1,6 +1,6 @@
-import HomePagePo from '@/cypress/integration/po/pages/home.po';
-import BurgerMenuPo from '@/cypress/integration/po/side-bars/burger-side-menu.po';
-import ProductNavPo from '@/cypress/integration/po/side-bars/product-side-nav.po';
+import HomePagePo from '@/cypress/e2e/po/pages/home.po';
+import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
+import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
 
 Cypress.config();
 describe('Side navigation: Cluster ', () => {

cypress/e2e/tests/pages/home.spec.ts

@@ -1,6 +1,6 @@
-import HomePagePo from '@/cypress/integration/po/pages/home.po';
-import BurgerMenuPo from '@/cypress/integration/po/side-bars/burger-side-menu.po';
-import PageActions from '@/cypress/integration/po/side-bars/page-actions.po';
+import HomePagePo from '@/cypress/e2e/po/pages/home.po';
+import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
+import PageActions from '@/cypress/e2e/po/side-bars/page-actions.po';
 
 describe('Home Page', () => {
   beforeEach(() => {

cypress/e2e/tests/pages/login.spec.ts

@@ -1,4 +1,4 @@
-import { LoginPagePo } from '@/cypress/integration/po/pages/login-page.po';
+import { LoginPagePo } from '@/cypress/e2e/po/pages/login-page.po';
 
 describe('Local authentication', () => {
   it('Log in with valid credentials', () => {

cypress/e2e/tests/setup/rancher-setup.spec.ts

@@ -1,5 +1,5 @@
-import { RancherSetupPagePo } from '@/cypress/integration/po/pages/rancher-setup.po';
-import { RancherSetupAuthVerifyPage } from '@/cypress/integration/po/pages/rancher-setup-auth-verify.po';
+import { RancherSetupPagePo } from '@/cypress/e2e/po/pages/rancher-setup.po';
+import { RancherSetupAuthVerifyPage } from '@/cypress/e2e/po/pages/rancher-setup-auth-verify.po';
 
 describe('Rancher setup', () => {
   it('Requires initial setup', () => {

cypress/plugins/index.ts

@@ -11,39 +11,9 @@ module.exports = (
   on: Cypress.PluginEvents,
   config: Cypress.PluginConfigOptions
 ) => {
-  // Disabled due freezing issues related to the CI machine resources
-  // deletePassedVideos(on);
-
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  const url = process.env.TEST_BASE_URL || 'https://localhost:8005';
-
-  config.baseUrl = url.replace(/\/$/, '');
-
-  config.env.username = process.env.TEST_USERNAME;
-  config.env.password = process.env.TEST_PASSWORD;
-  config.env.bootstrapPassword = process.env.CATTLE_BOOTSTRAP_PASSWORD;
-  config.env.skip_setup = process.env.TEST_SKIP_SETUP;
-  config.testFiles = skipSetup(config);
-
   return config;
 };
 
-/**
- * Remove setup files from the Cypress config
- * @param config Cypress config file
- * @returns
- */
-const skipSetup = (config: Cypress.PluginConfigOptions) => {
-  if (config.env.skip_setup === 'true') {
-    return (config.testFiles as string[]).filter(
-      path => !path.includes('tests/setup/')
-    );
-  } else {
-    return config.testFiles;
-  }
-};
-
 /**
  * Only upload videos for specs with failing
  * Run this function after every spec to delete passed tests video

cypress/support/commands.ts

@@ -1,4 +1,4 @@
-import { LoginPagePo } from '@/cypress/integration/po/pages/login-page.po';
+import { LoginPagePo } from '@/cypress/e2e/po/pages/login-page.po';
 
 /**
  * Login local authentication, including first login and bootstrap if not cached

package.json

@@ -125,8 +125,8 @@
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
-    "@cypress/vue": "^3.1.1",
-    "@cypress/webpack-dev-server": "^1.8.4",
+    "@cypress/vue": "^4.0.0",
+    "@cypress/webpack-dev-server": "^2.0.0",
     "@nuxt/types": "2.14.6",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config-typescript": "^6.0.1",
@@ -153,7 +153,7 @@
     "core-js": "^3.20.3",
     "css-loader": "4.3.0",
     "csv-loader": "^3.0.3",
-    "cypress": "^9.6.0",
+    "cypress": "^10.3.1",
     "eslint": "^7.32.0",
     "eslint-config-standard": ">=12.0.0",
     "eslint-import-resolver-node": "0.3.4",

tsconfig.json

@@ -3,5 +3,14 @@
   "compilerOptions": {
     "types": ["@types/node", "@types/jest", "@nuxt/types"]
   },
-  "exclude": ["node_modules", ".nuxt", "dist", "dist-pkg", "cypress", "shell/creators"]
+  "exclude": [
+    "node_modules",
+    ".nuxt",
+    "dist",
+    "dist-pkg",
+    "cypress",
+    "shell/creators",
+    "cypress",
+    "./cypress.config.ts"
+  ]
 }