Migrate existing Cypress tests to Cypress + Cucumber

.ci/end2end.groovy

@@ -103,8 +103,8 @@ pipeline {
       post {
         always {
           dir("${BASE_DIR}"){
-            archiveArtifacts(allowEmptyArchive: false, artifacts: "${CYPRESS_DIR}/screenshots/**,${CYPRESS_DIR}/videos/**,${CYPRESS_DIR}/*e2e-tests.xml")
-            junit(allowEmptyResults: true, testResults: "${CYPRESS_DIR}/*e2e-tests.xml")
+            archiveArtifacts(allowEmptyArchive: false, artifacts: "${CYPRESS_DIR}/**/screenshots/**,${CYPRESS_DIR}/**/videos/**,${CYPRESS_DIR}/**/test-results/*e2e-tests.xml")
+            junit(allowEmptyResults: true, testResults: "${CYPRESS_DIR}/**/test-results/*e2e-tests.xml")
           }
           dir("${APM_ITS}"){
             sh 'docker-compose logs > apm-its.log || true'

src/dev/ci_setup/setup_env.sh

@@ -168,4 +168,4 @@ if [[ -d "$ES_DIR" && -f "$ES_JAVA_PROP_PATH" ]]; then
   export JAVA_HOME=$HOME/.java/$ES_BUILD_JAVA
 fi
 
-export CI_ENV_SETUP=true
+export CI_ENV_SETUP=true

x-pack/legacy/plugins/apm/cypress/.gitignore

@@ -0,0 +1,4 @@
+cypress/ingest-data/events.json
+cypress/screenshots/*
+
+cypress/test-results

x-pack/legacy/plugins/apm/cypress/cypress.json

@@ -3,16 +3,17 @@
   "video": false,
   "trashAssetsBeforeRuns": false,
   "fileServerFolder": "../",
-  "fixturesFolder": "./fixtures",
-  "integrationFolder": "./integration",
-  "pluginsFile": "./plugins/index.js",
-  "screenshotsFolder": "./screenshots",
-  "supportFile": "./support/index.ts",
-  "videosFolder": "./videos",
+  "fixturesFolder": "./cypress/fixtures",
+  "integrationFolder": "./cypress/integration",
+  "pluginsFile": "./cypress/plugins/index.js",
+  "screenshotsFolder": "./cypress/screenshots",
+  "supportFile": "./cypress/support/index.js",
+  "videosFolder": "./cypress/videos",
   "useRelativeSnapshots": true,
   "reporter": "junit",
   "reporterOptions": {
-    "mochaFile": "[hash]-e2e-tests.xml",
+    "mochaFile": "./cypress/test-results/[hash]-e2e-tests.xml",
     "toConsole": false
-  }
+  },
+  "testFiles": "**/*.{feature,features}"
 }

x-pack/legacy/plugins/apm/cypress/cypress/integration/apm.feature

@@ -0,0 +1,9 @@
+Feature: APM
+
+  Background:
+    Given a user browses the APM UI application
+    When the user inspects the opbeans-go service
+
+  Scenario: Transaction duration charts
+    Then should redirect to correct path with correct params
+    And should have correct y-axis ticks

x-pack/legacy/plugins/apm/cypress/integration/snapshots.js → x-pack/legacy/plugins/apm/cypress/cypress/integration/snapshots.js

@@ -8,5 +8,12 @@ module.exports = {
       }
     }
   },
-  "__version": "3.4.1"
+  "__version": "3.8.3",
+  "APM": {
+    "Transaction duration charts": {
+      "1": "3.7 min",
+      "2": "1.8 min",
+      "3": "0.0 min"
+    }
+  }
 }

x-pack/legacy/plugins/apm/cypress/plugins/index.js → x-pack/legacy/plugins/apm/cypress/cypress/plugins/index.js

