Tests using Cypress for end-to-end testing are failing to execute in continuous integration mode on gitlab.com

Challenges with Setting Up Cypress in Gitlab CI

We have been facing difficulties setting up Cypress in the CI runners of gitlab.com using the default blueprint from vue-cli to scaffold the project. Despite trying various configurations in the gitlab.yml file and different docker images as recommended by Crypress, we have not been successful so far.

After exhausting our CI minutes due to numerous failed attempts, we are starting to doubt if it's even feasible to get Cypress running with the default setup from vue-cli.

We also reached out on the vue repo for assistance, but unfortunately, our issue got closed (reference: https://github.com/vuejs/vue/issues/10944). We provided detailed information in a customized issue report template, though it was challenging since it's not a conventional "JavaScript" problem. Our efforts to communicate the issue via Codepen did not yield any positive outcome either.

Software Version

2.6.10

Reproduction Link

https://codepen.io/usamahamed/pen/WNbpdPE

Steps Taken and Error Encountered

The results of our Gitlab CI pipeline attempt can be seen in the codepen linked above, where an error message indicates a failure to load a specific file path within the project structure.

Answer №1

After reviewing your .yaml file, it appears that your application is not currently running.

  1. No logs indicate the application is running
  2. The build stage has not been implemented
  3. The start application task within the stage test-e2e > before_script is missing

Here are some suggestions:

  1. Verify the build stage and ensure your application starts properly
  2. Add a step "npm ci" in your before_script section like this:

or https://github.com/cypress-io/cypress-example-kitchensink/blob/master/.gitlab-ci.yml

Make sure to wait for the application to be fully running before starting the testing process. You can use the wait-on module for this: https://github.com/jeffbski/wait-on

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

Display various React components for widgets

I am looking to display multiple instances of a widget in html. I have 3 divs with the same id, each with different attributes, and I want to render my react component three times on the page. Currently, I am only able to display the first component. Here ...

Notification within the conditional statement in React JS

I am working on validating phone number input within a React JS component using an if/else statement. If the user enters letters instead of numbers, I want to display a message saying "please check phone number". While I have been able to create a function ...

Initialize the Vuex state upon app startup according to the route parameters

For my Vue app, I have numerous routes that contain a 'tenantId' parameter. Upon the initial load of the app, I need to extract the 'tenantId' value from the route, fetch data from an API, and set up the Vuex store accordingly. Since t ...

Guide on converting this function into a computed property within Vue

Is it possible to concatenate a fixed directory path, which is defined in the data property, with a file name that is determined using v-for? I encountered an issue when attempting to do this using a computed property. The error message displayed was: ...

Selection pseudo selectors for tooltips are a great way to provide additional

Can someone explain how tooltips change on Medium.com when you double click a word or sentence to reveal options like share and edit? https://i.stack.imgur.com/0EVmH.png ...

During bundling, utilize an npm script to copy the package.json file to the dist directory

Currently, I am facing a challenge while trying to enhance my npm bundle script. Although the initial part is functioning smoothly, I am encountering difficulties in including three additional files along with the bundle. At present, my script looks like ...

JSON function invocation is failing to load

This is my JavaScript script, When I call the function calculate(), the JSON method ConvertDataTabletoString() only gets called once, when I load the page. I want the method to be called every 5 seconds. I am calling a VB.NET function in .aspx. How can ...

MongoDB error codes and their associated HTTP status codes are important for developers to understand

When a new user attempts to sign up with an existing user account, MongoDb triggers a 11000 error code In Express, handling this scenario can be done as follows: async function signup(req, res, next){ try{ // perform some actions }catch(err){ i ...

Finding differences between two 24-hour format times using moment.js

Is there a way to compare two times in 24-hour format using the code below? $("#dd_start_timing, #dd_end_timing").on('keyup change keydown', function() { var DutyDayStartTime = $("#dd_start_timing").val().trim();// 13:05 var ...

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

Discovering the culprit causing a freeze on your page: Uncovering the tool or technique to identify the problematic

What is the best tool to identify resource-heavy or infinite loop JavaScript/jQuery scripts? I am currently experiencing issues with a specific template: When I open this page on Firefox 46.0.1, it freezes after a few minutes. I am having trouble pinpoin ...

Utilizing Bootstrap and Javascript to efficiently handle multiple forms

My website uses Bootstrap for layout, and I need to submit a form that is duplicated for different screen sizes - one for large layouts and another for mobile. However, both forms go to the same endpoint, so I have to give them unique IDs. <div class=&q ...

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

Is there a way to customize the color of specific sections on a dygraph chart?

I am looking to incorporate dygraphs into my website, but I need help with displaying a specific background color in certain parts of the chart. For example, I want the chart to show green during daylight hours. Can you assist me in achieving this? ...

Node-RED experiences crashes while attempting to make HTTP requests to access a web service

I'm currently facing a challenge in creating a node that can make web service calls. The tools I'm using are: Node-RED version: v0.17.5 Node.js version: v8.4.0 An exception is being thrown, and here's the error message: node-red_1 ...

How to sort WordPress RSS feed in alphabetical order using JavaScript

Currently using WP, but feeling limited due to restricted access to PHP and plugins. Searching for a JAVASCRIPT code solution to fetch RSS feed from a URL and organize the feed titles in ALPHABETICAL order. The JS code can be inserted into the footer and ...

Implementing Material UI Slider component to update state upon mouse release, enabling real-time sliding functionality

Is there a way to update the new state only upon mouse release for a Material UI slider, while still allowing real-time tracking of the slide? Material UI offers two events: onChange and onChangeCommitted. The latter gives the desired end result, but the s ...

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

I am unsure about implementing the life cycle in Svelte.js

Unknown Territory I am not well-versed in front-end development. Desire to Achieve I aim to utilize the lifecycle method with SvelteJS. Error Alert An error has occurred and the lifecycle method is inaccessible: ERROR in ./node_modules/svelte/index.m ...