How do I pass Cypress arguments to a NPM e2e build job? - cypress

How do I pass Cypress arguments to a NPM e2e build job?
I tried something like this but I cannot get variables to expand:
USERNAME=$EMAIL PASSWORD=$SECRET ng e2e --config-file=dev-cypress.config.ts
I also tried this:
ng e2e -- --USERNAME=$EMAIL --PASSWORD=$SECRET --CYPRESS_CONFIG_FILE=dev-cypress.config.ts
ng e2e --USERNAME=$EMAIL --PASSWORD=$SECRET --CYPRESS_CONFIG_FILE=dev-cypress.config.ts
And I tried this:
CYPRESS_CONFIG_FILE=dev-cypress.config.ts USERNAME=$EMAIL PASSWORD=$SECRET ng e2e
What am I missing? Whatever I try, the Cypress "effective configuration" does not expand the env variables correctly (at all)
Here is my build config in my angular.json config:
....
"e2e": {
"builder": "#cypress/schematic:cypress",
"options": {
"devServerTarget": "pas-ng-xdm:serve",
"watch": true,
"headless": false
},
"configurations": {
"production": {
"devServerTarget": "pas-ng-xdm:serve:production"
}
}
}
NOTE: Using a npx cypress command, that works for me:
"cypress:run:dev": "npx cypress run --config-file dev-cypress.config.ts --record
--key 0000000-e33c-4c88-9ead-1d0000000c --browser chrome --headless",
NOTE 2: When using the ng e2e, my only option is to allow it to load the default cypress.config.ts. Maybe that is ok: perhaps this is working as designed?

Related

Cypress recording

just wanted to ask if this is possible to change the location folder for recorded file? I am running tests for two different applications, one after another, and when tests are finished for both of them, I can only access the latest recording.
Thanks in advance!
You can add videosFolder attribute in your cypress config file with the folder path.
videosFolder: 'cypress/videos_project_2'
You can override the videosFolder path from the CLI, something like this:
npx cypress run --config videosFolder=cypress/videos_project_2
In your package.json, create two scripts like this:
"scripts": {
"test:project1": "npx cypress run --config videosFolder=cypress/videos_project_1",
"test:project2": "npx cypress run --config videosFolder=cypress/videos_project_2",
}
Then as per the project, directly run the commands:
npm run test:project1
//or
npm run test:project2
The easiest way is to set trashAssetsBeforeRuns.
See Videos
Cypress clears any existing videos before a cypress run. If you do not want to clear your videos folder before a run, you can set trashAssetsBeforeRuns to false.
cypress.config.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
video: true,
trashAssetsBeforeRuns: false
},
});

How to run lerna sequentially?

Goal
Wish to know how with Lerna to run packages in sequential mode.
Approach
This is learn.json with its packages declaration:
{
"npmClient": "npm",
"npmClientArgs": [
"--registry",
"https://npm.foo.com"
],
"command": {
"publish": {
"ignoreChanges": [
"**/.spec.*",
"**/*.md",
"**/tsconfig*.*"
],
"registry": "https://npm.foo.com"
}
},
"packages": [
"packages/commands/*",
"packages/specs/*",
"packages/support/*",
"packages/tasks/*",
"packages/tools/*"
],
"version": "independent"
}
And in package.json, the following is a sampling of its scripts making lerna run requests:
"audit": "lerna run audit --stream",
"build": "lerna run build --stream",
"clean": "lerna clean",
"postinstall": "lerna bootstrap",
"upgrade": "lerna run npm:upgrade --stream",
"test": "lerna run coverage --stream"
The goal is to modify the package.json script "test" so that lerna runs each of the packages' test sequentially over each of the packages and not in parallel.
And if possible, run tests in a specific order.
How should this "test" script be modified?:
"test": "lerna run test --stream"
lerna run does have a command option --parallel, however, I am experiencing that without this option set, execution is happening asynchronously (parallel):
--parallel Run script with unlimited concurrency, streaming prefixed output.
lerna run --concurrency 1
Global Options:
--concurrency How many processes to use when lerna parallelizes tasks. [number] [default: 10]

