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.
Related
After running Hardhat tests in the console with npx hardhat test I decided that being able to set break points would help me iterate faster.
How can I get Webstorm to run the underlying functions started by npx hardhat test so that I can use the built in Debugger?
I've since discovered that hardhat runs mocha under the hood.
To debug in WebStorm you can:
delete your existing configurations
create a new mocha configuration
set any configurations in 'Node options'. Note: since I'm forking the main net it takes a while for tests to start so I added the --timeout 10000 because mocha's default timeout is only 2000ms
select the mocha package, WebStorm doesn't select it by default
set your test file pattern
add const {ethers} = require('hardhat'); to your test file because it is no longer injected by hardhat during run time.
If the green debug icon does not appear I had success in closing and reopening WebStorm.
At this point I could successfully set break points in my test file but not in the MyContract.sol file. This is not surprising given that the contract is compiled before its run.
Create or open the package.json file for your Hardhat project.
Add a test NPM run script and save the file. Your package.json should look something like this.
{
"name": "hardhat-project",
"scripts": {
"test": "hardhat test"
},
"devDependencies": {
"#nomiclabs/hardhat-ethers": "2.0.2",
"#nomiclabs/hardhat-waffle": "2.0.1",
"chai": "4.3.4",
"ethereum-waffle": "3.4.0",
"ethers": "5.4.4",
"hardhat": "2.6.0"
}
}
In the left gutter of the editor pane, a little play icon should appear, click it and then click Debug "test".
I go through the instructions in a little more detail here, but this is the general idea. https://allendefibank.medium.com/how-to-debug-solidity-contracts-in-webstorm-hardhat-2ea0d3c4d582
If you're use typescript you need to import ts-mocha instead of mocha
Running Cypress and came across using xpath in Cypress and I am trying the following code in .js file.
/// <reference types = "cypress" />
describe ("Test Contact us form",()=>{
it("Should be able to submit the form", ()=>{
cy.visit('some url');
cy.xpath('//a[contains (#href, "contact")]').click();
});
})
This is how my xpath node_modules directory path looks like
\Projects\node_modules\xpath
Here is my index.js
// Alternatively you can use CommonJS syntax:
// require('./commands')
require('xpath')
Here is my package.json
{
"name": "projects",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "Thisistest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^5.2.0",
"xpath": "0.0.29"
}
}
Here is a snippet of the package-lock.json
"xpath": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.29.tgz",
"integrity": "some key",
"dev": true
},
After running the test, I am getting the following compilation error.
Its a TypeError.
cy.xpath is not a function
Seems to be a small config thing. However, followed the exact steps as given on https://github.com/cypress-io/cypress-xpath#readme
I removed and re-setup cypress and xpath again using npm through git bash and it worked.
Previously, I had setup using node.js command prompt. After installing xpath using same npm command, xpath was successfully downloaded, however, the directory name inside node_modules was just xpath instead of cypress-xpath. Now, even though I had require('xpath') under the index.json file, it was still unable to detect xpath.
[Updated for Cypress Ver- 10.9.0 in year 2022]
Use link below to install: cypress-xpath plugin
https://www.npmjs.com/package/cypress-xpath
Step 1: Install XPath Plugin using below command
npm install cypress-xpath
Step 2 Add this line to e2e.js in support folder
require('cypress-xpath');
Step 3 Add your xpath in cy.xpath method like below:
cy.xpath("//input[#name='userName']").should("be.visible");
Please make sure to check that you're getting code intellisense like this (refer image attached), once successful installation of the cypress-xpath plugin.
I had faced the same issue.
then I changed the reference types from cypress to cypress-xpath as follows
///reference types = 'cypress-xpath'
and the problem is resolved.
This might be helpful to you.
I downloaded cypress-xpath and updated the config file with requires('cypress-xpath) and then tried and it worked
I am using Cypress for end to end testing, and I would like to be able to see all run test suites, in the browser, even after they are run. Currently, after each test suite is completed (test which are stored in separate files), the browser reloads and I cannot see previously run tests, and after the final test suite, the browser closes. Is there an option to change this behavior so that I can run all test files, have all the results visible in the browser and that the browser doesn't close at the end?
I am currently running tests using this command: ./node_modules/.bin/cypress run --headed --spec 'cypress/integration/tests/*'
where /tests is the folder where I currently have my files.
I have added --no-exit but in this case cypress doesn't move to the next test file and only the first one runs.
A workaround solution could be to generate reports with Mochawsome, for each Test Spec, and then merge and view those rendered reports. The reports will contain the results from the tests, test bodies, any errors that occurred and some other bits of information.
If you read through the page in the link it shows you how to generate individual reports then combine them together, and then render them as HTML. These can then be viewed in the browser.
This command can be used to install what's needed npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator
and then add the Reporter configuration to the cypress.json:
{
"reporter": "mochawesome",
"reporterOptions": {
"reportDir": "cypress/results",
"overwrite": false,
"html": false,
"json": true
}
}
Keep in mind that it may not give you the level of detail that is contained in the Cypress Dashboard in the browser, for example, what was yielded from a request.
Cypress has a lot of possible command with a lot of possible config too.
Read this.
And if you use npm just run like this :
npm run cypress:open
and in your package.json :
"scripts": {
"cypress:open": "cypress open"
}
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
I am trying to have npm watch for file changes in my client side code. I can have it work from the command line ok but I'd really like it to work from Visual Studio task runner.
my package.json looks something like this:
...
"watch": {
"compile": {
"patterns": [
"wwwroot"
],
"extensions": "ts"
}
},
"scripts": {
"prebuild": "copyfiles -f ./node_modules/d3/build/*.js ./wwwroot/lib/d3",
"compile": "tsc && browserify ./wwwroot/app/app.js -o ./wwwroot/bundle.js",
"build": "npm run compile",
"watch": "npm-watch"
},
...
So running npm run build then npm run watch from the command line has everything running as expected.
When I use the Task Runner however to bind my watch script to the After Build event like this:
it never 'exits' and, as such, the build never completes* and Visual Studio waits for me to kill the task before the application runs. Is there a way to have the script run in the background or some kind of 'detached' mode to enable Visual Studio to complete the build and run the application?
I tried using different watch tools but can't find any such option in any of them.
*Actually, I guess the build itself probably DOES complete but VisualStudio never runs the app and just hangs waiting on the script exiting.
Change the watch Bindings to Project Open. Then it will start watching after the project is opened.