I'm trying to test this site https://store.google.com/regionpicker and when I select a region (US) for example and get redirected to this url: https://store.google.com/us/?hl=en-US®ionRedirect=true I get an app error in the console, and cypress fails to continue
I added this code to handle exceptions before the test starts, but it doesn't catch it:
cy.on('uncaught:exception', () => {
return false
})
full code:
describe('Purchase a device from Google Store', () => {
const LOCATORS = {
devicesMenu: '[id="desktop-products"]',
headerContainer: '.header-container',
regionTitle: '.region-title',
dialog: '[role="dialog"]',
button: '[role="button"]',
}
before(() => {
cy.visit('/')
})
beforeEach(() => {
Cypress.on('uncaught:exception', () => {
return false
})
})
it('Purchase device', () => {
let region = 'United States'
let urlToVerify = 'us/?hl=en-US®ionRedirect=true'
cy.contains(LOCATORS.regionTitle, region)
.click().then(() => {
cy.get(LOCATORS.dialog).within(() => {
cy.contains('Continue')
.click({ force: true }).then(() => {
cy.url()
.should('include', urlToVerify)
})
})
})
})
})
You can test the URL in an event handler for the url:changed event.
The basic problem seems to be that it's not possible to take Cypress to https://store.google.com, the browser ends up with URL about:blank.
But by adding a listener to url:changed you can at least verify that the correct URL was attempted.
it('redirects after region select', () => {
const region = 'United States'
const urlToVerify = 'us/?hl=en-US®ionRedirect=true'
cy.on('url:changed', (url) => {
expect(url).to.include(urlToVerify) // use chai to assert
})
cy.contains(LOCATORS.regionTitle, region).click()
cy.get(LOCATORS.dialog).within(() => {
cy.contains('Continue').click({ force: true })
})
})
Related
In my Cypress config I have a hook:
//hooks.ts
after(() => {
if (Cypress.currentTest.titlePath[0] === 'Skip after') {
return;
}
cy.wait(2500);
cy.el('btnLogoutUser').should('exist').click({ force: true });
cy.url().should('contain', 'login');
cy.task('getCompany').then((data: any) => {
cy.task('cleanCompany', data.company.company_id).then((response: any) => {
cy.log(`
=================================================
Removed company with id: ${response.substring(47)}
=================================================
`);
});
});
localStorage.clear();
});
But on some tests I want to skip this hook. That's why I added the if condition.
//test.cy.ts
describe('Skip after', () => {
it('Does something', () => {
cy.el('btnCompanySettings').click({ force: true });
});
});
This works, but I would much rather add a boolean value in the describe and pass that so I can check that value. Something like:
//test.cy.ts
describe({title: 'Name of test', skipAfter: true}), () => { ... }
But the describe only takes a string value.
You can add a custom property to the configuration object in your describe method (that is the one between the suite name and the callback function). Then, you can access it from Cypress.config().
describe("Suite", { skipAfter: false }, () => {
it("test", () => {
//your code
});
after(() => {
if (Cypress.config().skipAfter) {
return;
}
//your code
});
});
Below is the dev console in cypress
I have tried adding below config is Cypress.json
{
"modifyObstructiveCode" : false
}
but this causes Cypress runner to not find my test at all
This is my Cypress code :
/// <reference types="Cypress" />
describe("Service Now TEST login", () => {
it("Login TEST", () => {
cy.visit("https://hptest.service-now.com/login.do")
cy.wait(2000)
cy.get(".form-control", {
timeout: 10000
}).should("be.visible").then(() => {
cy.get("#user_name").type("");
cy.get("#user_password").type("");
cy.get("#sysverb_login").click();
});
})
})
Please help me here.
I can see in your test runner logs that there is a exception generated, you can catch the exception using:
Cypress.on('uncaught:exception', (err, runnable) => {
return false
})
So your code should look like:
describe('Service Now TEST login', () => {
it('Login TEST', () => {
cy.visit('https://hptest.service-now.com/login.do')
//Catch Exception
Cypress.on('uncaught:exception', (err, runnable) => {
return false
})
cy.wait(2000)
cy.get('.form-control', {
timeout: 10000,
})
.should('be.visible')
.then(() => {
cy.get('#user_name').type('')
cy.get('#user_password').type('')
cy.get('#sysverb_login').click()
})
})
})
I would like to add some context on each fail by getting some localstorage data and log that.. but not really sure how I can do it
In index.ts I added
Cypress.on('fail', (error, runnable) => {})
and there I do const user = localStorage.getItem('user'); and try to log it but now luck.. guess that I need to fetch it async but not able to get it to work :/
Use the synchronous version of .log().
I guess the queue stops running before the fail event is captured.
Cypress.on('fail', (error, runnable) => {
const user = localStorage.getItem('user')
Cypress.log({name: 'User', message: user})
})
it('', () => {
localStorage.setItem('user', 'my-user')
expect(1).to.eq(2)
})
I actually got it working by doing this in my support/index.ts file...
Cypress.on('fail', (error) => {
const asyncLocalStorage = {
getItem(key) {
return Promise.resolve().then(function () {
return localStorage.getItem(key);
});
},
};
asyncLocalStorage.getItem('state').then((localStorageState) => {
const state = JSON.parse(localStorageState);
Cypress.log({
name: error.name,
message: error.message,
consoleProps: () => ({
'User Id': state?.user?.id,
members: state?.members,
message: error.message,
stack: error.stack,
}),
});
});
throw error;
});
My specs are behaving weirdly in that when I run the tests alone, they pass. However, when I run the test suite all together, the failure tests still continue to use the success axios mock instead of using the correct failing http axios mock. This results in my tests failing. Am I missing something for isolating the 2 mocks from each other in the different portions of code?
jobactions.js
export const loadUnassignedJobs = (job_type) => {
if (!['unscheduled', 'overdue'].includes(job_type)) {
throw 'Job Type must be "unscheduled" or "overdue".';
}
return (dispatch) => {
dispatch({type: JobActionTypes.LOAD_UNASSIGNED_JOBS_STARTED, job_type });
return axios.get(defaults.baseapi_uri + 'jobs/' + job_type)
.then(function (response) {
dispatch(updateUnassignedJobs(response.data.jobs));
// handle success
})
.catch(function (error) {
// handle error
dispatch({ type: JobActionTypes.LOAD_UNASSIGNED_JOBS_FAILURE, error });
})
.then(function () {
// always executed
});
}
};
export const updateUnassignedJobs = (unassigned_jobs) => {
let unassigned_job_ids = [];
let jobs = {};
for (let job of unassigned_jobs) {
unassigned_job_ids.push(job.id);
jobs[job.id]=job;
}
return({
type: JobActionTypes.LOAD_UNASSIGNED_JOBS_SUCCESS,
jobs,
unassigned_job_ids,
});
};
spec.js
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import * as jobActions from "../../../app/javascript/actions/JobActions"
import { findAction } from '../support/redux_store'
import * as JobActionTypes from '../../../app/javascript/constants/JobActionTypes'
import fixtures_jobs_unscheduled_success from '../fixtures/jobs_unscheduled_success'
import moxios from "moxios";
export const mockStore = configureMockStore([thunk]);
let store;
describe ('loadUnassignedJobs', () => {
context('when bad parameters are passed', async () => {
it('will raise an error', () => {
const store = mockStore();
expect(() => {
store.dispatch(jobActions.loadUnassignedJobs('wrong_type'));
}).to.throw('Job Type must be "unscheduled" or "overdue".');
});
});
context('when unscheduled is passed', () => {
beforeEach(() => {
moxios.install();
console.log("before each called");
console.log(moxios.requests);
store = mockStore();
store.clearActions();
});
afterEach(() => {
console.log("after each called");
console.log(moxios.requests);
moxios.uninstall();
});
context('on success', () => {
beforeEach(() => {
moxios.wait(() => {
let request = moxios.requests.mostRecent();
request.respondWith({
status: 200,
response: fixtures_jobs_unscheduled_success
});
});
})
it('dispatches LOAD_UNASSIGNED_JOBS_STARTED', () => {
store.dispatch(jobActions.loadUnassignedJobs('unscheduled')).then(() => {
expect(findAction(store, JobActionTypes.LOAD_UNASSIGNED_JOBS_STARTED)).to.be.eql({
type: JobActionTypes.LOAD_UNASSIGNED_JOBS_STARTED,
job_type: 'unscheduled'
});
});
});
it('dispatches updateUnassignedJobs()', () => {
store.dispatch(jobActions.loadUnassignedJobs('unscheduled')).then(() => {
expect(findAction(store,JobActionTypes.LOAD_UNASSIGNED_JOBS_SUCCESS)).to.be.eql(jobActions.updateUnassignedJobs(fixtures_jobs_unscheduled_success.jobs))
});
});
});
context('on error', () => {
beforeEach(() => {
//console.log("before each on error called");
//console.log(moxios.requests);
moxios.wait(() => {
console.log('after waiting for moxios..')
console.log(moxios.requests);
let request = moxios.requests.mostRecent();
request.respondWith({
status: 500,
response: { error: 'internal server error' }
});
});
})
it('dispatches LOAD_UNASSIGNED_JOBS_FAILURE', (done) => {
console.log(moxios.requests);
store.dispatch(jobActions.loadUnassignedJobs('unscheduled')).then(() => {
console.log(moxios.requests);
console.log(store.getActions());
expect(findAction(store, JobActionTypes.LOAD_UNASSIGNED_JOBS_FAILURE)).to.include({
type: JobActionTypes.LOAD_UNASSIGNED_JOBS_FAILURE
});
expect(findAction(store, JobActionTypes.LOAD_UNASSIGNED_JOBS_FAILURE).error).to.include({
message: 'Request failed with status code 500'
});
done();
});
});
it('does not dispatch LOAD_UNASSIGNED_JOBS_SUCCESS', (done) => {
store.dispatch(jobActions.loadUnassignedJobs('unscheduled')).then(() => {
expect(findAction(store, JobActionTypes.LOAD_UNASSIGNED_JOBS_SUCCESS)).to.be.undefined;
done();
});
});
})
});
});
describe('updateUnassignedJobs', () => {
it('assigns jobs to hash and creates an unassigned_job_ids array', () => {
expect(jobActions.updateUnassignedJobs([ { id: 1, step_status: 'all_complete' }, { id: 2, step_status: 'not_started' } ])).to.be.eql(
{
type: JobActionTypes.LOAD_UNASSIGNED_JOBS_SUCCESS,
jobs: { 1: { id: 1, step_status: 'all_complete' }, 2: { id: 2, step_status: 'not_started' } },
unassigned_job_ids: [ 1,2 ]
}
)
});
});
Found the issue!
The it() blocks for the success case were not using the done callback causing the afterEach() moxios.uninstall() to be called prematurely and not resetting the requests after the call was complete. Fixing this, and now all the tests pass.
I have been playing with rxjs and redux-observable for the last few days and have been struggle to find a way to a test for Observable.ajax. I have the following epic which create a request to https://jsonplaceholder.typicode.com/,
export function testApiEpic (action$) {
return action$.ofType(REQUEST)
.switchMap(action =>
Observable.ajax({ url, method })
.map(data => successTestApi(data.response))
.catch(error => failureTestApi(error))
.takeUntil(action$.ofType(CLEAR))
)
}
where,
export const REQUEST = 'my-app/testApi/REQUEST'
export const SUCCESS = 'my-app/testApi/SUCCESS'
export const FAILURE = 'my-app/testApi/FAILURE'
export const CLEAR = 'my-app/testApi/CLEAR'
export function requestTestApi () {
return { type: REQUEST }
}
export function successTestApi (response) {
return { type: SUCCESS, response }
}
export function failureTestApi (error) {
return { type: FAILURE, error }
}
export function clearTestApi () {
return { type: CLEAR }
}
The code works fine when runs in browser but not when testing with Jest.
I have try,
1) Create a test based on https://redux-observable.js.org/docs/recipes/WritingTests.html. The store.getActions() returns only { type: REQUEST }.
const epicMiddleware = createEpicMiddleware(testApiEpic)
const mockStore = configureMockStore([epicMiddleware])
describe.only('fetchUserEpic', () => {
let store
beforeEach(() => {
store = mockStore()
})
afterEach(() => {
epicMiddleware.replaceEpic(testApiEpic)
})
it('returns a response, () => {
store.dispatch({ type: REQUEST })
expect(store.getActions()).toEqual([
{ type: REQUEST },
{ type: SUCCESS, response }
])
})
})
2) Create a test based on Redux-observable: failed jest test for epic. It returns with
Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
it('returns a response', (done) => {
const action$ = ActionsObservable.of({ type: REQUEST })
const store = { getState: () => {} }
testApiEpic(action$, store)
.toArray()
.subscribe(actions => {
expect(actions).to.deep.equal([
{ type: SUCCESS, response }
])
done()
})
})
Can someone point me out what is the correct way to test Observable.ajax ?
I would follow the second example, from StackOverflow. To make it work you'll need to make some minor adjustments. Instead of importing Observable.ajax in your epic file and using that reference directly, you need to use some form of dependency injection. One way is to provide it to the middleware when you create it.
import { ajax } from 'rxjs/observable/dom/ajax';
const epicMiddleware = createEpicMiddleware(rootEpic, {
dependencies: { ajax }
});
The object we passed as dependencies will be give to all epics as the third argument
export function testApiEpic (action$, store, { ajax }) {
return action$.ofType(REQUEST)
.switchMap(action =>
ajax({ url, method })
.map(data => successTestApi(data.response))
.catch(error => failureTestApi(error))
.takeUntil(action$.ofType(CLEAR))
);
}
Alternatively, you could not use the dependencies option of the middleware and instead just use default parameters:
export function testApiEpic (action$, store, ajax = Observable.ajax) {
return action$.ofType(REQUEST)
.switchMap(action =>
ajax({ url, method })
.map(data => successTestApi(data.response))
.catch(error => failureTestApi(error))
.takeUntil(action$.ofType(CLEAR))
);
}
Either one you choose, when we test the epic we can now call it directly and provide our own mock for it. Here are examples for success/error/cancel paths These are untested and might have issues, but should give you the general idea
it('handles success path', (done) => {
const action$ = ActionsObservable.of(requestTestApi())
const store = null; // not used by epic
const dependencies = {
ajax: (url, method) => Observable.of({ url, method })
};
testApiEpic(action$, store, dependencies)
.toArray()
.subscribe(actions => {
expect(actions).to.deep.equal([
successTestApi({ url: '/whatever-it-is', method: 'WHATEVERITIS' })
])
done();
});
});
it('handles error path', (done) => {
const action$ = ActionsObservable.of(requestTestApi())
const store = null; // not used by epic
const dependencies = {
ajax: (url, method) => Observable.throw({ url, method })
};
testApiEpic(action$, store, dependencies)
.toArray()
.subscribe(actions => {
expect(actions).to.deep.equal([
failureTestApi({ url: '/whatever-it-is', method: 'WHATEVERITIS' })
])
done();
});
});
it('supports cancellation', (done) => {
const action$ = ActionsObservable.of(requestTestApi(), clearTestApi())
const store = null; // not used by epic
const dependencies = {
ajax: (url, method) => Observable.of({ url, method }).delay(100)
};
const onNext = chai.spy();
testApiEpic(action$, store, dependencies)
.toArray()
.subscribe({
next: onNext,
complete: () => {
onNext.should.not.have.been.called();
done();
}
});
});
For the first way:
First, use isomorphic-fetch instead of Observable.ajax for nock support, like this
const fetchSomeData = (api: string, params: FetchDataParams) => {
const request = fetch(`${api}?${stringify(params)}`)
.then(res => res.json());
return Observable.from(request);
};
So my epic is:
const fetchDataEpic: Epic<GateAction, ImGateState> = action$ =>
action$
.ofType(FETCH_MODEL)
.mergeMap((action: FetchModel) =>
fetchDynamicData(action.url, action.params)
.map((payload: FetchedData) => fetchModelSucc(payload.data))
.catch(error => Observable.of(
fetchModelFail(error)
)));
Then, you may need an interval to decide when to finish the test.
describe("epics", () => {
let store: MockStore<{}>;
beforeEach(() => {
store = mockStore();
});
afterEach(() => {
nock.cleanAll();
epicMiddleware.replaceEpic(epic);
});
it("fetch data model succ", () => {
const payload = {
code: 0,
data: someData,
header: {},
msg: "ok"
};
const params = {
data1: 100,
data2: "4"
};
const mock = nock("https://test.com")
.get("/test")
.query(params)
.reply(200, payload);
const go = new Promise((resolve) => {
store.dispatch({
type: FETCH_MODEL,
url: "https://test.com/test",
params
});
let interval: number;
interval = window.setInterval(() => {
if (mock.isDone()) {
clearInterval(interval);
resolve(store.getActions());
}
}, 20);
});
return expect(go).resolves.toEqual([
{
type: FETCH_MODEL,
url: "https://test.com/assignment",
params
},
{
type: FETCH_MODEL_SUCC,
data: somData
}
]);
});
});
enjoy it :)