Cypress E2E tests not running in CI mode on gitlab.com - javascript

Intro
We struggle to setup cypress in the CI runners of gitlab.com. We use the default blueprint from vue-cli to scaffold the project. We tried various of different gitlab.yml configurations. Currently we run out of CI minutes because we tried so many different combinations.
We tried different docker images (from here: https://github.com/cypress-io/cypress-docker-images/) and also followed the best practices from Crypress which we found here: https://gitlab.com/cypress-io/cypress-example-docker-gitlab/
We just had no luck getting it running. After spending hours of hours we are not sure if it's even possible to get Cypress running with the default setup from vue-cli.
We also created an issue on vue repo but it got closed, for reference you can see here: https://github.com/vuejs/vue/issues/10944
We filled out the default vue template for an issue report but since it's not a real "JavaScript" issue it was hard to properly fill it out. But we tried to provide as much information as possible. In the codepen you find our results. The HTML column is the output and the JS column is the YML file. I hope you can use this information somehow
Version
2.6.10
Reproduction link
https://codepen.io/usamahamed/pen/WNbpdPE
Steps to reproduce
this this the gitlab CI pipeline result including in codepen
it give this
CypressError: cy.visit() failed trying to load:
We failed looking for this file at the path:
/builds/room/web/room-ui/

Checking your .yaml file, I think your application is not running.
There is not log of application running
There is no build stage implementation
There is no start application task on the stage test-e2e > before_script
So I would like to suggest:
Check your build stage. Where you make your application start running?
Check your before_script, adding a step "npm ci" like this:
https://gitlab.com/cypress-io/cypress-example-docker-gitlab/blob/master/.gitlab-ci.yml
or
https://github.com/cypress-io/cypress-example-kitchensink/blob/master/.gitlab-ci.yml
You should also wait for your application to be running to start testing. You can use the wait-on module for this: https://github.com/jeffbski/wait-on

Related

How do I add a custom watch step to webpack in a vue app?

I'm surprised I can't find an example of this, but perhaps I'm looking in the wrong places.
I have a pretty standard Vue 2 app created with vue-cli (that is, the way to start the dev server is vue-cli-service serve). Webpack is configured in the vue.config.js file.
I want to run a script every time a particular file changes. That is, when /path/to/file/x.js changes, first run ./my-script.sh before doing the regular webpack compilation.
I'm hoping there is a built in way to do this. I'm starting to wonder if I need to create a webpack plugin, though.
(Also, I hope this doesn't complicate it but I'll be converting to Vue 3 sometime this year.)

How to reduce build time for Angular 11.1.1?

Initial build time i.e. ng serve takes around ~1mins or more.
While compiler is running, Additional changes takes around ~30sec to compile and reflect.
I tried to update to Angular 11.2.5 which has official fix but that's throwing some errors so I could not update.
Is there any other tested workaround to reduce compile time?
pls advise.
I found a way to do it, you just need an npx command this method claims to make your angular CLI 10 times Faster.. you should check it out.
> npx make-angular-cli-faster
Use These links for some details:
https://blog.nrwl.io/discover-how-to-make-the-angular-cli-faster-by-up-to-10-times-more-2d51d59decb9
https://www.npmjs.com/package/make-angular-cli-faster

Typeahead using NPM and MVC Core in Visual Studio 2015

I've entered the brave new world of MVC core and using NPM to get various JavaScript packages. However, I've hit a problem which I'm not entirely sure what the best option to solve is. Just to set the scene, I've got a gulpfile which is copying JS from various NPM packages in my project (such as jQuery and bootstrap etc...) to the 'wwwroot/lib' folder.
I now want to add a typeahead 'autocomplete' search box to a particular view, so I added typeahead to the package.json file and updated my gulpfile to copy the additional *.js files to 'wwwroot/lib'. All fine so far, the problem is when I debug my project and open that particular page I get an error where the typeahead.js file has some code at the beginning:-
require('xtend')
I wasn't aware of this command in JavaScript, but a quick search on the internet reveals this is part of JS when run on 'node' or node.js?
I have not used 'node' before (yes, ignoring the fact I'm using NPM to get packages - I only ended up doing that due to a Visual Studio bug in how Bower works) so the question is how do I now get (this particular) typeahead to run within a browser? So I figure options are:-
1) just manually download typeahead instead - but is that not defeating the point of having all these package managers in the first place?
2) start using Bower again (don't think the 'version' bug has been fixed yet)
3) use something to 'fake' the node 'require' commands so that it will work in browser
4) something else...
I've seen a few things that may solve this problem on the internet, but I didn't want to spend ages sorting out a fix which may be the complete wrong way of doing it. Has anyone any suggestions for the best route to follow?
Scratch that, I found another typeahead package on NPM called 'typeahead.js' instead of 'typeahead' and this is just standard JS no NODE stuff. Works perfectly in browser

