Adding browser info into cypress cucumber preprocessor report - cucumber

I'm currently trying cypress-cucumber-preprocessor in our application test suite.
Even if it seems there is no additional parameter except below ones:
"cypress-cucumber-preprocessor": {
"cucumberJson": {
"generate": true,
"outputFolder": "cypress/cucumber-json",
"filePrefix": "",
"fileSuffix": ".cucumber"
}
}
I was wondering if there's any chance to have info about browser, browser version and maybe the os where test have been executed into the .cucumber.json generated files.
Thanks for your replies

Related

Jasmine on Node.js fails with ERR_UNSUPPORTED_DIR_IMPORT

I'm writing an Express v4.18.2 app on Node.js 18.12.1 on Windows. I'm testing a controller with Jasmine 4.5.0. When I run jasmine spec, it fails with an error message about resolving ES modules:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import
'...\SimpleServiceJasmine\spec' is not supported resolving ES modules
imported from
...\SimpleServiceJasmine\node_modules\jasmine\lib\loader.js
...
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///D:/.../SimpleServiceJasmine/spec'
I use require, not import, everywhere in the code being tested or the spec.
Note that jasmine runs fine if I specify the spec file explicitly, even with wildcards, as long as the wildcard path resolves to a single file:
jasmine spec/service/contact-api.spec.js # ok
jasmine spec/*/c* # ok
I tried downgrading jasmine to 3.0.0 and 2.0.1 but got the same error. The behavior is the same on Windows 11 and Windows Server 2019.
Any suggestions for how can I run all the specs in this project?
Here's my package.json:
{
"name": "simpleservice",
"version": "1.0.0",
"description": "A simple CRUD API for contacts",
"main": "service/contact-api.js",
"scripts": {
"test": "jasmine spec/service/contact-api.spec.js",
"start": "node src/service/contact-api.js"
},
"author": "Puzzled Dev",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"jasmine": "^4.5.0"
}
}
Here's the spec/support/jasmine.json:
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.?(m)js"
],
"helpers": [
"helpers/**/*.?(m)js"
],
"env": {
"stopSpecOnExpectationFailure": false,
"random": true
}
}
Jasmine uses glob for pattern matching, which means whenever you pass spec as a pattern, glob finds this particular directory and then returns it to jasmine. Unfortunately, path validation in jasmine does not seem in a very smart way, it continues executing with the given path, and then it throws an error by Node.js.
It is equivalent to this:
import spec from './spec'
You can take a look at the jasmine-runner code, and the line in which contributor put a comment:
The ES module spec requires import paths to be valid URLs. As of v14,
Node enforces this on Windows but not on other OSes. On OS X, import
paths that are URLs must not contain parent directory references.
So, once you have defined spec_files in jasmine.json, there is no need to give an extra pattern to execute all tests.
jasmine will execute all tests with the help of spec_dir, and spec_files fields in jasmine.json. All you need to do is just simply run jasmine or npx jasmine.

Cypress: When using Cucumber on Cypress Version 10, the Gherkin keyword 'And' does not seem to work anymore

I have been using Cucumber, in version 9.5.2 of Cypress. I have now updated to Cypress version 10.9.0.
I have also been using the Gherkin keywords Given, Then, and When. I was using 'And' alongside some of those key words, but ever since I have updated to version 10, I have been getting the below error.
Is 'And' no longer supported? When I remove 'And' completely from my project, the Cypress tests burst back into life, and I don't get that error.
I have a 'common' folder which holds all the .js files for the Gherkin key words. I have been doing this because the project uses statements in these files over multiple tests.
Project package.json:
"cypress-cucumber-preprocessor": {
"stepDefinitions": [
"cypress/e2e/components/**/*.{js,ts}",
"cypress/e2e/common/**/*.{js,ts}"
],
"cucumberJson": {
"generate": true,
"fileSuffix": ".cucumber",
"outputFolder": "results/cucumber"
}},
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "^13.0.2",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
"#esbuild-plugins/node-modules-polyfill": "^0.1.4",
"cypress": "^10.9.0",
"cypress-mailosaur": "^2.8.0"}}
Project cypress.config.js:
e2e: {
setupNodeEvents(on, config) {
return require('./cypress/plugins/index.js')(on, config)
},
specPattern: ["**/*.feature", "cypress/e2e/**/*.cy.{ js, jsx, ts, tsx }", "cypress/e2e/**/*.{feature,features}"],
},
Project plugins/index.js:
'And' and 'But' removed as part of v13.0.0 release of badeball/cypress-cucumber-preprocessor.
From version 13.0.0 onwards the support for AND and BUT is removed.
https://github.com/badeball/cypress-cucumber-preprocessor/issues/821
See Release Notes for v13.0.0 https://github.com/badeball/cypress-cucumber-preprocessor/releases

After upgrading to Angular 12 ng serve freezes at Generating browser application bundles

I have an Angular library project that recently got upgraded to v12. After the upgrade building the library and wrapper project work without issue but ng serve gets stuck at Generating browser application bundles (phase: building)...
I have "defaultConfiguration": "development" under the architect - serve
I experienced similar troubles upgrading to Angular 12.
I found another SO post that looked a lot like it : Angular 11 stuck on "Generating browser application bundles (phase: building)"
However, none of the answers did the trick.
Since there is no output message, I am not sure at all that you are facing the same problem as I was, but this might be helpful.
I filed a bug here : https://github.com/angular/angular-cli/issues/21971
In my case, the issue seems webpack and tree-shaking related.
My Typescript data model contains (a lot of) circular references, though they look quite legit to me.
A workaround was to set the sideEffects flag in my package.json file, be it true or false.
{
"name": "my-app",
"version": "1.0.0",
"comment": [
"This is the package.json file of my app"
],
"private": true,
"sideEffects": true,
"dependencies": {},
"devDependencies": {}
}

