In Cypress I'm trying to test something in a backend. I'm really struggling to control if the user is logged in or not.
I'm trying to automate all testing that i do, when developing features. I spend so much time and effort to control if the user is logged in or not.
I'm looking for a command that does this:
Logout any user (if one is logged in), when starting any test.
A fast way to do something like: cy.loginUser( 'foo#example.org', 'password' )?
Since this will have to run before many of the tests, if would be nice to streamline it.
It's being used on a Laravel / Vue application (hence the CSRF-token).
My current attempt:
Cypress.Commands.add( "loginUser", ( email, password ) => {
cy.server();
// Source: https://github.com/cypress-io/cypress/issues/413
sessionStorage.clear();
cy.clearCookies();
cy.clearLocalStorage();
cy.window().then((win) => {
win.sessionStorage.clear()
});
cy.visit( Cypress.env( 'baseUrl' ) + "/login");
cy.location().should((loc) => {
expect(loc.pathname).to.eq('/login')
});
cy.get("head meta[name=csrf-token]")
.then((meta) => {
const csrf = meta[0].content;
cy.request({
method: 'POST',
url: '/login',
body: {
_token: csrf,
email: email,
password: password
}
});
});
cy.visit( Cypress.env( 'baseUrl' ) + "/login");
});
The problems with this:
For some wierd reason... Every second time, the user remains logged in from the previous session. But if that happens, then I simply have to run it again, - and then the user is logged out. It's driving me bananas.
It's not slow, - but it's not fast either (considering that I do it a bazillion times). So if it could be done faster (with less page loads), then it would be smashing.
Try to use another way to clear localStorage. For example, I'm using these commands to save, restore and clear storage and is working perfect. I'm using these for log in/log out things.
let LOCAL_STORAGE_MEMORY = {};
Cypress.Commands.add("saveLocalStorage", () => {
Object.keys(localStorage).forEach(key => {
LOCAL_STORAGE_MEMORY[key] = localStorage[key];
});
});
Cypress.Commands.add("restoreLocalStorage", () => {
Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
});
});
Cypress.Commands.add("clearLocalStorageCache", () => {
localStorage.clear();
LOCAL_STORAGE_MEMORY = {};
});
Related
I manage to run CYPRESS without any worries on a site without authentication.
But on an intranet, I can't identify myself. I must to log in before.
Here is my code:
describe('home', () => {
it('home accessible', () => {
cy.visit('/')
})
//We fill the login FORM
it('User Field', () => {
cy.get('input#user')
.type('login')
})
it('User pass', () => {
cy.get('input#pass')
.type('mot de passe')
})
it('check consent', () => {
cy.get('input#permalogin')
.click({ force: true })
})
it('submit', () => {
cy.get('input.btn.btn-primary')
.click()
})
//the form is submit, we can visit a page
it('autre page!!', () => {
cy.visit('/luniversite/page-2',{ timeout: 30000 })
})
//We check the title of the page, we should be on the page 2
it('titre page 2', () => {
cy.title().should('eq', 'page 2: INTRANET)
})
CYPRESS and the CYPRESS video show me that I am blocked on the authentication page.
The test on the title of the page is not correct, I don't access page-2. I stay on the first page for log in.
First thing's first: This appears to be one test, but you are specifying multiple it() functions, which is breaking it up into multiple tests, which is not what you want. You will want to restructure your test like this:
describe("home", () => {
it("home accessible", () => {
cy.visit("/");
//We fill the login FORM
cy.get("input#user").type("login");
cy.get("input#pass").type("mot de passe");
cy.get("input#permalogin").click({ force: true });
cy.get("input.btn.btn-primary").click();
cy.visit("/luniversite/page-2", { timeout: 30000 });
cy.title().should("eq", "page 2: INTRANET");
});
});
With that out of the way, it's hard to know what your application is doing without more details:
1/ When executed manually, is your application authenticating properly with the provided credentials? Do you have console errors? Have you determined that the element locators you're using are actually interacting with the elements in the manner you expect?
2/ Is your test attempting to navigate to /luniversite/page-2 before authentication is complete? If so, you may want to use intercept your authentication call and wait for it to complete:
// get your authentication POST request from network tab of devtools and use that in the cy.intercept call
cy.intercept('POST', '/yourAuthenticationCallUrl').as("#authenticationCall")
// YOUR LOGIN STEPS HERE
cy.wait("#authenticationCall") //waits for the authentication call to complete before moving to the next step
cy.visit("/luniversite/page-2", { timeout: 30000 });
After putting off testing for a while now due to Cypress not allowing visiting chrome:// urls, I decided to finally understand how to unit/integration test my extension - TabMerger. This comes after the many times that I had to manually test the ever growing functionality and in some cases forgot to check a thing or two. Having automated testing will certainly speed up the process and help me be more at peace when adding new functionality.
To do this, I chose Jest since my extension was made with React (CRA). I also used React Testing Library (#testing-library/react) to render all React components for testing.
As I recently made TabMerger open source, the full testing script can be found here
Here is the test case that I want to focus on for this question:
import React from "react";
import { render, fireEvent } from "#testing-library/react";
import * as TabFunc from "../src/Tab/Tab_functions";
import Tab from "../src/Tab/Tab";
var init_groups = {
"group-0": {
color: "#d6ffe0",
created: "11/12/2020 # 22:13:24",
tabs: [
{
title:
"Stack Overflow - Where Developers Learn, Share, & Build Careersaaaaaaaaaaaaaaaaaaaaaa",
url: "https://stackoverflow.com/",
},
{
title: "lichess.org • Free Online Chess",
url: "https://lichess.org/",
},
{
title: "Chess.com - Play Chess Online - Free Games",
url: "https://www.chess.com/",
},
],
title: "Chess",
},
"group-1": {
color: "#c7eeff",
created: "11/12/2020 # 22:15:11",
tabs: [
{
title: "Twitch",
url: "https://www.twitch.tv/",
},
{
title: "reddit: the front page of the internet",
url: "https://www.reddit.com/",
},
],
title: "Social",
},
};
describe("removeTab", () => {
it("correctly adjusts groups and counts when a tab is removed", () => {
var tabs = init_groups["group-0"].tabs;
const { container } = render(<Tab init_tabs={tabs} />);
expect(container.getElementsByClassName("draggable").length).toEqual(3);
var removeTabSpy = jest.spyOn(TabFunc, "removeTab");
fireEvent.click(container.querySelector(".close-tab"));
expect(removeTabSpy).toHaveBeenCalledTimes(1);
expect(container.getElementsByClassName("draggable").length).toEqual(2); // fails (does not remove the tab for some reason)
});
});
I mocked the Chrome API according to my needs, but feel that something is missing. To mock the Chrome API I followed this post (along with many others, even for other test runners like Jasmine): testing chrome.storage.local.set with jest.
Even though the Chrome storage API is mocked, I think the issue lies in this function which gets called upon initial render. That is, I think the chrome.storage.local.get is not actually being executed, but am not sure why.
// ./src/Tab/Tab_functions.js
/**
* Sets the initial tabs based on Chrome's local storage upon initial render.
* If Chrome's local storage is empty, this is set to an empty array.
* #param {function} setTabs For re-rendering the group's tabs
* #param {string} id Used to get the correct group tabs
*/
export function setInitTabs(setTabs, id) {
chrome.storage.local.get("groups", (local) => {
var groups = local.groups;
setTabs((groups && groups[id] && groups[id].tabs) || []);
});
}
The reason I think the mocked Chrome storage API is not working properly is because when I manually set it in my tests, the number of tabs does not increase from 0. Which forced me to pass a prop (props.init_tabs) to my Tab component for testing purposes (https://github.com/lbragile/TabMerger/blob/f78a2694786d11e8270454521f92e679d182b577/src/Tab/Tab.js#L33-L35) - something I want to avoid if possible via setting local storage.
Can someone point me in the right direction? I would like to avoid using libraries like jest-chrome since they abstract too much and make it harder for me to understand what is going on in my tests.
I think I have a solution for this now, so I will share with others.
I made proper mocks for my chrome storage API to use localStorage:
// __mocks__/chromeMock.js
...
storage: {
local: {
...,
get: function (key, cb) {
const item = JSON.parse(localStorage.getItem(key));
cb({ [key]: item });
},
...,
set: function (obj, cb) {
const key = Object.keys(obj)[0];
localStorage.setItem(key, JSON.stringify(obj[key]));
cb();
},
},
...
},
...
Also, to simulate the tab settings on initial render, I have a beforeEach hook which sets my localStorage using the above mock:
// __tests__/Tab.spec.js
var init_ls_entry, init_tabs, mockSet;
beforeEach(() => {
chrome.storage.local.set({ groups: init_groups }, () => {});
init_ls_entry = JSON.parse(localStorage.getItem("groups"));
init_tabs = init_ls_entry["group-0"].tabs;
mockSet = jest.fn(); // mock for setState hooks
});
AND most importantly, when I render(<Tab/>), I noticed that I wasn't supplying the id prop which caused nothing to render (in terms of tabs from localStorage), so now I have this:
// __tests__/Tab.spec.js
describe("removeTab", () => {
it("correctly adjusts storage when a tab is removed", async () => {
const { container } = render(
<Tab id="group-0" setTabTotal={mockSet} setGroups={mockSet} />
);
var removeTabSpy = jest.spyOn(TabFunc, "removeTab");
var chromeSetSpy = jest.spyOn(chrome.storage.local, "set");
fireEvent.click(container.querySelector(".close-tab"));
await waitFor(() => {
expect(chromeSetSpy).toHaveBeenCalled();
});
chrome.storage.local.get("groups", (local) => {
expect(init_tabs.length).toEqual(3);
expect(local.groups["group-0"].tabs.length).toEqual(2);
expect(removeTabSpy).toHaveBeenCalledTimes(1);
});
expect.assertions(4);
});
});
Which passes!!
Now on to drag and drop testing 😊
In Cypress I am using cy.route() for sending the below request, but cypress is not identifying the below request send. In the route url there is a openHash value which will be different for every POST request. Is there any way to ignore the openHash value or accept what ever value displays there.
So far I have tried by giving the url in following ways in route.
url: '**/student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=**',
url: '**/student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=**&ajaxCall=true**',
I believe while using cy.route() the POST url need to match exactly. Could someone please advise
Cypress version: 5.4.0
Student.feature
Feature: Update student details
Background: User logged in to application
Given I should load all of the routes required for tests
Scenario: Update student details
When I am logged in as the student user
And I click on "Student" subtab
And I should see details displayed
Step definition:
import { Then, When, And } from "cypress-cucumber-preprocessor/steps";
before(() => {
Then('I should load all of the routes required for tests', () => {
cy.server();
cy.route({
method: 'POST',
url: '**student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=5fc8329a76e73&ajaxCall=true**',
delay: 2000
}).as('getStudentTabDetails');
})
})
Then('I am logged in as the student user', () => {
cy.get('[name=loginUsername]').type("Student1");
cy.get('[name=loginPassword]').type("somePassword1", { sensitive: true });
cy.contains('Login').click();
})
Then('I click on {string} subtab', (student) => {
cy.get('#main a').contains(student).click({force:true});
});
Then('I should see details displayed', () => {
cy.wait('#getStudentTabDetails', { timeout: 5000 });
});
Error:
CypressError
Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: getStudentTabDetails. No request ever occurred.
Cypress.minimatch is a tool that can be used for checking the route matchers.
By default Cypress uses minimatch to test glob patterns against request URLs.
If you’re struggling with writing the correct pattern you can iterate much faster by testing directly in your Developer Tools console.
The two routes you show in the question actually pass the minimatch test.
const url = 'http://example/student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=5fc8329a76e73&ajaxCall=true';
const pattern1 = '**/student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=**';
console.log( Cypress.minimatch(url, pattern1) ); // true
const pattern2 = '**/student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=**&ajaxCall=true**';
console.log( Cypress.minimatch(url, pattern2) ); // true
Here is a Cypress fiddle that shows how to use the new intercept method to handle query parameters.
/// <reference types="#cypress/fiddle" />
const test = {
html: `
<p class="text-lg"></p>
<script>
setTimeout(() => {
const url = 'http://example/student/details.php?viewDetails=project&stdCount=1§ionID=1&openHash=5fc8329a76e73&ajaxCall=true';
window.fetch(url, { method: 'POST'});
}, 1000);
</script>
`,
test: `
cy.intercept({
method: 'POST',
url: '/student/details.php',
query: {
viewDetails: 'project', // whatever query parts you care about
stdCount: '1',
sectionID: '1'
}
}, {}) // Added an empty stub here, as my url does not actually exist
.as('getStudentTabDetails');
cy.wait('#getStudentTabDetails')
`
}
it('', () => {
cy.runExample(test)
});
The POST is made with native fetch(), which would not be captured in the old cy.route() method without using a polyfill.
Background:
Hello everyone, I'm working on an AJAX login function for a website and I'm trying to use the Argon2 KDF (library) to derive a (somewhat) resource-intensive secret in the browser itself from a user-provided password before it is sent to the server for verification. The site utilizes TLS so I think from a security standpoint this is kind of a moot point, but I'd rather the client do this part of the work rather than the server, and this is more of a learning experience than a production site anyway.
Question:
The example code correctly computes the hash within my project, verifiable by the output from console.log(h.hashHex), but I've tried dozens of ways to try to assign the value to a variable to use later in the same function. I realize a Promise is asynchronous so I'm sure I'm going wrong somewhere regarding threads. When debugging, the variable that should be a hex string is either still undefined or optimized away. I'm sure there's some simple thing I'm missing but looking at similar questions (1, 2, 3) I still can't get it to work and don't have too much experience in JavaScript. Thanks for your input!
Sample Code (Works)
argon2.hash({ pass: $("#password").val(), salt: 'somesalt' })
.then(h => console.log(h.hash, h.hashHex, h.encoded))
.catch(e => console.error(e.message, e.code));
Modification 1 (Doesn't work):
function do_login() {
...
var password;
argon2.hash({ pass: $("#password").val(), salt: 'somesalt' })
.then(h => {password=h.hashHex})
.catch(e => console.error(e.message, e.code));
...
}
Modification 2 (Also doesn't work):
function submitLogin(email, pass) {
...
$.ajax
({
type:'post',
url:'/login',
data:{
do_login:"do_login",
email:email,
password:pass
},
success:function(response) {
...
}
});
}
function do_login()
{
var email=$("#username").val();
var password = $("#password").val();
argon2.hash({ pass: password, salt: 'somesalt' })
.then(h=> function(h){submitLogin(email,h.hashHex);return false;})
.catch(e => function(e){console.error(e.message, e.code);return false;});
}
Update (answer below)
function submitLogin(email, pass) {
...
$.ajax
({
type:'post',
url:'/login',
data:{
do_login:"do_login",
email:email,
password:pass
},
success:function(response) {
...
}
});
}
function do_login()
{
var email=$("#username").val();
var password = $("#password").val();
argon2.hash({ pass: password, salt: 'somesalt' })
.then(h=>submitLogin(email,h.hashHex))
.catch(e => console.error(e.message, e.code));
return false;
}
Modification 1 won't work, because password will be set asynchronously, later, after do_login has returned.
Modification 2 doesn't work due to a typo; you have
.then(h=> function(h){submitLogin(email,h.hashHex);return false;})
but this uses both an arrow function h => and a function (h), twice as many functions as you actually want. This should work better:
.then(h => { submitLogin(email, h.hashHex); })
(In the next line, the catch handler has the same bug, though, so change both.)
Not sure what the issue is but my Navigo router is duplicating routes.
The Router:
this.Navigo.hooks({
before: (done, params) => {
// some tomfoolery
done();
}
});
this.Navigo.on({
'/:region/travel': (params) => {
// import Travel module
// some nonsense
},
'/:region/travel/car': (params) => {
// import TravelCar module
// some nonsense
}
)};
this.Navigo.resolve();
The Problem
this.Navigo.navigate('/london/travel/car');
Navigating to /london/travel/car is also triggering the route for /london/travel and thus causing all kinds of twaddle.
Is this standard behaviour? If not, what could be wrong?
I could rewrite the routes so they don't collide e.g. /london/travel-by-car, but I really don't want to if I can avoid it.
UPDATE 1:
I tried switching the order of routes but makes no difference. I did this by declaring the longest travel routes first, /:region/travel/car, and the smallest, /:region/travel, last.
UPDATE 2:
The more I look into this, the more I'm convinced this cannot be achieved with Navigo. Navigo do not support nested routes. If somebody could confirm that my routes are in fact 'nested', I will use an alternative routing library that does support them.
My code is a little different, but works the way you expect:
var router = new Navigo("/");
var render = (content) => (document.querySelector("#app").innerHTML = content);
router
.on('/:id', ({ data }) => {
setuserId(data.id)
if (verifiedUser) {
console.log("User verified");
} else {
console.log("User NOT verified");
}
rendertemplate(userDataURL(), "#landing-template", "#app")
})
.on('/:id/q', ({ data }) => {
// Example - flaging a send with 's' from 'SMS', perhaps a diff flow?
setuserId(data.id)
rendertemplate(userDataURL(), "#landing-template", "#app")
console.log("Source was a QRcode");
})
.on('/:id/q/t', ({ data }) => {
// Example - flaging a send with 's' from 'SMS', perhaps a diff flow?
setuserId(data.id)
rendertemplate(userDataURL(), "#landing-template", "#app")
console.log("Source was a QRcode in a Train");
})
This will give me a single discreet ".. verified"/"Source was a QRcode"/"Source was a QRcode in a Train" console.log response.
B