Issue with e2e.js file format in Cypress Support

I am trying to save Cypress screenshots into a report using a support file as recommended in the documentation. However, I keep encountering an error:

Your supportFile is missing or invalid: support/e2e.js

The supportFile must be a .js, .ts, .coffee file or be supported by your preprocessor plugin (if configured).

Fix your support file, or set supportFile to false if a support file is not necessary for your project.

If you have just renamed the extension of your supportFile, restart Cypress.

https://on.cypress.io/support-file-missing-or-invalid

The relevant code snippet is:

import addContext from "mochawesome/addContext"

Cypress.on("test:after:run", (test, runnable) => {  
    if (test.state === "failed") {    
        const screenshot =`assets/${Cypress.spec.name}/${runnable.parent.title} -- ${test.title} (failed) (attempt 2).png`;    
        addContext({ test }, screenshot);  
    }
});

The support file name is support/e2e.js and it is included in cypress.config.ts

const { defineConfig } = require('cypress')
module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://oft-dev.ep-dev.prom.local',
    browser: 'chrome', // Set the browser here
    supportFile: 'support/e2e.js',
  },
  
  experimentalStudio: true,
  reporter: 'cypress-multi-reporters',
  //reporter: 'junit', // Set the reporter here
  reporterOptions: {
    configFile: 'reporter.config.json',
  },  
});

My tests are in Typescript. Do I also need to create the support file in Typescript? If so, what would be the syntax for it? I am confused.

Answer №1

If you're facing issues, try setting the supportFile option to cypress/support/e2e.js, or simply remove it to use the default value.

Check out Configuration - e2e for more details.

You can also find the code for cypress.config.ts in Typescript on that page

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://oft-dev.ep-dev.prom.local',
    browser: 'chrome', // Specify your browser preference here
    supportFile: 'cypress/support/e2e.{js,jsx,ts,tsx}',
  },
})

Note: There is a difference between using export default defineConfig({ for Typescript and module.exports = defineConfig({ for Javascript, which may be causing your issue.

By including the options {js,jsx,ts,tsx}, you cover all possible file types you might need.

While using the js extension should work in a Typescript project, if problems persist, consider changing the support file extension to e2e.ts - although valid, there could be warnings about parameters being typed as any.


Don't forget to install Mochawsome types in your project as well,

npm install --save-dev @types/mochawesome

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

Using JavaScript to control the state of a button: enable or

In the process of creating a basic HTML application to collect customer information and store it in a database, I have encountered a specific user interface challenge. Once the user logs into their profile, they should see three buttons. Button 1 = Print ...

New update: Adjusting the chart by using the slider to modify the date values on the x-axis

Update: I have made changes to the question, the issue with values not appearing on the x-axis has been resolved. Now, as the slider is moved, the data on the graph remains constant and I can see changing x values. I am currently working on incorporating ...

Error in Mongoose Schema Configuration Detected in NestJS App

I'm currently developing an e-commerce application using NestJS and MongoDB with Mongoose. I've been facing an issue while trying to implement a user's shopping cart in the application. The error message I keep encountering is as follows: ...

What is the most effective method for embedding a Kotlin program into a website?

I have created a combat simulation tool in Kotlin for an online gaming community. Users can input the combat levels of two players, choose the number of duels to simulate, and then initiate the simulation which will provide win percentages and other stats. ...

What is the best way to download a file with a specific name using Angular and TypeScript?

Greetings! Below is a snippet of code from my Angular component: this.messageHistoryService.getMessageHistoriesCSV1(msgHistoryRequest).subscribe( (data) => { console.log(data.messageHistoryBytes); let file = new Blob( [data.messageHistoryBytes ...

Managing state changes with a slider in ReactJS

I am currently working with the Foundation slider found at this link: click for doc. To access the slider's current value, they recommend using a hidden input like this: <div class="slider" data-slider data-initial-start="50" data-end="200"> & ...

Utilize strings as object keys in JavaScript

Let's say I have the following variables: var myKey = "This_is_my_key" var myObj = {"This_is_my_key" : true} What is the proper way to access myObj using the key myKey? ...

Using VueJS: accessing this.$store within component data property

I am interested in utilizing the data from my Vuex store in both my app and template. My Vuex store: var Vue = require('vue'); var Vuex = require('vuex'); Vue.use(Vuex) let store = new Vuex.Store({ state: { user: ...

Tips for canceling an http request in angularjs when the requesting controller has exited its scope

Developed a custom angularjs application with ng-view for loading four different modules using route provider. Each module makes HTTP requests as shown below: var requestManager = { "locations": {}, "employees": {}, "items": {}, "templates ...

Challenge: Visual Studio 2015 MVC6 and Angular 2 compilation issue - Promise name not found

Initially, I've made sure to review the following sources: Issue 7052 in Angular's GitHub Issue 4902 in Angular's GitHub Typescript: Cannot find 'Promise' using ECMAScript 6 How to utilize ES6 Promises with Typescript? Visual ...

Attention Needed - Certain vulnerabilities necessitate manual review for resolution

npm audit === Security Report from npm audit === # You have 1 vulnerability that can be resolved by running `npm update terser-webpack-plugin --depth 3` Severity Issue ...

Is it permissible to make alterations to npm modules for node.js and then share them publicly?

I have made modifications to a module called scribe.js that I use in my own module, which is published on npm. Instead of using the original module as a dependency for my module, I would like to include my modified version. I am unsure about the legal impl ...

What is the best way to integrate retrieved data into Next.js with TypeScript?

Hello everyone! I recently started working with Next.js and TypeScript. Currently, I'm attempting to use the map() function on data fetched from JsonPlaceholder API. Here is my implementation for getStaticProps: export const getStaticProps: GetStatic ...

Can you determine the sequence in which these code statements are placed on the call stack?

I am a beginner in the world of Javascript and currently seeking to grasp a better understanding of how the JS execution engine operates. I am aware that any asynchronous code statement is pushed onto the call stack and then promptly removed, allowing it t ...

Using node-fetch version 3.0.0 with jest results in a SyntaxError stating that import statements cannot be used outside a module

Recently, I've been updating my API to utilize node-fetch 3.0.0. One major change highlighted in their documentation is that node-fetch is now a pure ESM module. Click here for more information on the changes This update caused some of my unit tests ...

Using HTML and CSS to create a Contact Form

Greetings! I have come across this contact form code: /* Custom Contact Form Styling */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: v ...

Exploring the World of TypeScript Decorators

I'm having trouble getting my custom @enumerable decorator to work properly. I followed the example in the documentation, but it's not functioning as expected. Am I overlooking something? Decorator export function enumerable(value: boolean) { ...

Interacting with HTML elements in Java programming

I am facing a challenging situation that requires some brainstorming. I would greatly appreciate any advice or guidance in the right direction. My goal is to incorporate a Google Map into my Java Swing project, with the map being specified as a URL wit ...

Various SVG paths make up segments

I have created an intricate SVG file containing 35 different paths resembling train tracks. My next step is to break down these paths into 16 segments, allowing another SVG path (train) to smoothly traverse along them. The ultimate goal is to grant users ...