Develop Reference

Playwright - Cucumberjs - Allure Reports

I'm trying to implement the Allure reports in Playwright with Cucumber. I'm running the features in the next way:
npm run test -- --tags "#Something"
After an execution I type: npm run allure generate but the browser displays an Allure Report Unknown NaN%
This is my package.json file:
{
"name": "playwright",
"version": "1.0.0",
"description": "E2E Automation Framework",
"main": "index.js",
"type": "module",
"scripts": {
"allure:generate": "npx allure generate ./allure-results --clean",
"allure:open": "npx allure open ./allure-report",
"allure:serve": "npx allure serve",
"test": "./node_modules/.bin/cucumber-js --require cucumber.cjs --require step-definitions/**/*.cjs --require features/**/*.js",
"allure-reports": "node_modules/.bin/allure generate ./reports/allure/allure-results/ -o ./reports/allure/allure-report/ --clean && allure open ./reports/allure/allure-report",
"posttest": "npm run allure:generate",
"allure": "allure serve reports/allure-results"
},
"author": "X",
"license": "ISC",
"dependencies": {
"#cucumber/cucumber": "^8.7.0",
"chai": "^4.3.6",
"prettier": "^2.7.1",
"ts-jest": "^29.0.3"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"node_modules",
"src"
],
"preset": "ts-jest/presets/js-with-ts",
"testEnvironment": "node",
"allowJs": true,
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!variables/.*)"
]
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/register": "^7.18.9",
"#jest/globals": "^29.3.0",
"#playwright/test": "^1.27.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"allure-commandline": "^2.18.1",
"allure-playwright": "^2.0.0-beta.19",
"babel-jest": "^29.2.2",
"experimental-allure-playwright": "^0.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.2.2",
"playwright": "^1.27.1",
"react-test-renderer": "^18.2.0"
}
}
If anybody could help me with this? Thanks in advance.

I have something setup as below in package.json for Playwright-jest-allure.
{
"name": "playwright",
"version": "1.0.0",
"description": "Sab Playwright",
"main": "index.js",
"author": "Sab",
"license": "MIT",
"dependencies": {
"jest": "^27.5.1",
"jest-playwright-preset": "^1.7.0",
"playwright": "^1.20.2"
},
"scripts": {
"test": "jest"
},
"devDependencies": {
"jasmine-allure-reporter": "^1.0.2",
"jest-allure": "^0.1.3",
"jasmine":"^3.7.0",
"#wdio/allure-reporter": "^7.16.14",
"#wdio/cli": "^7.5.2",
"allure-commandline": "^2.17.2"
}
}
Below is the allure-results and allure-report , latter gets generated once run is successful and command - npx allure generate ./allure-results --clean
allure-results please make sure xmls' are generated here for the tests run
Allure report:
With cucumberjs, nothing much different other than hooks,cucumber config file. Still if you are facing issue, let me know. I can post the setup I have made on it.

What I discover is that you are executing the test cases with "test": "./node_modules/.bin/cucumber-js. That means that the configuration should be under your cucumber.js
// cucumber.js
let options = [
'--require-module ts-node/register', // Load Typescript module
'--require ./steps/**.ts', // Load steps
'--format progress', // Load custom formatter
'--format json:reports/cucumber_report.json', // JSON report
'--format html:reports/cucumber-report.html',
//'--format ./reporter.ts', // Allure report
'--publish-quiet',
'--tags #mytag',
'--parallel 2',
'--retry 0',
].join(' ')
let run_features = [
'./features/', // Specify our feature files location
options,
].join(' ')
module.exports = {
test_runner: run_features,
parallel: 2,
}
As you can see there is a commented line for allure. When we uncomment this line the reporter.js is going to be the report format, in my case I copied from here
And my scripts at the package.json are:
"scripts": {
"test": "cucumber-js -p test_runner",
"allure:generate": "npx allure generate ./allure-results --clean",
"allure:open": "allure open allure-report",
"all": "npm test && npm run allure:generate && npm run allure:open"
},

Vscode Extension API: Cannot find module '#babel/preset-react'

I want to compile JSX files using '#babel/preset-react on VScode extension API. While doing this I faced an error just like below. I have tried a few ways to install but still can't get any results. It works on a basic node application but it doesn't work on VScode extension API.
Error: Cannot find module '#babel/preset-react'
at webpackEmptyContext (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:56404:10)
at resolveStandardizedName (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57964:7)
at resolvePreset (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57912:10)
js:120:14)
c:\Users\PC\AppData\Local\Programs\Microsoft VS C
code blocks:
try {
let output = babel.transformSync("code", {
"presets": ["#babel/preset-react"]
});
console.log(output)
} catch (e) {
console.log(e)
}
package.json file:
{
"name": "jsx-svg",
"displayName": "",
"description": "jsx-svg",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:jsx-svg.helloWorld"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "jsx-svg.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "yarn run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"test-compile": "tsc -p ./",
"test-watch": "tsc -watch -p ./",
"pretest": "yarn run test-compile && yarn run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/plugin-syntax-jsx": "^7.12.13",
"#babel/plugin-transform-react-jsx": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"#babel/template": "^7.12.13",
"#babel/traverse": "^7.14.0",
"#types/glob": "^7.1.3",
"#types/mocha": "^8.0.4",
"#types/node": "^12.11.7",
"#types/vscode": "^1.55.0",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"eslint": "^7.19.0",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"#types/babel__core": "^7.1.14"
}
}