npm-debug module: how to enable and disable debug targets programatically?

In the documentation for visionmedia's debug module for Node.js, I see that it is possible to enable and disable different debug targets programmatically.
My attempts to do this have not been very successful.
I created a barebones script: test.js
const debug = require("debug");
let test = debug("test"); // created before being enabled
console.log(1, debug.enabled("test"));
let namespaces = debug.enable("test");
// test = debug("test");
console.log(2, debug.enabled("test"));
console.log("enabled namespaces:", namespaces);
test("this is test");
namespaces = debug.disable();
// test = debug("test");
console.log(3, debug.enabled("test"));
console.log("disabled namespaces:", namespaces);
test("you shouldn't see this");
When I run the script using node test.js, I get the following output, which shows that debug.enable("test") has neither enabled the test debug target, nor has it returned any namespaces:
1 false
2 true
enabled namespaces: undefined
3 false
disabled namespaces: undefined
When I run the script using DEBUG=test node test.js, I get the following output, which shows that debug.disable("test") has neither disabled the test debug target, nor has it returned the names of any disabled namespaces:
1 true
2 true
enabled namespaces: undefined
test this is test +0ms
3 false
disabled namespaces: undefined
test you shouldn't see this +0ms
However, if I uncomment the lines that recreate the test debug target after using .enable() or .disable(), then everything works.
It seems that, in order to be able to enable and disable debug targets programatically, I need to use a different syntax:
debug("test")("message which can be enabled or disabled");
But it seems that this creates a new debug instance each time it is used, which would be wasteful. And it is not the standard syntax described in the documentation. And, even so, the .enabled() and .disabled() methods do not return a list of namespaces.
Is there something that I have badly misunderstood?
The issue was caused because I was relying a version of debug installed as a dependency for express. It turns out that the current version of express requires an outdated version of debug.
After running npm install express today (27 June 2021), the entry for debug in package-lock.json was as follows.
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
"version": "2.6.9"
(This is version "4.17.1" of express.)
This is because the package.json file for express explicitly calls for "debug": "2.6.9".
Running npm update has no effect on this.
Running npm install debug does fix the problem. The entry for debug in package-lock.json gets set to the following:
"debug": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": {
"ms": "2.1.2"
}
"version": "4.3.1"
Problem solved.

Angular 8 - GET styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when served over USB

I am using ng serve to run an Angular 8 project locally. The total bundle size is around 7 MB, and it loads with no trouble on the desktop machine where it's hosted.
However, when connecting a phone via USB and using port forwarding (for localhost:4200), the website frequently fails to load completely. The error reported by Chrome is:
GET http://localhost:4200/styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
This error was logged in https://github.com/angular/angular-cli/issues/7197, and is now marked as resolved. However, even with Angular CLI and NodeJS both up-to-date (Angular CLI v8.3.18 using Node v10.15.0) the error persists. It appears to be caused by the Angular Live development server timing out while serving its assets.
It occurs at random, but especially after a code change it can occur over 90% of the time. Reloading the site and re-running ng serve do not generally fix the issue. It appears to occur more frequently on browsers other than Chrome.
If the error is caused by a timeout in the Angular development server, how can I increase that timeout? If not, how can I prevent this error?
A temporary solution that is working for me is refresh the page multiple times until the vendor.js and main.js files are downloaded.
This issue took me a while to debug and to fix, hopefully this can help someone else. This bug appeared with NodeJS v8, and it still happens with Angular 14 and nodeJS 18.
This issue happens because the download speed of your device is limited, and the server raises a timeout to break the connection before the necessary angular js files are downloaded. This issue can happen over USB but also inside the Android Studio AVD emulator (my case). It can be reproduced artificially on a desktop computer by using the Chrome browser DevTools > Network > enable "Disable Cache" and set "Throttling" to "Slow 3G", then try to access your locally served webapp.
The major issue is that ng serve does not offer a way to manually set the timeout, so it is set to a constant time for all. As is written in the github issue you linked to, there used to be a workaround but only for nodejs 8, which was since then dropped and anyway never applied to any further versions, so it was only a temporary fix.
The solution is to serve the Angular web app manually, so that you can either:
minify js files, so that they are small enough to be downloaded fast.
ng serve --configuration production --watch
In angular.json, the production configuration should be something like this:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myproject": {
"architect": {
"build": {
"configurations": {,
"production": {
"baseHref": "",
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": false
}
}
}
}
}
}
}
serve the pre-built app using your own server (not ng serve), so that you can disable timeouts.
In one terminal, launch the following to build the app and monitor changes:
ng build --watch
In a separate terminal (while the first one is running), launch the HTTP server with the following (-t0 disables timeouts):
http-server ./dist -p <port> -t0
PS: if you are trying to access the Angular app from inside the Android emulator, make sure to either use the WebView Browser Tester app, or enable the network permission to access HTTP cleartext addresses for your Android app.

Resources