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"
},

How to auto-reload the script by npm server

I am testing the sample code of javascript.
There is script like simple.js under demos directory.
I run demo by this command yarn build-demos && http-server demos/
simple.js is compiled to simple_bundle.js and server works.
However everytime I change simple.js, I need to restart server.
Is there any good short cut for this purpose??
I am not familiar with npm and webpack
Any help is appreciated.
My package.json is here below:
{
"name": "#magenta/sketch",
"version": "0.2.0",
"description": "Make sketches in the browser with machine learning.",
"main": "es5/index.js",
"types": "es5/index.d.ts",
"jsdelivr": "dist/magentasketch.js",
"unpkg": "dist/magentasketch.js",
"dependencies": {
"#tensorflow/tfjs": "^1.0.2"
},
"devDependencies": {
"#types/clone": "^0.1.30",
"#types/file-saver": "^1.3.0",
"#types/ndarray": "^1.0.6",
"#types/node": "^12.0.1",
"#types/tape": "^4.2.32",
"browserify": "^16.5.1",
"clang-format": "^1.2.3",
"clone": "^1.0.4",
"file-saver": "^1.3.8",
"file-saver-typescript": "^1.0.1",
"fs": "0.0.1-security",
"http-server": "^0.12.1",
"in-publish": "^2.0.0",
"minimist": "^1.2.5",
"path": "^0.12.7",
"tape": "^4.9.0",
"ts-loader": "^5.3.0",
"ts-node": "^5.0.1",
"tsify": "^3.0.4",
"tslint": "^5.9.1",
"typedoc": "^0.16.9",
"typedoc-plugin-sourcefile-url": "^1.0.3",
"typescript": "^3.3.3333",
"webpack": "^4.24.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"scripts": {
"prepublish": "yarn lint && yarn build && yarn bundle",
"build": "tsc",
"bundle": "webpack --config ./webpack/lib.config.ts",
"lint": "tslint -c ../tslint.json -p . -t verbose",
"test": "ts-node node_modules/tape/bin/tape src/**/*_test.ts",
"build-demos": "webpack --config ./webpack/demo.config.ts",
"run-demos": "yarn build-demos && http-server demos/",
"serve-demos": "http-server demos/",
"serve-dist": "http-server dist/",
"docs": "sh ../scripts/generate-docs.sh 'sketch'"
},
"author": "Magenta",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/tensorflow/magenta-js.git"
}
}

You might need to use Nodemon.
You install nodemon by npm i nodemon
In package.json you add a script: "dev": "nodemon dist/index.js"
Execute the code in the console by adding npm run dev
It should work as you want

You may consider using Nodemon.

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")]
});

docker - Error: Cannot find module 'winston'

Background
I am using EC2 instance to create docker container.
Problem
When I run docker-compose up -d --build, all containers are up successfully.
But when I run docker logs <container id> for test-web container, error shows.
Error: Cannot find module 'winston'
What I've done
I've already tried same command on local environment but it runs successfully, so I wonder it's a docker problem.
I also tried to sh to the images, but the winston module exists in node_modules.
Dockerfile
FROM node:lts-alpine
RUN npm install --global sequelize-cli nodemon
WORKDIR /server
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3030
CMD ["npm", "run", "dev"]
docker-compose.yml
version: '2.1'
services:
test-db:
image: mysql:5.7
environment:
- MYSQL_ALLOW_EMPTY_PASSWORD=true
- MYSQL_USER=admin
- MYSQL_PASSWORD=12345
- MYSQL_DATABASE=test
volumes:
- ./db-data:/var/lib/mysql
ports:
- 3306:3306
test-web:
environment:
- NODE_ENV=local
#- DEBUG=*
- PORT=3030
build: .
command: >
./wait-for-db-redis.sh test-db npm run dev
volumes:
- ./:/server
ports:
- "3030:3030"
depends_on:
- test-db
.dockerignore
node_modules
npm-debug.log
package.json
{
"name": "docker-server",
"description": "",
"version": "0.0.0",
"homepage": "",
"private": true,
"main": "src",
"keywords": [
"feathers"
],
"author": {
"name": "hello",
"email": "hello#example.com"
},
"contributors": [],
"bugs": {},
"directories": {
"lib": "src",
"test": "test/",
"config": "config/"
},
"engines": {
"node": "^13.0.0",
"npm": ">= 3.0.0"
},
"scripts": {
"test": "npm run lint && npm run mocha",
"lint": "eslint src/. test/. --config .eslintrc.json --fix",
"dev": "nodemon --legacy-watch src/",
"start": "node src/",
},
"standard": {
"env": [
"mocha"
],
"ignore": []
},
"dependencies": {
"#feathersjs/authentication": "^4.5.11",
"#feathersjs/authentication-local": "^4.5.11",
"#feathersjs/authentication-oauth": "^4.5.11",
"#feathersjs/configuration": "^4.5.11",
"#feathersjs/errors": "^4.5.11",
"#feathersjs/express": "^4.5.11",
"#feathersjs/feathers": "^4.5.11",
"#feathersjs/socketio": "^4.5.11",
"#feathersjs/transport-commons": "^4.5.11",
"aws-sdk": "^2.868.0",
"compression": "^1.7.4",
"cors": "^2.8.5",
"express-winston": "^4.1.0",
"feathers-hooks-common": "^5.0.5",
"feathers-logger": "^0.3.2",
"feathers-permissions": "^2.1.4",
"feathers-sequelize": "^6.2.0",
"helmet": "^4.4.1",
"sequelize": "^6.5.1",
"serve-favicon": "^2.5.0",
"uuid": "^3.4.0",
"winston": "^3.3.3",
"winston-dynamodb": "^0.3.1"
},
"devDependencies": {
"axios": "^0.21.1",
"eslint": "^7.22.0",
"mocha": "^8.3.2",
"nodemon": "^2.0.7"
}
}