The biggest hint in that error is webpackEmptyContext. This isn't Node telling you that it failed to find #babel/preset-react" on the filesystem, it is Webpack telling you that it was unable to load #babel/preset-react" from it's bundle.
In the case of Babel, and anything with object-based config inputs, that is expected, because Webpack has no way to know that
let output = babel.transformSync("code", {
"presets": ["#babel/preset-react"]
});
will cause Babel to interally try to load "#babel/preset-react", and Babel can't preemptively tell Webpack what to bundle because it could be passed any set of options.
The way around this is to explicitly load the plugin and pass the already-loaded plugin to Babel like this:
let output = babel.transformSync("code", {
"presets": [require("#babel/preset-react")]
});

When I wants to run my code in local server i always get this kinds of error "SyntaxError: Cannot use import statement outside a module"

I've got a web development project based on e-commerce but when I try to run my project on the local server I always getting this type of error. Don't find any solution yet.
For better understanding, I added my server.js and package.json file in the post
Here it is sever.js
import express from 'express';
import data from './data';
const app = express();
app.get("/api/products", (req, res) => {
res.send(data.products);
});
app.listen (5000, () => {console.log("Server started at http://localhost:5000")})
In package.json
{
"name": "web-development",
"version": "1.0.0",
"description": "nothing",
"main": "nothing",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.11.1",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.0",
"nodemon": "^2.0.4"
}
}
Update:
As far console, I added "type": "module", package.json now I get another error
Cannot GET /
Showing in my browser

Node.js does not support ES6 modules import/export syntax out of the box. Although you can enable it via --experimental-modules flag.
The project already uses Babel which transpile ES6 syntax to ES2015, but you need to add a few more scripts to package.json
start: Starts watching the file for changes. Then rebuilds the code and pipes it to babel-node
build: When you are ready to deploy the code for production, you build the ES2015 version of the code and you can run that.
package.json:
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js"
"build": "babel backend/server.js -o lib/server.js",
},
To build the production code, run npm run build. Once the code is built, you can then run node lib/server.js
lib/server.js will look like:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
I suggest you just editing your package.json like the following.
{
"name": "web-development",
"version": "1.0.0",
"description": "nothing",
"main": "nothing",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"type": "module",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.11.1",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.0",
"nodemon": "^2.0.4"
}
}

Node.js cli run a directory

I've just checked a node.js web framework called feathers.js. I followed the example
``` bash
$ npm install -g #feathersjs/cli
$ mkdir my-new-app
$ cd my-new-app/
$ feathers generate app
$ npm start
In the example package.json file, I found a script look like this: "start": "node src/". I read through node.js cli options, I didn't found anything relate. So, I want to know how that script work, because normally node.js cli run by node foo.js
edit:
Folder structure
package.json file
{
"name": "feathersjsExplore",
"description": "",
"version": "0.0.0",
"homepage": "",
"main": "src",
"keywords": [
"feathers"
],
"author": {
"name": "",
"email": ""
},
"contributors": [],
"bugs": {},
"directories": {
"lib": "src",
"test": "test/"
},
"engines": {
"node": "^8.0.0",
"npm": ">= 3.0.0"
},
"scripts": {
"test": "npm run eslint && npm run mocha",
"eslint": "eslint src/. test/. --config .eslintrc.json",
"dev": "nodemon src/",
"start": "node src/",
"mocha": "mocha test/ --recursive --exit"
},
"dependencies": {
"#feathersjs/configuration": "^2.0.2",
"#feathersjs/errors": "^3.3.2",
"#feathersjs/express": "^1.2.5",
"#feathersjs/feathers": "^3.2.1",
"compression": "^1.7.3",
"cors": "^2.8.4",
"helmet": "^3.13.0",
"serve-favicon": "^2.5.0",
"winston": "^3.0.0"
},
"devDependencies": {
"eslint": "^5.5.0",
"mocha": "^5.2.0",
"nodemon": "^1.18.4",
"request": "^2.88.0",
"request-promise": "^4.2.2"
}
}

It will run the index.js file in that folder or whatever is specified in the folder's package.json main property (https://docs.npmjs.com/files/package.json#main).
If none of that can be found an Error: Cannot find module will be thrown.
This is a similar logic to require('folder/') (see https://nodejs.org/api/modules.html#modules_folders_as_modules).

How to make electron work with sqlite3?

I have tried everything, can't get it to work. I get this error:
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "main.js",
"scripts": {
"start": "electron .",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"repository": "https://github.com",
"keywords": [
"test"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "~1.6.2",
"electron-rebuild": "^1.5.11"
},
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"electron-fetch": "^1.0.0-aplha4",
"electron-handlebars": "^1.0.0",
"electron-prebuilt": "^1.4.13",
"electron-rebuild": "^1.5.11",
"electron-sqlite3": "^0.0.3",
"font-awesome": "^4.7.0",
"jquery": "^3.2.0",
"sqlite3": "^3.1.8"
}
}
In the code I use:
const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database(':memory:');
Any ideas how to make this work?

Have you already run sqlite3 through electron-rebuild?
$ electron-rebuild -f -w sqlite3
or
$ npm rebuild