[Cypress Cucumber] Migrate Cypress config to TypeScript, rework on limitation workaround (#773)

* Migrate Cypress config to TypeScript, rework `on` limitation workaround

* update test file to ts

* update config file location

* update deps in saucectl config for typescript

* Move test dependencies to devDependencies

---------

Co-authored-by: Logan Graham <[email protected]>

Author: omacranger

cypress-cucumber/.sauce/config.yml

@@ -10,13 +10,17 @@ sauce:
     build: Visual Demo
 cypress:
   version: 13.13.3 # See https://docs.saucelabs.com/web-apps/automated-testing/cypress/#supported-testing-platforms for a list of supported versions.
-  configFile: "cypress.config.js"
+  configFile: "cypress.config.ts"
 
 npm:
   packages:
     "@saucelabs/cypress-visual-plugin": "^0.6.3"
     "@badeball/cypress-cucumber-preprocessor": "^20.1.2"
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.2"
+    "typescript": "^5.4.3"
+    "cypress-on-fix": "^1.0.3"
+    "ts-node": "^10.9.2"
+    "@tsconfig/node18": "^18.2.4"
 
 rootDir: ./
 suites:
@@ -36,4 +40,4 @@ artifacts:
     when: never
     match:
       - console.log
-    directory: ./artifacts/
+    directory: ./artifacts/

cypress-cucumber/cypress-on-fix.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+
+declare module "cypress-on-fix"{
+    declare function onProxy(on: Cypress.PluginEvents): Cypress.PluginEvents
+    export = onProxy;
+}

cypress-cucumber/cypress.config.js

@@ -0,0 +1,39 @@
+import { defineConfig } from 'cypress';
+import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
+import { CypressSauceVisual, DiffingMethod } from '@saucelabs/cypress-visual-plugin';
+import cypressOnFix from "cypress-on-fix";
+
+export default defineConfig({
+  e2e: {
+    saucelabs: {
+      project: process.env.GITHUB_REPOSITORY || `Cypress Visual Testing Example for ${process.env.SAUCE_USERNAME}`,
+      branch: process.env.GITHUB_REF_NAME,
+      buildName: `Cypress - Sauce Demo Test`,
+      region: 'us-west-1',
+      diffingMethod: DiffingMethod.Balanced,
+    },
+    specPattern: "cypress/**/*.feature",
+    supportFile: './cypress/support/e2e.ts',
+    setupNodeEvents: async function(cypressOn, config) {
+      // Cypress only allows a single listener for an event at a time. This package will proxy all
+      // events to all listeners instead of overwriting it. Recommended by the maintainer of the
+      // Cucumber support: https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/event-handlers.md#workaround-1--2
+
+      // Register Cypress's on listener, then use the return value to register plugin listeners
+      // instead.
+      const on = cypressOnFix(cypressOn);
+      await addCucumberPreprocessorPlugin(on, config);
+      on(
+        'file:preprocessor',
+        createBundler({
+          plugins: [createEsbuildPlugin(config)],
+        })
+      );
+
+      CypressSauceVisual.register(on, config);
+      return config;
+    },
+  },
+})

cypress-cucumber/cypress.config.ts

@@ -6,17 +6,17 @@ When('on Sauce Demo Page', () => {
   cy.visit('https://www.saucedemo.com/');
 });
 
-Then('{string} should be visible', (selector) => {
+Then('{string} should be visible', (selector: string) => {
   cy.get(selector).should('be.visible');
 });
 
-Then('I capture a screenshot named {string}', (screenshotName) => {
+Then('I capture a screenshot named {string}', (screenshotName: string) => {
   cy.sauceVisualCheck(screenshotName, {
     captureDom: true
   });
 });
 
-Then('I log in as {string}', (username) => {
+Then('I log in as {string}', (username: string) => {
   let user = Cypress.env('VISUAL_CHECK') ? 'visual_user' : 'standard_user';
   if (username != 'standard_user') {
     user = username;
@@ -25,7 +25,7 @@ Then('I log in as {string}', (username) => {
   cy.get('[data-test="password"]').type('secret_sauce').should('have.value', 'secret_sauce');
 });
 
-Then('I log in as {string} with a screenshot', (username) => {
+Then('I log in as {string} with a screenshot', (username: string) => {
   let user = Cypress.env('VISUAL_CHECK') ? 'visual_user' : 'standard_user';
   if (username != 'standard_user') {
     user = username;