CodeceptJS Puppeteer doesnt close browser window after finish - puppeteer

I am new to codeceptJS and Puppeteer, the bwoser window closes if I run only one sanity test but If I run multiple test cases. All the browser window keeps open and the terminal shows that the command is still running.
I have tried in the last line of the tests but doesnt work as all of them are in sepearte windows.
I.closeOtherTabs();
multiple test cases:
require('./app/stores/Schedule.js');
require('./app/stores/Configuration.js');
require('./app/stores/Submit.js');
codecept config file:
const testUrl = (!process.env.E2E_URL ? "http://localhost:3001" : process.env.E2E_URL);
const testCases = (!process.env.E2E_URL ? "./automation-test/sanity/dev.sanity.e2e.test.js" : "./automation-test/sanity/prod.sanity.e2e.test.js");
exports.config = {
"tests": testCases,
"timeout": 10000,
"output": "./output",
"helpers": {
"Puppeteer": {
"url": testUrl,
"browser": "chrome",
"windowSize": "1280x800",
"show": true,
"switches": {
"ignore-certificate-errors": true
}
}
},
"include": {
"I": "./automation-test/sanity/steps_file.js"
},
"bootstrap": false,
"mocha": {
"timeout": 10
},
"name": "test"
};

Related

How do I get webdriverIO to use a specified chromedriver

I need my webdriver tests use a specified chromedriver in a directory.
The problem is that when I run the tests it always uses a different chromedriver exe that was set as a default.
Command: "wdio run wdio.ci.conf.ts"
I get : "chromedriver: Starting ChromeDriver 97.0.4692.71"
ChromeDriver 97 is found in \node_modules\chromedriver\lib\chromedriver\chromedriver.exe
However in the wdio.ci.conf.ts file I set it to
services:[ ['chromedriver',{
chromeDriverCustomPath:"src\\main\\cucumber-webdriver-io\\node_modules\\webdriver-manager\\selenium\\chromedriver.exe"
}]],
At this location Im expecting it to pick an older version of chrome driver, 95.0.4638.69
I need it to run an older version as the corporate Jenkins environment has upgraded Chrome yet. In Jenkins I get the error:
WARN webdriver: Request failed with status 500 due to session not created: This version of ChromeDriver only supports Chrome version 97
[INFO] [0-0] Current browser version is 95.0.4638.69 with binary path /usr/bin/google-chrome
Thanks for your help
wdio.ci.conf.ts (removed the comments to be more brief)
const report = require('multiple-cucumber-html-reporter');
export const config: WebdriverIO.Config = {
autoCompileOpts: {
autoCompile: true,
tsNodeOpts: {
transpileOnly: true,
project: 'tsconfig.json'
}
}
},
specs: [
'./features/**/*.feature'
],
exclude: [
// 'path/to/excluded/files'
],
maxInstances: 10,
capabilities: [{
maxInstances: 5,
//
browserName: 'chrome',
'goog:chromeOptions':{
args: [ '--disable-dev-shm-usage', '--headless', '--no-sandbox', '--ignore-certificate-errors', '--test-type','--auth-server-whitelist=*bp.com', '--window-size=1440,1024', '--start-maximized']
},
acceptInsecureCerts: true,
}],
logLevel: 'info',
bail: 0,
baseUrl: 'http://localhost',
waitforTimeout: 10000,
connectionRetryTimeout: 120000,
connectionRetryCount: 3,
services:[ ['chromedriver',{
chromeDriverCustomPath:"src\\main\\cucumber-webdriver-io\\node_modules\\webdriver-manager\\selenium\\chromedriver.exe"
}]],
framework: 'cucumber',
reporters: ['cucumberjs-json'],
cucumberOpts: {
// <string[]> (file/dir) require files before executing features
require: ['./features/step-definitions/*-steps.ts'],
// <boolean> show full backtrace for errors
backtrace: false,
// <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
requireModule: [],
// <boolean> invoke formatters without executing steps
dryRun: false,
// <boolean> abort the run on first failure
failFast: false,
// <boolean> hide step definition snippets for pending steps
snippets: true,
// <boolean> hide source uris
source: true,
// <boolean> fail if there are any undefined or pending steps
strict: false,
// <string> (expression) only execute the features or scenarios with tags matching the expression
tagExpression: '',
// <number> timeout for step definitions
timeout: 60000,
// <boolean> Enable this config to treat undefined definitions as warnings.
ignoreUndefinedDefinitions: false
},
onComplete: function(exitCode, config, capabilities, results) {
report.generate({
jsonDir: '.tmp/json/',
reportPath: '.tmp/report/'
});
},
}
package.json
{
"name": "cucumber-webdriver-io",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wdio": "wdio run wdio.conf.ts",
"wdio-ci": "wdio run wdio.ci.conf.ts",
"postinstall": "rimraf -rm node_modules/wdio-html-nice-reporter/node_modules/#wdio/types"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"cucumber": "^7.0.0-rc.0",
"expect-webdriverio": "^3.1.4",
"multiple-cucumber-html-reporter": "^1.18.3"
},
"devDependencies": {
"#types/chai": "^4.3.0",
"#types/node": "^17.0.12",
"#types/webdriverio": "^5.0.0",
"#wdio/cli": "^7.16.13",
"#wdio/cucumber-framework": "^7.16.13",
"#wdio/local-runner": "^7.16.13",
"#wdio/spec-reporter": "^7.16.13",
"#wdio/types": "^7.16.13",
"chai": "^4.3.6",
"chromedriver": "^97.0.2",
"cucumber-html-reporter": "^5.5.0",
"fs-extra": "^10.0.0",
"ts-node": "^10.4.0",
"typescript": "^4.5.5",
"wdio-chromedriver-service": "^7.2.6",
"wdio-cucumberjs-json-reporter": "^4.2.0",
"webdriver-manager": "^12.1.8",
"webdriverio": "^7.16.13"
}
}
Missed spelled
chromeDriverCustomPath >> chromedriverCustomPath

