How can I resolve leaking memory in the cypress? - cypress

There is React Application (ant).
Cypress 10.3.1.
testList.cy.js:
import './1_test.cy';
...
import './30_test.cy';
test.cy.js:
describe('test' , () => {
before(() => {
cy.intercept('/login').as('makeLogin')
cy.makeLogin();
cy.wait('#makeLogin')
cy.wait(0)
});
it('TEST' , () => {
cy.visit('https://localhost:3000/home')
cy.wait(0)
cy.get('.element')
.should('be.visible')
.click({ force:true }); // This string doesn't operate as expected
})
})
config.cy.js:
numTestsKeptInMemory: 1,
pageLoadTimeout: 60000,
defaultTimeout: 30000,
defaultCommandTimeout: 40000,
requestTimeout: 60000,
responseTimeout: 60000,
timeout: 60000
Command.js :
Cypress.Commands.add('makeLogin', () => {
... command description ...
});
});
I execute each test (from 1 to 30). Tests operate as expected.
But if I execute testList.cy.js I had problem:
I launch cypress open and execute testList.cy.js.
Actual result: Cypress application falled
I use cypress run --spec 'cypress/e2e/testList.cy.js' --browser chrome .
Actual Result: The testList.cy.js faulted. Few tests '№_test.cy.js' fall on the string (I marked this string in the test.cy.js)
I guess that it is leaking memory, maybe. Maybe, can I clear cypress cash before each №_test.cy.js in the testList.cy.js file? How can I resolve this problem?

Related

Cypress - Unable to run multiple tests

I am very new to cypress automation and have been following though some examples and have ran into an issue that does not appear to be addressed in any video I have seen, where multiple tests in the same 'describe' do not run as expected.
If I create the following code & run it, it all works perfectly:-
describe('My First Test', () => {
it('Open Google', () => {
cy.visit('https://google.co.uk')
cy.get('#L2AGLb > .QS5gu').click()
cy.get('.gLFyf').type('Automation Step by Step{Enter}')
})
})
I have then attempted to split up the test into individual tests, as follows:-
describe('My First Test', () => {
it('Open Google', () => {
cy.visit('https://google.co.uk')
})
it('Confirm warning', () => {
cy.get('#L2AGLb > .QS5gu').click()
cy.get('.gLFyf').type('Automation Step by Step{Enter}')
})
it('Confirm warning', () => {
cy.get('.gLFyf').type('Automation Step by Step{Enter}')
})
})
The problem now is that after opening Chrome and then going into the next test, which should allow me to type the text, a 'default blank page' is displayed and the tests then fail.
What am I missing here to be able to run these three tests fully?
Code in VS Code
Error after opening Chrome & attempting to type in box
As above really, I was hoping to be able to run all three simple tests together.
EDIT - I rolled back my version of Cypress to 10.10.0 and it works perfectly, so no idea what has changed on the latest version released yesterday.
Try it with Test Isolation turned to false.
Best Practice: Tests should always be able to be run independently from one another and still pass
This was added in Cypress 12.0.0.
But if you want to play without it,
Test Isolation Disabled
testIsolation
beforeEach test
true
- clears page by visiting about:blank
- clears cookies in all domains
- local storage in all domains
- session storage in all domains
false
does not alter the current browser context
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
testIsolation: false,
},
})
You should visit your page for every test. You can put the cy.visit in a beforeEach function.

converting cypress BDD tests to mocha format

i have suit of BDD tests written in cypress-typescript, which i would like to convert to mocha format. this is contents of a sample test.spec.ts file
///<reference types='cypress'/>
describe('mock test', () => {
console.log('hello i have execuited');
});
this is the contents of cypress.jason file-
{
"testFiles": "**.spec.ts",
"ignoreTestFiles": "cypress/**/*.ts"
}
upon execuition of the command yarn cypress open via the terminal, i can see the tests under the cypress windown but when i try to run them i get this error message-
No tests found.
Cypress could not detect tests in this file.
Error: The service was stopped
at C:\Users\------\IdeaProjects\kura\node_modules\esbuild\lib\main.js:1335:25
at C:\Users\------\IdeaProjects\kura\node_modules\esbuild\lib\main.js:666:9
at Socket.afterClose (C:\Users\------\IdeaProjects\kura\node_modules\esbuild\lib\main.js:644:7)
at Socket.emit (node:events:539:35)
at endReadableNT (node:internal/streams/readable:1345:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
any help highly appreciated
The describe() block is simply a way to group our tests, whereas it() blocks are like individual tests.
You need to create individual tests within your describe block like so:
/// <reference types="cypress" />
describe('example to-do app', () => {
it('displays two todo items by default', () => {
console.log('hello i have execuited');
})
it('can add new todo items', () => {
console.log('hello i have execuited');
})
})

How can I see `cy.log` output when using Cypress headlessly?

When running Cypress headlessly, I can see console.log output from the frontend code under test by using the DEBUG environment variable, like:
DEBUG='cypress:launcher' npx cypress run --browser chrome
However, I haven't found any similar way to see the output of cy.log from the Cypress test code when running headlessly. Even with DEBUG='cypress:*' I don't see them - they only seem to be visible in the interactive interface. It feels like there must be some way to see the cy.log output headlessly - can someone help with that?
The first step is to add a new task in your Cypress config file so that you can run console.log from Node:
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on("task", {
log(args) {
console.log(...args);
return null;
}
});
},
},
});
Then, you can override cy.log so that it calls this task whenever you run the command in headless mode, and console.log when you're running in headed mode. You can do this by adding the following to your commands file:
Cypress.Commands.overwrite("log", function(log, ...args) {
if (Cypress.browser.isHeadless) {
return cy.task("log", args, { log: false }).then(() => {
return log(...args);
});
} else {
console.log(...args);
return log(...args);
}
});

