My project is built using Vue.js, powered by Nuxt
I’m using Cypress to write/run tests
I’m using CircleCI (v2) to run the tests
Locally, using Cypress’s instance of the Electron browser on macOS, the tests run correctly.
On CircleCI, the tests display a blank screen.
I’ve SSHed into CircleCI after the tests have failed, and if I make a curl request to the local server at that address, the correct HTML is returned to me.
My hypothesis is that the browser is not able to run Vue.js, but without a console log it’s hard to tell.
Any ideas as either how to continue debugging, or even better, fix it?
Edit: I’ve written an extra test to use another site, and it loaded correctly, so I can confirm that everything else is working.
Edit: It’s in my Nuxt config, just going through it now to pull out the line causing the problem.
So, of course this was super annoying. I’m not sure what the chances are of this happening to somebody else, but here’s the answer to my problem:
Google Analytics
On my CI I don’t have a GA code, and it was falling back to empty string, so it wasn’t able to load the page. It didn’t show up on the sever logs as it was an issue on the client side, and it’s not yet possible to easily get client logs using Cypress (coming soon).
Interesting, Thomas,
Could you open a GitHub issue with a link to a small repo that we can try ourselves? I do not see any factors that might affect running Cypress tests against Nuxt app on Circle
Related
I have vue project which published on Digital Ocean. The main problem is when i make some changes on FileZilla it is not affect on website. How can i solve this issue?
This is not an issue per-se. This is just the way how modern web development works. Vue.js (but also Nuxt) is using a bundler right now (Webpack, Vite are the most common), hence to go to production it needs to be bundled each time you push something to it.
If you upload something via FTP or SSH and edit some source code, a bundle step will be required in order to get any changes on the actual webapp.
Backend languages may not need that, for example you could SSH into a server and change some .php file, if you F5 the page it will be updated in real time. But this is not how frontend JS code works, it needs to be optimised.
Another thing, sending code via SSH/FTP is not really a good workflow because it is not easily trackable, no version-controlled, will not trigger any build flags in case of an error etc...
The best approach is to have a git repo + some build step included in some CI.
A common platform for it is Netlify, you connect a Github repo, you tell which command to use to build the project and each time you push some code, it may do some checks/tests/optimizations/etc... via Github Actions before being released automatically to production (updated on your webapp).
This workflow have a lot of benefits as one may tell but is also de-facto, the official/regular approach for modern Web development on the frontend.
I have a React frontend and a Node backend, I've made several E2E tests with Cypress for the frontend and run them locally. I love how end to end testing allows me to catch errors in the frontend as well as on the backend! so I'd like to have a way to run them automatically when sending a PR.
I'm using bitbucket pipelines, and I've configured it to run the npm test command which works perfectly to run my unit tests, but what I still don't understand is how to be able to run my Cypress tests automatically, because I'd need to have access to the backend repository from my pipeline that runs on the frontend repo.
What I've tried
I've read the documentation and played with the example repo, but I still don't understand how could I automate running my tests, on the example both backend and frontend are on the same repository.
I'm sorry if this is a vague question, I just don't seem to get if this is even possible with bitbucket pipelines, if it's not, what other tool could help me run my Cypress test in a similar way that I do locally? (running both backend and frontend).
I've really tried to search for an answer to this, maybe it's too obvious and I'm just missing something but I don't seem to find anything on the internet about this, any help will be very appreciated!
When your frontend and backend are versioned in different repositories, then you have to check out at least one of the two repositories (e.g. the other for which the pipeline is not currently being executed) during the pipeline execution to get access to the code and thus have the possibility to start frontend and backend together locally to run your tests.
This question has also already been asked and answered here:
https://community.atlassian.com/t5/Bitbucket-questions/Access-multiple-Bitbucket-repositories-from-a-single-Pipeline/qaq-p/1783419
I have a rather large Vue 3 application (~550 components). It takes two minutes just to run vue-cli-service serve and around 20 seconds to re-build it after each change. Hot reload stopped working a long time ago so it always needs to be refreshed in the browser even after a small style change. Moreover, the app is still not finished and it will probably get 2-3 times this big in the next year so it will probably be even worse.
Because of these problems, I've decided to migrate it from Vue CLI to Vite. I have already resolved a lot of problems and the app seems to work with Vite now with so much better loading times.
However, it sometimes gets stuck when I start a dev server (vite command) and open it in a browser. The page keeps loading and I can see a lot of pending requests in the Network tab of Chrome DevTools. There's nothing special in the output of vite --debug and running vite --force doesn't help either.
When this problem occurs, the browser always loads a lot of modules (~900) and then it gets stuck on 10-20 modules. The status of all these HTTP requests is simply Pending and they never finish. There are no errors in the browser or on the command line.
I don't think any particular file causes this. Maybe the problem is in my deeply nested folder structure with a lot of re-exports using index.ts file on each level. It mostly gets stuck on my own modules but I've also seen cases when it was waiting for a module of some external library.
Has anybody experienced a similar problem? How did you solve it?
EDIT: I have discovered that this issue only occurs in Chromium-based browsers (Google Chrome, Brave, etc.) on Linux. It works without any problems in Chrome on MacOS and Windows as well as in other browsers (Firefox, GNOME Web, etc.) on Linux.
Thanks to this comment, I realized this was a problem with the file descriptors limit.
On Manjaro Linux (Arch-based), I was able to solve it by adding the following line to both /etc/systemd/system.conf and /etc/systemd/user.conf file:
DefaultLimitNOFILE=65536
After this change, Vite works without any problems in all browsers.
Whenever I run UI Tests locally, they pass, and I can watch the simulator do exactly what it's supposed to.
Then, when the tests run on Jenkins, they fail on the first line.
If it matters, this is the failure:
UI Testing Failure - No matches found for Table
The above error never happens when the tests are running locally.
I appreciate all of the help, and also want to help others with the same issue as much as possible. It's tough, because I can't post code or give too much information, since the code I'm working on is proprietary.
Here was the issue:
I didn't realize that Jenkins just ran the tests on a simulator, on a computer, just like I would do on mine. I had to handle logging into the app in Jenkins' simulator, so that all of the XCUIElements were accessible.
The tests weren't passing the first line, because I wanted to tap a "Settings" button, and a user wasn't even logged in.
Please comment if I can clarify or explain further.
We have e2e test integrated with Jenkins system. For a few weeks this test successfully ran both, locally and from Jenkins (as a part of the build pipeline).
At the end of Sprint, I modified the script to reflect Sprint changes and made sure it passed locally. Then, I merged the changes with master. Now, e2e runs from Jenkins are failing 100% of the time, while when I locally connect to QA envs there is no problem.
The error I am getting is - Element is not clickable at point (x, y) which I cannot reproduce locally.
The server doesn't have a real screen so I cannot go out there and see what's going on. Resolutions are perfectly matching. I have other people running this test locally and there is no problem.
What could possibly cause these failures and how do I troubleshoot this problem?
Thanks for your help!
Its a question from 1000ft and pretty difficult to identify where exactly the issue could be but I listed down some probable causes/debugging tips that could help you
1.Whats your checkout strategy from source code repository? Check job workspace and it should have the most recent code and check if its indeed the latest one.
May be configure Job to always pick a new version instead of 'update'
2.Add a reporter based on the test framework you are using especially the ones which provide screenshots. Refer my blog for more details -
3.Check the stack trace of your error from Jenkins console report and verify the exact trigerring point