CypressJS automated CrossBrowserTesting - javascript

I've installed cypress framework on my project.
I already have multiple viewports tests running successively on my app.
Is it possible to automate cross browser testing, so I don't have to select a browser extension to run my test on?
Thanks in advance! :-)

Yes, it is possible. In this case, there can be scenarios that you can run concurrently and there can be scenarios you need to run sequentially. I'll add the solution which I found for both problems.
For this, we need the package.json file. ( If you don't have it do an npm init ) and it will guide you through making the pachage.json
Then let's say we have two test files 1 can be run concurrently, and the other one should not be executed concurrently. let's name them as concurrently.js and sequentially.js
To run the tests sequentially ad your cypress command inside the scripts JSON object.
Ex:
"scripts": {
"cy:sequence:chrome": "cypress run --browser chrome --spec **/sequentially.js",
"cy:sequence:firefox": "cypress run --browser firefox --spec **/sequentially.js",
}
Now you just need to run npm run command to sequence execution, in this case, it will be
npm run cy:sequence:chrome && npm run cy:sequence:firefox
Then if you need concurrent execution, we need to add an npm package [concurently][1]
You can install it with npm i concurrently
Now like we did before we need to add the concurrently.js execution commands to scripts. Here we are using the concurrently package notations to add it. ( check the above URL )
so our final scripts package looks like,
"scripts": {
"cy.concurent:run" : "concurrently \"cypress run --browser chrome --spec **/concurrently.js\" \"cypress run --browser firefox --spec **/concurrently.js\"",
"cy:sequence:chrome": "cypress run --browser chrome --spec **/sequentially.js",
"cy:sequence:firefox": "cypress run --browser firefox --spec **/sequentially.js",
}
if the above addition is not clear, we need to add the commands as quotes with concurrently word being the first word. it should be like
"concurrently "command1" "command2" "
Now if you need to run the tests concurrently in multiple browsers, you just need to run
npm run cy.concurent:run
My only doubt is about the reporting, you might need to add an additional config to save browser-specific videos and reports. If not it might save the data of last execution.
Hope this helps,
Cheers.
[1]: https://www.npmjs.com/package/concurrently

Related

Jest: `npm test` not displaying "Watch Usage" options in Windows Git Bash

I am new to React and attempting to use npm test.
From the docs, it is my understanding that every time npm test runs, it starts the watcher. The watcher is supposed to display a list of commands titled "Watch Usage". This includes commands such as a, f and q.
When I run npm test, watcher appears to work because it runs the tests and reruns them if I save a file.
However, it does not display the "Watch Usage" list and if I type any of the "Watch Usage" commands, nothing happens.
How can I enable the "Watch Usage" commands?
I was attempting to run this command in Git Bash. I have not found a solution to make it work in Git Bash.
However, you can instead run the command in cmd.exe and it will work properly.
The Jest VSCode extension can also be helpful.
There is a problem with running Jest inside Git Bash on Windows. The terminal codes for updating the screen are not correctly handled, and I've been unable to find a reason or fix for this searching Google.
If you run npm test from a DOS prompt, then it seems to work fine, but if you run npm test from a Git Bash prompt the progress feedback from Jest is missing.
You can enable colors by running npm run test -- --colors which gets Jest to output the color status for tests in Git Bash, but strangely the colors are working but the progress is still not shown.
The only successful work around that I've found is running Jest from inside winpty if you're using Git Bash.
winpty npm.cmd test
So what I do is add an alternative npm script to my package.json file for running on Git Bash inside Windows.
"wintest": "winpty npm.cmd run test",
Then you can just run that instead.
npm run wintest
It's not a perfect solution, but at least you can see the progress correctly.
You can activate watch mode, modify your package.json:
"scripts": {
"test": "jest --watch",
}
run npm test

what is benfit of using `prestart` over `&&` in `package.json` command

I think the title is self explain but again:
what is the benefit of using the pre script of npm packege.json for example prestart over just concatenate commands with && in the start script?
{
prestart: "parcel build",
start "nodemon server.js"
}
vs
{
start: "parcel build && nodemon server.js"
}
It is more cross platform ?
can it handle two async endless process like two servers (build + api) ?
something else?
edit:
I found benefit for postInstall. Heroku and such delete devDependency after npm install so in postinstall I can put build process before Heroku delete the code that do that.
prestart runs before start as the name suggests, therefore running a command in prestart and a command in start runs the two commands in sequence, not parallel. Running commands in start with && runs them sequentially, but inside the same step.
The two methods are pretty much the same, at least in terms of results. However, there might be compatibility issues with && on certain versions of Windows.
If you want to run commands in parallel, you can use & inside start, instead of &&.
In addition to the other answers, it should be noted that the prestart hook in package.json is not supported by the yarn package manager. So in this respect, using && allows for easier migration between npm and yarn (provided that your shell can interpret the &&).
The reason for this is to increase maintainability by avoiding implicit dependency chains:
In particular, we intentionally don't support arbitrary pre and post hooks for user-defined scripts (such as prestart). This behavior, inherited from npm, caused scripts to be implicit rather than explicit, obfuscating the execution flow. It also led to surprising executions with yarn serve also running yarn preserve.
https://yarnpkg.com/advanced/lifecycle-scripts
These methods are more for clarity in code, for separation of logical steps.
About compatability. As I understand npm runs all scripts in the local shell, so on most linux systems it will be some sh clone, and on windows it will be cmd. So there may be situation where && will not be supported by the shell. But it's unlikely and do you really need to support such behaviour, considering users could install bash on any platform node.js could be installed on and set nom to use it? I personally use bash in npm scripts and document in the README.
If you want to run multiple long-running processes use something like pm2 https://github.com/Unitech/PM2/ in production. When you're developing, usually it's helpful to run processes in multiple terminals to see logs, use supervisor https://github.com/petruisfan/node-supervisor to restart processes on errors and changes.
Also I usually write .sh scripts for maintenance, like deploy and periodic, but manual tasks and run them using npm - you could add any named scripts in scripts section.
That is because when you run a script like this - npm install && npm start node will run both commands in the same process, so if one of the commands will send any non-zero exit code (in case of an exception) you'll not be able to determine which command failed. Running them in separate scripts with "pre" keyword will execute them in separate processes, so it is more accurate.

How to run two servers simultaneously using nodemon

I need to run two servers (www.js and apiServer.js) simultaneously using nodemon. I have specified that value for the "start" key in package.json as
When I run: nodemon in the command prompt with current working directory in which package.json is placed, only "apiServer.js" is running. The other "www.js" is not running.
I would appreciate if somebody could help with this problem. Thanks in advance.
The && operator will run processes sequentially, so the second process doesn't start because the first process doesn't resolve.
Try the concurrently NPM module - it allows you to run simultaneous processes - https://www.npmjs.com/package/concurrently
So after you install it, your command would look like
"start": "concurrently \"node apiServer.js\" \"node ./bin/www.js\""

Webstorm Debugging NPM Script Through IDE

Trying to debug an NPM script from within Webstorm. The application runs through the NPM scripts, but when debugging the script it always crashes. I know that there is the flag $NODE_DEBUG_OPTION, but adding that doesn't seem to work.
Script:
"dev": "npm run dev:server & npm run build:client:watch",
"dev:server": "npm run build:server:watch & nodemon --harmony lib/server",
"build:client:watch": "WEBPACK_DEV=true NODE_ENV=development STACK=local node lib/server/webpack",
"build:server:watch": "npm run transpile:watch -- -d lib/common src/common & npm run transpile:watch -- -d lib/server src/server",
"transpile": "BABEL_ENV=node babel",
"transpile:watch": "npm run transpile -- --watch",
According to Webstorm: To debug the "dev" script, make sure the $NODE_DEBUG_OPTION string is specified as the first argument for the node command you'd like to debug. For example: { "start": "node $NODE_DEBUG_OPTION server.js" }
But even when adding this in different places it will still give me an error. Any suggestions?
For anyone reading this in 2020, you just need to right-click the script in the NPM panel and select "Debug ".
You can then set breakpoints in the script and debug in the Debug panel panes, Debugger, Console, etc..
To re-run the script, click the bug icon in the Debug panel.
Probably you are using node8, where this will not work because in node 8 V8 debugger API had been superseded by the V8 inspector API. For more info look at this issue, In previous versions of nodejs this works. For node 8 you should check the WebStorm site, they have information about how to work with the new inspector protocol https://www.jetbrains.com/help/webstorm/run-debug-configuration-node-js.html?search=node

Build or Pipeline for testing in angular project. Protractor issue

I am working on a mobile app. I am using ionic framework with angularjs. So I am programming this app using web technologies. My issues are regarding to the tests. I have unit and end to end (e2e) tests in my application.
Look at my script section in my package.json file:
"scripts": {
"test": "karma start test/karma.conf.js",
"test-single-run": "karma start test/karma.conf.js --single-run"
}
I am able to run my unit tests executing the command in a git console:
npm run test
And my e2e tests executing two commands in two git consoles:
ionic serve (to run my app)
protractor test/protractor-conf.js (to run my e2e tests)
I have two issues here:
I am not able to add a script command to my package.json in order to simplify the protractor command. In the same way of my karma commands for unit testing.
I have tried this:
"e2e" : "protractor test/protractor-conf.js"
In order to run "npm run e2e", But I received this error:
The second issue: I would like to create a build (or pipeline) for all my tests. I mean, to have a command like "rake" in ruby. Where I can run my units and e2e tests through it. This could be very useful in order to save time in the development process and to avoid the fact of forgetting to run my e2e tests.
Ok, so now that you know what the issue is it's pretty easy to get this working. What I did was add a postinstall script that runs webdriver-manager update so that I don't ever forget to do it. Now that you have protractor as a local dependency you should be able to do something like this:
"scripts": {
"postinstall": "webdriver-manager update",
"e2e" : "protractor test/protractor-conf.js"
},
Now each time you run npm install the postinstall script will update webdriver for you and you don't have to remember to run it manually.
As for your second question, look at using Gulp or Grunt to do what you are asking. They are both similar to rake. You can setup a task to run your tests each time it detects file changes.

Categories