How do I use wdio.conf.js?

I'm trying to use webdriverio with the jasmine test framework. I can run my test by typing jasmine at the command line. However, when I do wdio wdio.conf.js it opens a bunch of extra browsers which don't do anything. I'm just wondering what the point of the wdio.conf.js file is when I can just run jasmine at the commandline. Ultimately it's the same thing, right? However, I can't get the wdio.conf.js file to work in the same manner so it's useless to me. Perhaps I'm not managing the browser clients correctly but I don't see any guidelines on how this is commonly done. I read the documentation but it's pretty vague beyond auto-generating the wdio.conf file so that 'everything just works'. Am I supposed to use grunt or gulp to run my tests or are those tools separate from the wdio.conf idea?
I'm Just trying to get my head around all these different tools. All I need to do is make multiple automated tests to test a website. Thanks for your help.
This may help, https://github.com/webdriverio/webdriverio/blob/master/examples/standalone/webdriverio.with.jasmine.spec.js
I asked a similar question, which was answered by the main contributor here, Running WebdriverIO 'spec' tests as node file

Error 'Path reservation conflict' while starting meteor application

I've been working on a project for a while,
and when i tried adding bootstrap-timepicker from github using the following command :
"$ bower install bootstrap-timepicker"
i recieved an error saying "Path reservation conflict" while trying to start the meteor application, as shown bellow.
i tried uninstalling the pakage but then the error just change to a different path: :
"Path reservation conflict: packages/bower/jquery/jquery.js:
what does that error mean, and how can it be fixed?
and for the moment how can i atleast make it work, even without the bootstrap-timepicker, so i can carry on devloping?
=> Started proxy
=> Started MongoDB.
/home/varzager/.meteor/packages/meteor-tool/.1.0.40.1lk318s++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/dev_bundle/lib/node_modules/fibers/future.js:173
throw(ex);^
Error: Path reservation conflict: packages/bower/angular/angular.js
at [object Object]._.extend.reserve (/home/varzager/.meteor/packages/meteor-tool/.1.0.40.1lk318s++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/tools/builder.js:241:15)
at /home/varzager/.meteor/packages/meteor-tool/.1.0.40.1lk318s++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/tools/bundler.js:1150:15
at /home/varzager/.meteor/packages/meteor-tool/.1.0.40.1lk318s++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/tools/bundler.js:1142:11
Yes, this is a meteor-bower package problem.
It means that few different packages are bringing jquery through meteor-bower. would be good if you specify what packages your app uses (with including the .meteor/versions file)
3 options I can think about:
What version of meteor-bower do you use? They released new versions recently and it might address your problem. if not, I would anyway open an issue in their repo.
If it doesn't resolve just by updating, take a look at the package readme file, they explain how to install the modules in different locations with the .bowerrc to prevent collisions.
As Ramsay said, I've looked into bootstrap-timepicker meteor package's source code and it just bring the files so you can simply use that and it won't create conflicts for you and will definitely be easier.
Hope it helps

Categories

Resources