How are tests organised in cypress - automated-tests

We are currently looking at swapping from selenium to cypress for our automated End to End tests as it looks as if it could stop some of the wait headaches caused by selenium.
As the login time can take a while we use a [OneTimeSetUp] at the start of a test class in NUnit to to do our initial log in then we run our tests from there.
So my question is how are tests organised in cypress? and can we run multiple tests on the same instance?

Cypress uses mocha for the structure of the tests.
describe() block in mocha groups the tests.
it() block tells that this is a test.
e.g.
describe('Login Functionality', function() {
it('Check Login with Correct Credentials', function() {
//Your code
})
it('Check Login with Incorrect Username', function() {
//Your code
})
it('Check Login with Incorrect Password', function() {
//Your code
})
})

Everything you need is in the official documentation :
https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Hooks
Enjoy Cypress!
Sample :
beforeEach(function () {
cy.visit('/users/new')
cy.get('#first').type('Johnny')
cy.get('#last').type('Appleseed')
})
it('displays form validation', function () {
cy.get('#first').clear() // clear out first name
cy.get('form').submit()
cy.get('#errors').should('contain', 'First name is required')
})
it('can submit a valid form', function () {
cy.get('form').submit()
})
})

Related

error when i use cy.xpath inside cy.origin

I'm using Cypress to test a website.
When I use xpath inside cy.origin(), It's not working.
it('t1', function() {
cy.origin(('BaseUrl'), () => {
cy.visit('/profile')
cy.xpath("//input[#name='username']").type('user')
cy.xpath("//input[#name='password']").type('pass')
cy.xpath("//button[#type='button']").click()
})
})
Error:
TypeError
cy.xpath is not a function
Note that it works correctly outside cy.origin()
TLDR: Stick with standard Cypress commands inside cy.origin().
It's a current limitation of cy.orgin(), in fact any custom command must be treated specially and cy.xpath() is a custom command.
See Callback restrictions
It is also currently not possible to use require() or dynamic import() within the callback. Because of this limitation, it cannot use npm packages or other third-party libraries inside the callback, as there is no mechanism to reference them. This functionality will be provided in a future version of Cypress.
While third-party packages are strictly unavailable, it is possible to reuse your own code between cy.origin() callbacks. The workaround is to create a custom Cypress command within the secondary origin in a before block:
before(() => {
cy.origin('somesite.com', () => {
Cypress.Commands.add('clickLink', (label) => {
cy.get('a').contains(label).click()
})
})
})
it('clicks the secondary origin link', () => {
cy.origin('somesite.com', () => {
cy.visit('/page')
cy.clickLink('Click Me')
})
})
But you can't use this pattern with cy.xpath() as you currently need to require('cypress-xpath') and that can't be done inside cy.origin().
A Workaround
Navigate to /node_modules/cypress-xpath/src/index.js
Copy the entire contents
Add a new command file in support: /cypress/support/xpath.js
Add this to the file, pasting in the copied code
before(() => {
cy.origin('somesite.com', () => { // your cross-origin URL here
// paste here code from /node_modules/cypress-xpath/src/index.js
})
})
Import xpath.js into /cypress/support/commands.js
Now cy.xpath() will work within cy.orgin() in any of your tests.
Check to see if non-xpath works.
cy.origin(('BaseUrl'), () => {
cy.visit('/profile')
cy.get("input[#name='username']").type('user')
...
If not, you've probably not set the experimentalSessionAndOrigin flag correctly.

How to have Cypress go through every page on site to see if there are any console errors and if so, make it known to the user running the test

I want Cypress to go through every page to see on a website to see if there are any console errors and if so, make it known to the user running the test. (I'm thinking it would be useful for CSP checking to see if the site is throwing a console error because of a domain not being whitelisted.)
This package cypress-fail-on-console-error
may make it easier
test
import failOnConsoleError from 'cypress-fail-on-console-error';
failOnConsoleError();
const pages = [ "/page1", "/page2" ]
pages.forEach(page => {
it(`verifies the page ${page}`, () => {
cy.visit(page)
})
})
There's some interesting stuff on Cypress and CSP here
Testing Content-Security-Policy using Cypress ... Almost
You can use a combination of Cypress functionality to achieve this. You could store the list of links in an array of strings, use Cypress Lodash to iterate through each string as a separate test, and use the onBeforeLoad callback within cy.visit() to spy on console.error.
describe('Tests', () => {
// Define links
const links = ['/1', '/2', '/3'...]
// Iterate through the links array using Cypress Lodash
Cypress._.times(links.length, (index) => {
it('validates site loads with no errors', () => {
cy.visit(links[index], {
// set the `onBeforeLoad` callback to save errors as 'error'
onBeforeLoad(win) {
cy.stub(win.console, 'error').as('error');
}
});
// Validate error was not called
cy.get('#error').should('not.have.been.called');
});
});
});
A good deal of this answer was taken from this answer.
If you'd like to be specific about the errors that fail, try catching uncaught:exception
Cypress.on('uncaught:exception', (err) => {
if (err.message.includes('Content Security Policy')) {
return true
} else {
return false // only fail on the above message
}
})
describe('Testing Content Security Policy', () => {
const pages = [ "/page1", "/page2" ]
pages.forEach(page => {
it(`visiting page ${page}`, () => {
cy.visit(page)
})
})
})

Add test dependency in Protractor & Jasmine test framework

I looked up controlling the test flow but couldn't find a direct way to do it. Still wondering if someone found an alternate way to manage below situation.
How to write test case which are dependent on previous test case success? Consider below example:
describe('Test scenario started', function() {
BeforeEach(function() {
//Doing the login here and executing it once
});
it('TC001 (independent)', function() {
// Perform steps and validate
// Click a link for newpage and verify it's loaded
});
describe('Navigate to next page', function() {
it('TC002 (Dependent on success of TC001)', function() {
// Perform steps and validate
// Click a link for nav to page #3 and verify it's loaded
});
describe('Navigate to Page #3', function() {
it('TC003 (Dependent on success of TC002)', function() {
// Page #3 is available, let's perform the tasks now
});
})
});
});
I'd like to skip the test which are dependent if the parent test case fails thereby avoiding unnecessary delay of trying to execute them. I can add all the functionality to one test case but breaking up in smaller cases is something we prefer.
Anyone have an elegant way to handle this?
You can use any one of the below:
jasmine-bail-fast
jasmine-fail-fast
It will allow you to fail tests faster.

Meteor performance: not sure if publication is causing the lag

My Meteor app runs slowly in the beginning for about ten seconds, and then becomes fast again. I am trying to improve the performance but having troubles to find the real cause.
I thought the problem was that I am publishing all the course information like following:
if (Meteor.isServer) {
Meteor.publish("courses", function() {
return Courses.find();
});
}
I tried using Kadira to monitor exactly what's happening. However, looking at the result, I am starting to think maybe it's not the real problem.
If it only takes 292ms for pubsub response time, it shouldn't feel that laggy but I cannot think of any other reason why the app would be so slow in the beginning and become fast again. Can an expert point me to the redirection?
UPDATE:
I could improve the duration of lagginess in the beginning by making the following changes:
in /server/publications.js
if (Meteor.isServer) {
Meteor.publish("courses", function() {
// since we only need these two fields for the search bar's autocomplete feature
return Courses.find({}, {fields: {'catalog':1, 'titleLong':1}});
});
Meteor.publish("courseCatalog", function(catalog) {
// publish specific information only when needed
return Courses.find({"catalog": catalog});
});
}
and in router.js I made changes accordingly so I subscribe based on specific pages. But there's still some lag in the beginning and I wonder if I can make more optimizations, and what is the real cause of the slowness in the beginning.
UPDATE2:
I followed the suggestion and made changes like below:
Session.set('coursesReady', false); on startup.
and in router:
Router.route('/', function () {
Meteor.subscribe("courses", function(err) {
if (!err) {
console.log("course data is ready")
Session.set('coursesReady', true);
}
});
....
and in /lib/helpers.js which returns data for typeahead library
if (Meteor.isClient) {
Template.registerHelper("course_data", function() {
console.log("course_data helper is called");
if (Session.get('coursesReady')) {
var courses = Courses.find().fetch();
return [
{
name: 'course-info1',
valueKey: 'titleLong',
local: function() {
return Courses.find().fetch();
},
template: 'Course'
},
But now the problem is that when the helper function is called, the data is never ready. The console print:
Q: How do I ensure that the helper function is called only after the data is ready, OR called again when the data is ready? Since Session is reactive, shouldn't it be called again automatically?
I can't check this right now, but I believe your issue might be that the course_data helper is being run multiple times before all 1000+ documents in the subscription are ready, causing the typeahead package to re-run some expensive calculations. Try something like this:
/client/views/global/helpers.js
Template.registerHelper("course_data", function() {
if (!Session.get('coursesReady')) return [];
return [ //...
/client/subscriptions.js
Meteor.subscribe("courses", function(error) {
if (!error) Session.set('coursesReady', true);
});
Update:
Really, Meteor's new features this.subscribe() and Template.instance().subscriptionsReady() are ideal for this. Session isn't really the right choice, but it should still be reactively updating (not sure why it isn't for you). Try instead making the following changes to /client/views/navwithsearch.js (and main, though ideally both templates should share a single search template):
Template.NavWithSearch.onCreated(function() {
this.subscribe('courses');
});
Template.NavWithSearch.onRendered(function() {
this.autorun(function() {
if (Template.instance().subscriptionsReady()) {
Meteor.typeahead.inject();
}
});
});
The idea is to tie the lifecycle of the subscription to the view that will actually be using that subscription. This should delay the typeahead injection until the subscription is completely ready.

How to test Meteor router or Iron router with laika

I'm using laika for testing and the meteor-router package for routing. I want to do tests that navigate to some page, fill a form, submit it and check for a success message, but I'm stuck on the navigation part. This was my first attempt:
var assert = require('assert');
suite('Router', function() {
test('navigate', function(done, server, client) {
client.eval(function() {
Meteor.Router.to('test');
var title = $('h1').text();
emit('title', title);
})
.once('title', function(title) {
assert.equal(title, 'Test');
done();
});
});
});
This doesn't work because Meteor.Router.to doesn't have a callback and I don't know how to execute the next line when the new page is loaded.
I tried also with something like this
var page = require('webpage').create();
page.open('http://localhost:3000/test', function () {
...
}
but I got the error Error: Cannot find module 'webpage'
Edit
I'm moving to iron router, so any answer with that also will be helpful.
I had the same problem. I needed to navigate to some page before running my tests. I'm using iron router as well. I figured you can't just execute Router.go('foo') and that's it. You need to wait until the actual routing took place. Fortunately the router exposes a method Router.current() which is a reactive data source that will change as soon as your page is ready. So, in order to navigate to a specific route before running my tests, I firstly run the following code block:
// route to /some/path
client.evalSync(function() {
// react on route change
Deps.autorun(function() {
if (Router.current().path == '/some/path') {
emit('return');
this.stop();
}
});
Router.go('/some/path');
});
Since this is within an evalSync()everything that follows this block will be executed after the routing has finished.
Hope this helps.
Laika now includes a waitForDOM() function you can set up to wait for a specific DOM element to appear, which in this case would be an element in the page you're loading.
client.eval(function() {
Router.go( 'test' );
waitForDOM( 'h1', function() {
var title = $('h1').text();
emit( 'title', title );
});
});
The first parameter is a jQuery selector.

Resources