Beeing new to vue testing, I'm trying to make an integration test for our Vue SPA with axios & mocha.
I want some of the tests to make real api calls to our server without mocking, to figure out if it really works from the beginning to the end. The server API is a Laravel 7 app with laravel/sanctum and cookie based session authentication.
I can make real axios calls directly in the test file like this:
import authApi from '../../src/components/connections/auth';
describe('AxiosCallTest', () => {
it('makes an axios call', function(done) {
this.timeout(5000);
authApi.get('/sanctum/csrf-cookie').then((response) => {
console.log('response: ', JSON.stringify(response));
done();
}).catch(() => {
done();
});
});
});
// -> response: {"data":"","status":204,"statusText":"No Content","headers":{"cache-control":"no-cache, private"},"config":{"url":"/sanctum/csrf-cookie","method":"get","headers":{"Accept":"application/json","X-Requested-With":"XMLHttpRequest"},"baseURL":"http://testing.backend.vipany.test/api/auth","transformRequest":[null],"transformResponse":[null],"timeout":30000,"withCredentials":true,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"axios-retry":{"retryCount":0,"lastRequestTime":1591774391768}},"request":{"upload":{"_ownerDocument":{"location":{"href":"http://localhost/","origin":"http://localhost","protocol":"http:","host":"localhost","hostname":"localhost","port":"","pathname":"/","search":"","hash":""}}},"_registeredHandlers":{},"_eventHandlers":{}}}
I've read and tried a lot and now have 2 problems:
handling cookies for CSRF Token Cookies and Session Cookies (used for authentication), as on conventional requests the browser handles this out of the box.
waiting on axios calls in vue components, as I can't use mocha's done() function in the components itself, as I did in this example. I can only find examples with mocking requests with moxios or similiar. But I don't want to mock the axios calls.
Does anyone know a good article about these issues or has already solved it?
Thanks a lot
update:
I've found an article to get the cookie out of the axios request and tried it myself to get the X-XSRF-TOKEN out of the response (I've checked it in the browser: HttpOnly: false, secure: false), but it does not work:
console.log('response X-XSRF-TOKEN: ', response.config.headers['X-XSRF-TOKEN']);
// -> undefined
Found out that cypress and nightwatch are the right tools for end-to-end testing (e2).
Didn't know the right terms (e2e or end-to-end testing) and the right tools.
Switched to cypress.io - absolutly great.
vue-cli even has first hand plugins to integrate cypress or nightwatch: https://cli.vuejs.org/core-plugins/e2e-cypress.html
Related
I'm working on e2e test with cypress on my application.
In my case the login are manage by a external service.
When I want to enter in my application's home page (https://myApplication/home), the system redirects me in different superdomains to login.
At first cypress seems to be able to change the superdomain, but once arrived in external service page for the authentication, the system go in login error (as if we have already logged in, but incorrect).
This type of behavior does not happen outside the cypress .
Are there alternative solutions to manage external access in a cypress test or is it possible to manage it directly from cypress?
I added in my cypress.json the chromeWebSecurity:false and when I call the link for login, I added the failOnStatusCode: false,
but it still doesn't work.
Assuming this is caused by SameSite cookie blocking , then I've just been fighting the same issue. I resolved it by intercepting all requests, checking if they had a set-cookie header(s) and rewriting the SameSite attribute. There's probably a neater way to do it, as this does clutter up the cypress dashboard a little.
Sadly Zachary Costa's answer no longer works as Chrome 94 removed the SameSiteByDefaultCookies flag.
You can add this as a command for easy reuse:
In your commands file:
declare namespace Cypress {
interface Chainable<Subject> {
disableSameSiteCookieRestrictions(): void;
}
}
Cypress.Commands.add('disableSameSiteCookieRestrictions', () => {
cy.intercept('*', (req) => {
req.on('response', (res) => {
if (!res.headers['set-cookie']) {
return;
}
const disableSameSite = (headerContent: string): string => {
return headerContent.replace(/samesite=(lax|strict)/ig, 'samesite=none');
}
if (Array.isArray(res.headers['set-cookie'])) {
res.headers['set-cookie'] = res.headers['set-cookie'].map(disableSameSite);
} else {
res.headers['set-cookie'] = disableSameSite(res.headers['set-cookie']);
}
})
});
});
Usage:
it('should login using third party idp', () => {
cy.disableSameSiteCookieRestrictions();
//add test body here
});
or alteratively, run it before each test:
beforeEach(() => cy.disableSameSiteCookieRestrictions());
We were encountering a similar issue, where Cypress was redirecting us to the default "You are not logged in" page after getting through the login process. I'm not certain if that's EXACTLY the issue you were experiencing, but just in case, here's our solution. In our case, the issue was caused by Chrome's "Same Site Cookies" feature interacting poorly with Cypress, so we needed to disable it. In your plugins/index.js file, you would add the following code:
module.exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.name === 'chrome') {
launchOptions.args.push('--disable-features=SameSiteByDefaultCookies');
}
return launchOptions;
});
};
Note that if you already have launchOptions being set, you can just add this code onto it so it doesn't clash at all.
Hopefully, this works for you as well!
In the current version of cypress you can't go to another domain in the same test. This is due to the fact that cypress injects its test into the browser (they are working on this issue).
So one solution today is that you need to utilize cy.request to perform the login programmatically and inject the auth secret (jwt, cookie, localstorage, token or what you have) into the browser context yourself (for cookie this would be cy.setcookie).
Always make sure to checkout the plugins if there is already an abstraction for your login. Often this is openId or ntlm.
I have a site with web components based architecture, where each web component may be a separate Vue app with it's own API layer integrated via Axios. I need to implement Auth middleware for all HTTP requests, coming from either root app or web component app. I cannot use Axios built-in interceptors mechanism as there will be multiple instances of Axios. Is there a way I can do it with global JS methods? I know there is some browser extension based API out there, but that doesn't seem like something I am looking for.
Just in case anybody else is interested, I have solved it with service worker. You can subscribe to fetch events and respond according to your auth logics. Your service worker code will look something like following:
self.addEventListener('fetch', async (event) => {
const isAuthorised = await checkIsAuthorized(); // your auth API layer
if (!isAuthorised) {
const response = new Response(null, {
status: 401,
statusText: 'Unauthorised',
});
event.respondWith(response);
return;
}
event.respondWith(fetch(event.request));
});
Service worker is able to intercept axios requests from shadow DOM as well, so it's a good match for web components case.
Besides, there is a nice article by Bartosz Polnik on implementing auth layer using service worker.
Our app is in React + NextJS. Framework is like (Browser code -> (Making call to)->Next JS Api->(Making call to)->External Rest API). I want to perform E2E Testing using Testcafe where I will mock only the External API call. How can we achieve the same?
Yes you can write E2E tests using testcafe. It simulates actual user experience and interact with your website. It is not dependent underlying tech stack. You just need to host your app and provide the url to testcafe config. Use regular css selectors to pick page elements and make assertions. You can also intercept API requests and use mock data for API. Mocking is not recommended for E2E testing.
Sample code for API response:
import { RequestLogger } from 'testcafe'
const logger= RequestLogger(['Domain URLs Array'], {
logResponseHeader: true,
logResponseBody: true
})
fixture(`description`).page('app url').requestHooks(logger)
test('description', async () => {
const domain1Res = logger.requests[0].response
const domain1ResStr = domain1Res.body.toString()
const domain1ResJson = domain1ResStr.length ? JSON.parse(domain1ResStr) : null
// domain1ResJson is the API response object, use it in assertions
})
I've inherited a Node.js web app that uses relies on OAuth. Whenever you visit a page the app ensures you've authenticated. Please note, there no Angular, React, Vue, etc here. Each page is straight up HTML.
I want to test this site using Cypress. My problem is, I'm stuck on the initial redirect from the auth provider. Cypress acknowledge OAuth is a challenge.
commands.js
Cypress.Commands.add('login', (credentials) => {
var settings = {
'clientId':'<id>',
'scope':'<scope-list>',
...
};
var body = `client_id=${settings.clientId}&scope=${settings.scope}...`;
var requestOptions = {
method: 'POST',
url: 'https://login.microsoftonline.com/...',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: body
}
cy.request(requestOptions);
});
Then, in my test, I have:
context('Home', () => {
it('Visits Successfully', () => {
cy.login();
cy.title().should('include', 'welcome');
});
});
In the test runner, I see the login POST request is occurring. I confirmed that an access token is being received using a console.log, however, my title is empty. It's like the redirect after OAuth isn't happening in Cypress. However, when I visit the site in the browser, the redirect is happening as expected.
What am I missing?
What you might be missing is confusing between the actual UI flow and the programmatic flow of doing OAuth with a 3rd party website.
What you would want to do is to complete the programmatic login and then send the required parameters to your OAuth callback URL for your app manually in the test code.
an example is given here (though it uses a different grant type it gives you an idea) https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/#Writing-tests-using-Cypress-Login-Command
another issue on the cypress github that deals with a similar problem
https://github.com/cypress-io/cypress/issues/2085
this also might help:
https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/logging-in__single-sign-on/cypress/integration/logging-in-single-sign-on-spec.js
I'm trying to test my application with mocha, chai and chai-http. When I test the login, I can't seem to log in no matter what I try. I've tried in Postman and gotten the same result.
I've seen many answers along the lines of this one but I've had no success with them.
Is Passport doing something that's preventing successful login? I can log in from the browser with no problem.
I found an answer in this post and from tinkering with the settings in Postman. Adding the content type x-www-form-urlencoded seemed to be the key.
it('should redirect to dashboard on successful login', function(done) {
chai.request('http://localhost:3000')
.post('/login')
.set('Token', 'text/plain')
.set('content-type', 'application/x-www-form-urlencoded')
.type('form')
.send('grant_type=password')
.send('username=bobby')
.send('password=abc123')
.end(function(err, res) {
res.should.have.status(200);
expect(res).to.redirectTo('http://localhost:3000/user/dashboard');
done();
});
});