Detailed Reporting Cypress/Mochawesome

Has anyone had much experience of generating good detailed reports from Cypress tests using Mochawesome as the report engine?
I've followed the info on the Mochawesome GIT page but what I get is rather dull!!
I'd like to be able to include the odd screen-shot and the output from the assertions - here's the current cypress.json file......
{
"projectId": "haw8v6",
"baseUrl": "https://obmng.dbm.guestline.net/",
"chromeWebSecurity": false,
"reporter" : "mochawesome",
"reporterOptions" : {
"reportFilename" : "DBM Smoke-Test",
"overwrite": true,
"inline": true
}
}
I've been toying with var addContext = require('mochawesome/addContext'); but with little joy.
Suggestions gratefully received.
Thanks
As per request below - very basic example of addContext
var addContext = require('mochawesome/addContext');
describe('DBM Smoketests', function() {
it('E2E Hotel2 WorldPay System', function() {
cy.visit('https://obmng.dbm.guestline.net/');
cy.url().should('include','/obmng.dbm');
addContext(this,'URL is correct');
//loads hotel 2
cy.get('.jss189 > div > .jss69 > .jss230').click();
After much hacking about, I found a way to use Mochawesome addContext in Cypress.
Note, you can only make one addContext call per test (this is a Mochawesome limitation).
describe('DBM Smoketests', function() {
it('E2E Hotel2 WorldPay System', function() {
cy.visit('https://obmng.dbm.guestline.net/');
cy.url().should('include','/obmng.dbm');
Cypress.on('test:after:run', (test) => {
addContext({ test }, {
title: 'This is my context title',
value: 'This is my context value'
})
});
});
});
The second param is the context to be attached to the test, and it must have non-empty title and a value properties.
What you get in the mochawesome.json output is
...
"suites": [
{
...
"tests": [
{
"title": "E2E Hotel2 WorldPay System",
...
"context": "{\n \"title\": \"This is my context title\",\n \"value\": \"This is my context value\"\n}",
"code": "...",
...
}
],
In mochawesome.html, on clicking the test you get
Additional Test Context
This is my context title:
This is my context value
I have not tried it out with value types other than string.
Note for anyone starting out with Mochawesome in Cypress, it looks like you can only get a Mochawesome report with running cypress run, not with cypress open - although there may be a way around this using mocha's multiple reporter functionality.
Yes confirmed work! It's possible to call once in each test like this:
it('Should shine the test report!!!', () => {
cy.get('li').should('have.length.greaterThan', 0);
addTestContext('String','giphy');
addTestContext('Link','https://giphy.com');
addTestContext('Image','https://media.giphy.com/media/tIIdsiWAaBNYY/giphy.gif');
addTestContext('Image','https://media.giphy.com/media/tIIdsiWAaBNYY/giphy.gif');
});
function addTestContext(title, value) {
cy.once('test:after:run', test => addContext({ test }, { title, value }));
}

how to configure gulp-mocha with the following mocha.opts configuration?

I am trying to run mocha with gulp with the configuration existed before.
moch.opts has the following line.
--timeout 999999
--ui tdd
--full-trace
--recursive
--compilers js:babel-register
how to add them here :
gulp.task('test', function() {
return gulp.src('sampleTest/*.js', { read: false })
.pipe(mocha());
});
I believe you can either create properties on the options object passed to gulp-mocha or you can just have it read the options file. In my case, I didn't want to duplicate things like --recursive or --require test/_init.js, but I did want to override the reporter, so I use the code shown below:
gulp.task('test', ['compile'], function() {
return gulp.src([], { read: false })
.pipe(mocha({
opts: 'test/mocha.opts',
reporter: 'min'
}))
.on('error', gutil.log);
});
You may want to modify this so that it doesn't assume the default path to test files (e.g. test/*.js), but in my simple case I didn't even need to pass a path to mocha. I'm just using gulp to trigger it (as if I had run on the command line something like mocha --opts test/mocha.opts --reporter min)
Options are passed directly to the mocha binary, so you can use any its command-line options in a camelCased form. this is the document link
gulp.task('test', ['compile'], function() {
return gulp.src([], { read: false })
.pipe(mocha({
timeout: 999999,
fullTrace: true,
reporter: 'min'
}))
.on('error', gutil.log);
});
add the setTimeout call after the mocha call
.pipe(mocha(),setTimeout(function() {
}, 999999))

Resources