Keep browser open while developing a test in Testcafe

How to keep the browser window open after a test executes in Testcafe?
There was a question on the forum here that brought me to a live Testcafe version, but it seems to be deprecated.
I wish to keep the browser window open to see the elements while I'm developing the test.
Update:
This is my config file:
{
"name": "testcafe-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"testcafe": "^1.8.2"
},
"devDependencies": {},
"scripts": {
"test": "testcafe chrome tests/",
"testcafe": "testcafe"
},
"author": "mmrse",
"license": "ISC"
}
I tried starting the tests from the command line with
E:\testcafe-demo> npm run testcafe chrome demo.testcafe.ts --live
and with
E:\testcafe-demo> npm test chrome demo.testcafe.ts --live
but the result is always the same - after the test is finished, the browser is closed and there is no indication "live" mode was being activated.
Features from TestCafe Live were integrated into the main TestCafe product.
See Live Mode for more information.
Make sure to add the --live argument into your script:
"scripts": {
"test": "testcafe chrome tests/ --live",
"testcafe": "testcafe"
},
And run your tests using npm run test.
Here's another example:
screeshot.js
import { Selector } from 'testcafe';
fixture `My fixture`
.page `http://devexpress.github.io/testcafe/example/`;
test('Take a screenshot of a fieldset', async t => {
await t
.typeText('#developer-name', 'Peter Parker')
.click('#submit-button')
.takeScreenshot({
path: 'my-fixture/thank-you-page1.png',
fullPage: true
});
});
Command-line arguments:
testcafe chrome screenshot.js --live
Output:
Using locally installed version of TestCafe.
Live mode is enabled.
TestCafe now watches source files and reruns
the tests once the changes are saved.
You can use the following keys in the terminal:
'Ctrl+S' - stops the test run;
'Ctrl+R' - restarts the test run;
'Ctrl+W' - enables/disables watching files;
'Ctrl+C' - quits live mode and closes the browsers.
Watching the following files:
c:\Temp\screenshot.js
Running tests in:
- Chrome 79.0.3945.130 / Windows 10
My fixture
√ Take a screenshot of a fieldset (screenshots: c:\Temp\screenshots\my-fixture\thank-you-page1.png)
1 passed (5s)
Make changes to the source files or press Ctrl+R to restart the test run.

Attaching a debugger to a parcel built app

I have my project setup as follows, within my package.json I have the follow:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel ./public/index.html --open",
"build": "parcel build ./public/index.html NODE_ENV=production --no-source-maps --public-url ./public --out-dir ./dist",
"lint": "eslint --ext .js,.vue src --fix"
},
I can start my project by running: npm run:dev which starts as follows:
To debug the "dev" script, make sure the $NODE_DEBUG_OPTION string is specified as the first argument for the node command you'd like to debug.
For example:
"scripts": {
"start": "node $NODE_DEBUG_OPTION server.js"
}
> impcentral#1.0.0 dev /Users/william/imp/src/impCentral
> parcel ./public/index.html --open
Server running at http://localhost:63188 - configured port 1234 could not be used.
As you can tell it does not stop at my break points within WebStorm. I've tried passing in the $NODE_DEBUG_OPTION within the package.json but to no avail.
Any ideas folks, open to trying this in Visual Studio Code too.
You don't need running your NPM configuration in debugger unless you need debugging parcel itself. As your application, served by parcel, is run in browser, you have to use JavaScript Debug run configuration to debug it.
start your app by running npm run dev (either in WebStorm or in terminal)
create a JavaScript Debug run configuration with your server URL (http://localhost:1234, or http://localhost:63188 in your case):
select this configuration and press Debug

chai-http not exiting after running tests

I ran into a problem where my mocha tests were not finishing after running with chai-http. Mocha just hangs after the tests and eventually runs into a timeout (at least on my CI).
Turns out, Mocha (4.0) changed their behavior regarding the termination of the tests. The best workaround I have found is to add the --exit flag to the npm script to revert to pre-4.0 behaviour.
...
"scripts": {
"start": "node server.js",
"test": "mocha --exit"
},
...

Resources