@@ -22,22 +22,8 @@ const wp = require('@cypress/webpack-preprocessor');
 const fs = require('fs');
 
 module.exports = on => {
-  // add typescript support
   const options = {
-    webpackOptions: {
-      resolve: {
-        extensions: ['.ts', '.tsx', '.js']
-      },
-      module: {
-        rules: [
-          {
-            test: /\.tsx?$/,
-            loader: 'ts-loader',
-            options: { transpileOnly: true }
-          }
-        ]
-      }
-    }
+    webpackOptions: require('../webpack.config.js')
   };
   on('file:preprocessor', wp(options));
 

x-pack/legacy/plugins/apm/cypress/cypress/support/commands.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

x-pack/legacy/plugins/apm/cypress/cypress.d.ts → x-pack/legacy/plugins/apm/cypress/cypress/support/index.d.ts

@@ -1,9 +1,18 @@
+/// <reference types="Cypress" />
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
 
+// typically custom commands are added in this support folder
+// so it makes sense to put their TypeScript definitions here
+// from the JavaScript specs loads this file using
+// the triple slash "reference" comment like this:
+//
+// /// <reference path="../support/index.d.ts" />
+
 declare namespace Cypress {
   interface Chainable<Subject> {
     snapshot: () => {};

x-pack/legacy/plugins/apm/cypress/cypress/support/index.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// @ts-ignore
+import { register } from '@cypress/snapshot';
+
+register();

x-pack/legacy/plugins/apm/cypress/cypress/support/step_definitions/apm.ts

@@ -0,0 +1,48 @@
+/// <reference types="Cypress" />
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { loginAndWaitForPage } from '../../integration/helpers';
+
+const { Given, When, Then } = require('cypress-cucumber-preprocessor/steps');
+
+Given(`a user browses the APM UI application`, () => {
+  // open service overview page
+  loginAndWaitForPage(`/app/apm#/services`);
+});
+
+When(`the user inspects the opbeans-go service`, () => {
+  // click opbeans-go service
+  cy.get(':contains(opbeans-go)')
+    .last()
+    .click({ force: true });
+});
+
+Then(`should redirect to correct path with correct params`, () => {
+  cy.url().should('contain', `/app/apm#/services/opbeans-go/transactions`);
+  cy.url().should('contain', `transactionType=request`);
+});
+
+Then(`should have correct y-axis ticks`, () => {
+  const yAxisTick =
+    '[data-cy=transaction-duration-charts] .rv-xy-plot__axis--vertical .rv-xy-plot__axis__tick__text';
+
+  cy.get(yAxisTick)
+    .eq(2)
+    .invoke('text')
+    .snapshot();
+
+  cy.get(yAxisTick)
+    .eq(1)
+    .invoke('text')
+    .snapshot();
+
+  cy.get(yAxisTick)
+    .eq(0)
+    .invoke('text')
+    .snapshot();
+});

x-pack/legacy/plugins/apm/cypress/cypress/webpack.config.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+module.exports = {
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  node: { fs: 'empty', child_process: 'empty', readline: 'empty' },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      },
+      {
+        test: /\.feature$/,
+        use: [
+          {
+            loader: 'cypress-cucumber-preprocessor/loader'
+          }
+        ]
+      },
+      {
+        test: /\.features$/,
+        use: [
+          {
+            loader: 'cypress-cucumber-preprocessor/lib/featuresLoader'
+          }
+        ]
+      }
+    ]
+  }
+};

x-pack/legacy/plugins/apm/cypress/package.json

@@ -5,17 +5,19 @@
   "license": "MIT",
   "scripts": {
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:run": "cypress run --spec **/*.feature"
   },
   "dependencies": {
     "@cypress/snapshot": "^2.1.3",
     "@cypress/webpack-preprocessor": "^4.1.0",
     "@types/js-yaml": "^3.12.1",
+    "@types/node": "^10.12.11",
     "cypress": "^3.5.0",
+    "cypress-cucumber-preprocessor": "^2.0.1",
     "js-yaml": "^3.13.1",
     "p-limit": "^2.2.1",
     "ts-loader": "^6.1.0",
-    "typescript": "3.7.2",
+    "typescript": "3.7.5",
     "webpack": "^4.40.2"
   }
 }