Develop a VSCode theme using variables

I'm creating a VScode theme.
My project structure is very simple:
mytheme
|_ .vscode
|_ launch.json
|_ assets
|_ ...some png files
|_ themes
|_ mytheme.json
.vscodeignore
package.json
README.md
The mytheme.json is something like this:
{
"name": "mytheme",
"type": "dark",
"colors": {
//////////////////////////////
// CONTRAST COLOR
// The contrast colors are typically only set for high contrast themes.
// If set, they add an additional border around items across the UI to increase the contrast.
//////////////////////////////
// An extra border around active elements to separate them from others for greater contrast.
"contrastActiveBorder": "#fa0000",
// "contrastActiveBorder": "#FFFFFF00",
// An extra border around elements to separate them from others for greater contrast.
//"contrastBorder": "#fa0000",
//////////////////////////////
// BASE COLORS
//////////////////////////////
// Overall border color for focused elements. This color is only used if not overridden by a component.
"focusBorder": "#9B6DFF66",
// Overall foreground color. This color is only used if not overridden by a component.
"foreground": "#D9E0E8",
// Shadow color of widgets such as Find/Replace inside the editor.
"widget.shadow": "#1F2330",
// Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).
"selection.background": "#9B6DFF99",
// Foreground color for description text providing additional information, for example for a label.
"descriptionForeground": "#808182",
// Overall foreground color for error messages (this color is only used if not overridden by a component).
"errorForeground": "#9B6DFF",
// The default color for icons in the workbench.
"icon.foreground": "#D9E0E8",
...
}
}
and my package.json:
{
"name": "mytheme",
"version": "1.0.0",
"publisher": "...",
"icon": "assets/logo_square.png",
"galleryBanner": {
"color": "#1F2330",
"theme": "dark"
},
"engines": {
"vscode": "^1.42.0"
},
"displayName": "Mytheme",
"description": "...",
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "Mytheme",
"uiTheme": "vs-dark",
"path": "./themes/mytheme.json"
}
]
},
"repository": {
"type": "git",
"URL": "....git"
},
"bugs": {
"URL": "..."
},
"author": {
"name": "...",
"email": "...",
},
"license": "MIT",
"keywords": [
"vscode",
"theme",
"color-theme",
"dark"
],
"private": false
}
Very simple. It works like a charm. But there is a big problem: it's very difficult to maintain because mytheme.json is a very very long file and it's a simple .json and If I want to modify for example the accent color, I need to do a find and replace.
I would like to develop my theme in a smarter way, I would like to use variables, save my N colors in variables and use them.
json format doesn't support variables so I ask you how can I do that?
I don't know if there is a standard way to do that, I imagine developing in js and then running a script that transforms my work into a valid json but how?
For example:
const PURPLE = "#9B6DFF"
const baseColors = {
...
errorForeground: PURPLE,
...
}
return ...
I didn't find a guide to follow.
Following the suggestion of #rioV8, I created these files:
.vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "extensionHost",
"request": "launch",
"name": "Launch Extension",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "parseToJson",
},
],
}
.vscode/tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "parseToJson",
"command": "tsc",
"type": "shell",
"presentation": {
"reveal": "silent",
"panel": "new"
},
"args": [
"--target",
"ES5",
"--outDir",
"js",
"--sourceMap",
"--watch",
"parse.ts"
],
"problemMatcher": "$tsc"
}
]
}
.vscode/parse.ts:
const PURPLE = "#9B6DFF"
const baseColors = {
errorForeground: PURPLE,
}
// create json
const mytheme = {
"name": "mytheme",
"type": "dark",
"colors": {...baseColors}
}
function createJsonTheme() {
// save to json
const file = new File(mytheme, "../themes/mytheme.json", {
type: "text/plain",
});
}
createJsonTheme()
When I run it, I get:
error TS6053: File 'parse.ts' not found. The file is in the program
because:
Root file specified for compilation
The path seems ok to me, where is The problem?
The createJsonTheme function goal is to create an object to save then in a json file inside themes folder.
Variables won't help. The theme file is a mapping of token values to color values. A theme editor tool could help you to be more productive, but I don't know any.
I solved doing like this:
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"preLaunchTask": "npm: build"
},
{
"name": "Run Extension Without Build",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
]
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: start",
"detail": "nodemon --watch src src/index.js"
},
{
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": [],
"label": "npm: build",
"detail": "node src/index.js"
}
]
}
package.json:
...
"scripts": {
"start": "nodemon --watch src src/index.js",
"build": "node src/index.js && mkdir -p build",
"prepublishOnly": "npm run build && vsce publish"
}
...
src/index.js:
const fs = require('fs').promises
const getTheme = require('./theme')
const ohlalaTheme = getTheme({
theme: 'dark',
name: 'Mytheme',
})
// write theme
fs.mkdir('./themes', { recursive: true })
.then(() =>
Promise.all([
fs.writeFile('./themes/mytheme.json', JSON.stringify(ohlalaTheme, null, 2)),
])
)
.catch(() => process.exit(1))
src/theme.js
const { colors } = require('./colors')
function getTheme({ theme, name }) {
const themes = (options) => options[theme]
return {
name: name,
colors: {
focusBorder: colors.green,
},
semanticHighlighting: true,
...
}
}
module.exports = getTheme
src/colors.js:
const colors = {
green: '#......',
}
module.exports = { colors }