Jest not finding all tests

Jest is not finding all of my test files. It is ignoring a directory. When I run npm run jest:watch my tests in ./server and its subdirectories are tested but no tests are found in ./client
What I have tried
I have tried creating a generic test file and moving it around. I found it would work in the following circumstances.
I have also tried using a direct path to the file - which didn't work.
Possible causes
I think it may be something to do with the unusual directory structure I have
./client
./server
as opposed to
./server.js
./other server files..
./client/...client files
or it may be die to me trying to run jest from the node.js app and also have it look at files in the client directory (which contains an app written in React) - I don't care about running tests on react components (only modules). Alternatively it could be something to do with jest in the client directory messing things up.
filename
./server/middleware
./
./client
delete.test.js
found by jest
found by jest
not found
My setup
my folder structure looks like this
./
./client (react client app)
./client/package.json
./client/node_modules
package.json
node.modules
./server (node.js api app)
./server/package.json
my jest is running from the ./package.json file.
Other things I have tried
I have tried using direct paths for my file the below code works
"testMatch": ["<rootDir>/server/delete.test.js"],
but this code (in the folder I want) does not
"testMatch": ["<rootDir>/client/delete.test.js"],
code setup
./package.json
{
"name": "Infoshot",
"version": "0.0.4",
"description": "Research Tool",
"main": "cd ./server && server.js",
"scripts": {
"start": "cd ./server && node server.js",
"server": "cd ./server && nodemon server.js",
"client": "npm start --prefix ./client/",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd ./client && NPM_CONFIG_PRODUCTION=false npm install && CI= npm run build",
"compile-saas": "node-sass ./client/src/scss/a_main.scss ./server/nodeClient/public/css/main.css -w",
"test": "jest",
"test:watch": "npm run test -- --watch"
},
"jest": {
"testEnvironment": "node",
"testPathIgnorePatterns": [
"./node_modules"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"bcryptjs": "^2.4.3",
"config": "^3.2.2",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"enzyme": "^3.11.0",
"express": "^4.17.1",
"express-validator": "^6.2.0",
"ijavascript": "^5.2.0",
"jest": "^26.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.7.0",
"nodemailer": "^6.4.14",
"nodemailer-sendgrid": "^1.0.3"
},
"devDependencies": {
"concurrently": "^4.1.2",
"node-sass": "^5.0.0",
"nodemon": "^1.19.2"
}
}
delete.test.json
describe.only('DELETE TEST: getDocument', () => {
test('Say Hi', async () => {
const bum = 'bum';
expect(bum).toBe(bum);
});
});
./client/package.json
As I said earlier I don't think this is relavant as it is not be run as I am running jest from ./server with npm run jest:watch
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"config": "^3.3.2",
"dotenv": "^8.2.0",
"enzyme-adapter-react-16": "^1.15.3",
"node-sass": "^4.14.1",
"react": "^16.9.0",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.4",
"react-transition-group": "^4.3.0",
"serve": "^11.3.2",
"styled-components": "^5.1.1",
"uuid": "^3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"previewProd": "react-scripts build && serve"
},
"jest": {
"collectCoverageFrom": [
"src/components/documentEditor/*.js",
"<rootDir>/server/",
"!<rootDir>/node_modules/",
"!<rootDir>/src/index.js",
"!<rootDir>/src/registerServiceWorker.js"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000",
"devDependencies": {
"#testing-library/react": "^10.4.9"
}
}

I found that if I removed all the mentions of jest in the ./client/package.json and also replaced the ./package.json with
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**"
]
it worked.