Playwright - Cucumberjs - Allure Reports - javascript

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

Related

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

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.

How to fix blank web page after 'npm run build'

I'm currently working on a project using Vue and Firebase. The issue is that my dev server is no longer rendering new routes from my vue router after building and deploying to prod.
For ex: I have several vue components and they all render properly for their corresponding vue router routes, although now when I add new components(Test.vue)/new routes, nothing is rendered when loading the web page.
I've spent quite a while looking at just about every helpful article relevant to this issue but have had no luck. I have tried manually setting the webpack config in a vue.config.js file and setting the root path to './' as well as '/' and even ''. None work.
I'm really lost at this point.
package.json (in root folder of project):
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"#firebase/firestore": "^1.4.10",
"#google-cloud/firestore": "^2.2.7",
"core-js": "^2.6.5",
"firebase": "^6.4.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"vue-template-compiler": "^2.6.10",
"webpack-cli": "^3.3.7"
}
}
//
package.json (in node_modules/webpack-dev-server/schema-utils/src/package.json):
{
"_args": [
[
"schema-utils#1.0.0",
"/home/b-rad/Documents/AustinKratom/frontend"
]
],
"_development": true,
"_from": "schema-utils#1.0.0",
"_id": "schema-utils#1.0.0",
"_inBundle": false,
"_integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
"_location": "/webpack-dev-server/schema-utils",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "schema-utils#1.0.0",
"name": "schema-utils",
"escapedName": "schema-utils",
"rawSpec": "1.0.0",
"saveSpec": null,
"fetchSpec": "1.0.0"
},
"_requiredBy": [
"/webpack-dev-server"
],
"_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
"_spec": "1.0.0",
"_where": "/home/b-rad/Documents/AustinKratom/frontend",
"author": {
"name": "webpack Contrib",
"url": "https://github.com/webpack-contrib"
},
"bugs": {
"url": "https://github.com/webpack-contrib/schema-utils/issues"
},
"dependencies": {
"ajv": "^6.1.0",
"ajv-errors": "^1.0.0",
"ajv-keywords": "^3.1.0"
},
"description": "webpack Validation Utils",
"devDependencies": {
"#commitlint/cli": "^7.0.0",
"#commitlint/config-conventional": "^7.0.0",
"#webpack-contrib/eslint-config-webpack": "^2.0.0",
"del-cli": "^1.0.0",
"eslint": "^5.0.0",
"eslint-plugin-import": "^2.0.0",
"eslint-plugin-prettier": "^2.0.0",
"jest": "^21.0.0",
"prettier": "^1.0.0",
"standard-version": "^4.0.0"
},
"engines": {
"node": ">= 4"
},
"files": [
"src"
],
"homepage": "https://github.com/webpack-contrib/schema-utils",
"license": "MIT",
"main": "src/index.js",
"name": "schema-utils",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack-contrib/schema-utils.git"
},
"scripts": {
"clean": "del-cli coverage",
"commits": "commitlint --from $(git rev-list --tags --max-count=1)",
"lint": "eslint --cache src test",
"release": "npm run commits && standard-version",
"test": "jest --env node --verbose --coverage"
},
"version": "1.0.0"
}
Please let me know if I need to provide additional information or files. I also have this project up on Github here: https://github.com/austin-kratom/AustinKratom
There are no error messages in console when on localhost dev server. Simply just a blank web page and nothing else. All my previous vue components/routes work fine, but new ones do not.
Thank you!
When I moved the /test route above dynamic routes related to show and edit routes /test url is loading the Test.Vue.
{
path: '/test',
name: 'test',
component: Test
},
{
path: '/edit/:product_id',
name: 'edit-product',
component: EditProduct
},
{
path: '/:product_id',
name: 'show-product',
component: ShowProduct
}
Before making this change, /test url was matching the path: '/:product_id route pattern with product_id parameter value being set to value "test". So rule is to always define the specific routes before the dynamic routes.

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).

Eslint only working in one sublime text project?

I've duplicated a projects .eslintrc and package.json files, and only the first project gets linting. The second project doesn't show any errors.
I'm using sublime-linter, with the eslint mod.
I've set the syntax the same in both projects.
I've done an npm isntall
I've tried restarting sublime
on doing a comparison of the node_modules folders there is one descrepency, estravers-fb is installed in the project that works.
why would this not be installed in the other projects?
is there another command to properly install dev-dependancies other than npm isntall?
heres my package.json :
{
"name": "Read-hapi",
"version": "1.0.0",
"description": "learning the hapi framework",
"repository": "https://github.com/Pushplaybang/learning-hapi.git",
"main": "server.js",
"dependencies": {
"blipp": "^2.3.0",
"boom": "^3.1.2",
"cheerio": "^0.20.0",
"good": "^6.6.0",
"good-console": "^5.3.1",
"handlebars": "^4.0.5",
"hapi": "^13.0.0",
"inert": "^3.2.0",
"joi": "^8.0.3",
"reading-time": "^1.0.2",
"request-promise": "^2.0.1",
"text-stats": "0.0.3",
"valid-url": "^1.0.9",
"vision": "^4.0.1"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"eslint": "^2.3.0",
"eslint-config-airbnb": "^6.1.0",
"eslint-plugin-react": "^4.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Paul van Zyl",
"license": "ISC"
}
and heres my .eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
},
"rules": {
"no-unused-vars": 0,
"no-undef": 0,
}
}
any help would be appreciated.
Try downgrading ESLint to ~2.2.0 in your package.json or using the default Espree parser instead of babel-eslint. There's an incompatibility right now between ESLint 2.3.0 and babel-eslint. We're tracking progress in eslint/eslint#5476, and you can subscribe to that issue for updates.

Categories

Resources