Debugging JXA in VS Code

I'm trying to debug some JXA code in vs-code. I'm using #jxa/run and ts-node
import "#jxa/global-type";
import { run as runJXA } from "#jxa/run";
async function run() {
console.log('I can put a breakpoint here! :) ');
return await runJXA((config) => {
console.log('I can't put a breakpoint here :( ');
});
}
run()
I run VS Code debugger via launch.json config:
{
"type": "node",
"request": "launch",
"name": "Debug JXA Build",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"bootstrap.ts"
]
},
How can I get the second breakpoint to hit?

In vscode errors generated by a task with isWatching are not always cleared after they have been fixed

I'm using a gulp task in vscode (0.9) to try to get errors from both typescript and tslint.
The gulp task is watching for changes on my ts files and run both the gulp-tslint and gulp-typescript on changes.
I also defined a task in vscode tasks.json and problem matchers to parse the results.
The errors are parsed and reported correctly into vscode.
However they are sometimes kept even when code is fixed and saved.
Is there some additional config to provide to vscode problem matcher so that it clear errors properly or is it a vscode bug?
As a workaround is there a way to manually clear all errors? The only way I found to clear them is to restart vscode which is not great.
Note that this works fine if the task is not a watch task but a simple execution.
My vscode tasks.json
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "watch",
// Make this the default build command.
"isBuildCommand": true,
// Watching
"isWatching": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "always",
// Use the standard less compilation problem matcher.
"problemMatcher": [
{
"owner": "gulp-tslint",
"fileLocation": [
"relative",
"${workspaceRoot}/app"
],
"pattern": {
"regexp": ".*\\[gulp-tslint\\] (error|warning) (.*)\\[(\\d*), (\\d*)\\]: (.*)",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"message": 5
}
},
{
"owner": "gulp-typescript",
"fileLocation": "absolute",
"pattern": {
"regexp": "\\[gulp-typescript\\] (.*)\\((\\d*),(\\d*)\\): (error|warning) (.*)",
"file": 1,
"line": 2,
"column": 3,
"severity": 4,
"message": 5
}
}
]
}
]
}
My gulp task definition:
const tslint = require('gulp-tslint');
const typescript = require('gulp-typescript');
gulp.task('watch', function () {
gulp.watch(srcTsFiles, ['tslint', 'compile']);
});
gulp.task('tslint', function () {
return gulp.src(srcTsFiles)
.pipe(tslint())
.pipe(tslint.report('prose', {
emitError: false,
summarizeFailureOutput: true
}));
});
var tsProject = typescript.createProject('tsconfig.json');
gulp.task('compile', function () {
tsProject.src()
.pipe(typescript(tsProject, undefined, typescript.reporter.longReporter()))
.pipe(gulp.dest('dist'));
});
This is a bug in VSCode. Somehow, it doesn't apply any updates to open files. If the files are closed, any obsolete errors are removed.
So, the workaround is to click the little "close all files" icon in the "Working Files" header.
If you want to figure out yourself what the problem is, look into the JS files in the VSCode resources; in OSX, those reside in the application package. Look for workbench.main.js. You will find the tsc-watch problem matcher in there, and it will have applyTo:c.ApplyToKind.closedDocuments set. I tried to change that to allDocuments, but to no avail.
This is fixed in the latest insider build (I tested it) and will likely go into production next week.
https://github.com/Microsoft/vscode/issues/909

Nightwatch - Use chromedriver

So i saw a similar question on stack here but it did not have an accepted answer nor did it provide me with the information i needed..
I am trying to use 'chromedriver' because 'selenium-webdriver' requires a FF version <= 28.
What i've done so far.
nightwatch.js tests running fine in FF
downloaded chromedriver (npm install chromedriver -g) and also npm install chromedriver into my nightwatch project directory
went to nightwatch/bin/nightwatch.json and edited the following code
"selenium" : {
"start_process" : false,
"server_path" : "",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "/usr/local/bin/chromedriver", <= added this - is this the binary?
"webdriver.ie.driver" : "",
"webdriver.firefox.profile" : ""
}},
also tried to update the settings for selenium to have a start_process=true and server_path
"selenium" : {
"start_process" : true,
"server_path" : "../selenium-server-standalone-2.39.0.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "/usr/local/bin/chromedriver",
"webdriver.ie.driver" : "",
"webdriver.firefox.profile" : ""
}
},
Not sure if im pointing to the proper chromedriver file/folder
also edited the test settings
"test_settings" : {
"default" : {
"launch_url" : "http://localhost",
"selenium_host" : "127.0.0.1",
"selenium_port" : 4444,
"silent" : true,
"disable_colors": false,
"screenshots" : {
"enabled" : false,
"path" : ""
},
"desiredCapabilities" : {
"browserName" : "chrome", <= changed this from ff to chrome
"javascriptEnabled" : true,
"acceptSslCerts" : true
}
},
If i go to run the test (without a -e <browser>) e.g. nightwatch -g <group>, it launches fine in FF and runs..
If i try to specify the chrome browser (-e chrome) nightwatch -g <group> -e chrome i get the following error
ERROR There was an error while starting the test runner:
Error: Invalid testing environment specified: chrome
at Object.CliRunner.parseTestSettings (/usr/local/lib/node_modules/nightwatch/lib/runner/cli/clirunner.js:354:15)
at Object.CliRunner.init (/usr/local/lib/node_modules/nightwatch/lib/runner/cli/clirunner.js:31:8)
at module.exports.runner.runner (/usr/local/lib/node_modules/nightwatch/lib/index.js:512:19)
at /usr/local/lib/node_modules/nightwatch/bin/runner.js:9:16
at module.exports.cli.cli (/usr/local/lib/node_modules/nightwatch/lib/index.js:504:7)
at Object.<anonymous> (/usr/local/lib/node_modules/nightwatch/bin/runner.js:8:14)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
The questions i have are:
How do i point to the binary file (not sure which it is)
Are my settings in nightwatch.js correct? How is it running in FF if i changed the test_settings 'browserName = Chrome"?
Am i missing something here?
Thanks in advance
First you said
I am trying to use 'chromedriver' because 'selenium-webdriver'
requires a FF version <= 28.
Its because you are using selenium-server-standalone-2.39.0.jar (Old jar) Please download new one from here selenium-server-standalone-2.45.0.jar
Second Download chrome driver from here Chromedriver basis on your environment
Third update your nightwatch.json with below code
{
"src_folders": [
"tests"
],
"selenium": {
"start_process": false,
"server_path": "bin/selenium-server-standalone-2.45.0.jar",
"log_path": "",
"host": "127.0.0.1",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": "bin/chromedriver",
"webdriver.ie.driver": ""
}
},
"test_settings": {
"default": {
"launch_url": "http://127.0.0.1/",
"selenium_port": 4444,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": false,
"path": ""
},
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
Fourth run your group with nightwatch -g -e chrome
Hope It will solve your problem.
Make sure to create a new nightwatch.json file in the root of your project.
The mistake i made was trying to use the nightwatch.json file that came with the package downlaoded from http://nightwatchjs.org/ that resided in nightwatch-0.6.11/bin/nightwatch.json
"selenium": {
"start_process":true,
"server_path": "bin/selenium.jar",
"log_path": "",
"host": "127.0.0.1",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": "",
"webdriver.ie.driver": ""
}
},
above code helps me to run selenium server by nightwatch