Cypress automation - cypress

When i am entering otp in the cypress automation E2E then click on submit still it is in same page it is not moving to the next page.
describe('Check-Eligibility-client', () => {
it('KYC Page', () => {
cy.get('[data-test="mobile-number"]').click().type('9742368997');
cy.get('[data-test="get-started"]').should('be.visible');
cy.get('[data-test="get-started"]').click();
cy.get('[id^=otp_0_]', { timeout: 10000 }).should('be.visible');
cy.wait(10000);
cy.get('[data-test="confirm-otp"]').click();
});
});

Related

After sign-in test case, next page should be signup page but it got failed and navigate to sign-in page for signup test case

In this script, I write first test case for sign-in and next one for sign-up. after signin page should navigate to signup page. After sign-in test case while executing signup test case it navigate again to sign-in page.
Why didn't it navigate to sign-up page after sign-in test case. Why it again start from sign-in page.
/// <reference types="cypress" />
context('Actions', () => {
let sidata, sudata
beforeEach(() => {
cy.fixture('signupdata').then(function(sdata) {
sidata=sdata
})
cy.fixture('signindata').then(function(sdata) {
sudata=sdata
})
})
before(() => {
cy.visit('link')
})
it('sigin', () => {
cy.go('forward')
cy.get('#userName-email').type(sudata.PaUsername)
cy.get('#signupSubmitId').click()
cy.wait(40000)
cy.get('#signupSubmitId').click()
})
it('sigup - must check', () => {
cy.get('#emailID').should('be.disabled')
cy.get('input[type=email]').should('contain.value',sudata.PaUsername)
})
it('sigup', () => {
cy.get('#firstName').clear().type('Madhavan')
cy.get('#lastName').clear().type('Prabakaran')
cy.get('#userGender').clear().select('Male')
cy.get('#userdob').clear().type('1999-06-19')
cy.get('#contactCountryCode').clear().select('+91(IN)')
cy.get('#contactMobileNumber').clear().type(sidata.PaMobile)
cy.get('#optin-email').check()
cy.get('#optin-mobile').check()
cy.get('#signupSubmitId')
})
})
Every it( , () => {}) block is treated as a separate test case hence the test for Sign up start's from Sign In Page as a new browser is launched it would be better to club the Sign In and Sign Up code to a single it() block.

Cypress cy.wrap() after page refresh in iframe

I have the following Cypress test:
describe(`sign in`, () => {
const getIframe = () => {
return cy
.get('iframe[id=my-iframe]')
.its('0.contentDocument.body')
.should('not.be.empty')
.then(cy.wrap)
.as('iFrame')
}
it('signs in', () => {
cy.visit(PATH.SIGN_IN)
getIframe()
cy.get('#iFrame').find('input[name=email]').click().type('user#test.test')
cy.get('#iFrame').find('input[name=password]').click().type('test-password')
cy.get('#iFrame').find('button').contains(/^Sign in$/).click()
// signin is successful and the contents of the page refresh to show a page containing <h3>Hello user</h3>
cy.get('#iFrame').find('h3').contains('Hello user').should('be.visible')
// the above line fails...
})
})
The test fails on the last line. Even though the contents inside the iframe successfully refresh and Hello user is visible, Cypress is not able to find this text inside cy.get('#iFrame').
How should I handle this situation correctly with Cypress?

Cypress with Auth0.com login and redirects

We have changed our login page so it's now redirecting to auth0.com and then back to our domain after you login to auth0. The issue is now when I login I get redirected to our QA environment which requires authentication so once the test submits the form I get a 401.
Before auth0 I was getting around the 401 by overwritting the visit function passing in a auth header.
If I try to visit our QA environment first before going to our login page I get
You may only cy.visit() same-origin URLs within a single test.
I've seen other questions asked about auth0 but not with also requiring authentication in the redirect, is it possible to still run tests on our QA environment?
While the Cypress team works to resolve max 1 site... support visiting multiple superdomains in one test on work around I have used in the past is this: detailed again below.
In commands.js
// -- Save localStorage between tests
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]);
});
});
// -- Visit multiple domains in one test
Cypress.Commands.add('forceVisit', url => {
cy.window().then(win => {
return win.open(url, '_self');
});
});
In test.spec.js
/// <reference types="cypress" />
context('Force Visit', () => {
it('should be able to visit and assert on two domains', () => {
cy.forceVisit('https://example.cypress.io');
cy.title().should('eq', 'Cypress.io: Kitchen Sink');
cy.forceVisit('https://www.google.com');
cy.title().should('eq', 'Google');
});
});
context('Auth Flow', () => {
before(() => {
cy.forceVisit('<auth url>');
cy.get('<username input>').type('<username>');
cy.get('<password input>').type('<password>');
cy.intercept('POST', '<auth login request>').as('auth');
cy.get('<submit button>').click();
cy.wait('#auth');
});
afterEach(() => {
cy.saveLocalStorage();
});
beforeEach(() => {
cy.restoreLocalStorage();
// Preserve Cookies between tests
Cypress.Cookies.defaults({
preserve: /[\s\S]*/,
});
});
it('should be able to start in authorized state', () => {
cy.visit('<site url>');
});
});

How can I close the browser after a mocha test?

I am new to WebdriverIO and Mocha and I wrote 2 tests in order to check our web app.
I want to close the browser and sign-in again, after I run the first test.
When I used browser.close(), I got an error the browser.close() is not a function and basically the second test runs right after the first test with the browser being open.
Is there a way to close to browser after a test in Mocha?
describe('Verify that a signed-in user can get to the page', () => {
it('Title assertion ', () => {
const viUrl = 'https://buyermanage.com/bmgt/lock?useMock=pre.json';
signInPage.signIn('rich221', 'password', viUrl);
assert.equal(preApp.getTitle(), 'Pre-App', 'Title Mismatch');
});
});
describe("Verify that a not signed-in user can't get to the page and is redirected to login page", () => {
it('Title assertion ', () => {
const viUrl = 'https://buyermanage.com/bmgt/lock?useMock=pre.json';
assert.equal(preApp.getTitle(), 'Pre-App', 'Title Mismatch');
});
});
Try using browser.reloadSession():
after(() => {
// Start a new session for every 'locale' (wipe browser cache):
browser.reloadSession();
});
In your particular example, you'd need to use it in the afterEach() hook, and wrap the describes, respectively the it statements (depending on your test-suite requirements) inside a parent describe block:
describe('The world is your oister', () => {
describe('Verify that a signed-in user can get to the page', () => {
it('Title assertion ', () => {
// bla bla bla
});
});
describe("Verify that a not signed-in user can't get to the page and is redirected to login page", () => {
it('Title assertion ', () => {
// bla bla bla
});
});
afterEach(() => {
browser.reloadSession();
});
});

Cypress: why do I need to run cy.wait(0) before each test?

I'm testing the following app: https://objective-benz-e53b25.netlify.app/
It's a bootstrap dashboard and I'm just testing clicking on a drop-down menu, then clicking and item, and checking that I'm being redirected.
this is are tests I run:
describe('Sapper template app', () => {
beforeEach(() => {
cy.visit('/')
// cy.wait(0);
});
it('has the correct <h1>', () => {
cy.contains('h1', 'Dashboard')
});
it('navigates to /settings', () => {
cy.get('nav a.dropdown-toggle').click();
cy.get('nav a.dropdown-item').contains('Settings').click();
cy.url().should('include', '/settings');
cy.contains('h3', 'Settings')
});
it('navigates to /logout', () => {
cy.get('nav a.dropdown-toggle').click();
cy.get('nav a.dropdown-item').contains('Logout').click();
cy.url().should('include', '/pages/authentication/login');
cy.contains('h3', 'Login')
});
});
And it gives me the following error:
2 passing (10s)
1 failing
1) Sapper template app navigates to /settings:
CypressError: Timed out retrying: cy.click() failed because this element is not visible:
<a class="dropdown-item" href="settings">Settings</a>
This element <a.dropdown-item> is not visible because its parent <div.dropdown-menu.dropdown-menu-right> has CSS property: display: none
If I switched the logout (third) test for the settings (second) test, then the failing one is logout.
I had to add a cy.wait(0) on the beofreEach and it solved it.
The strange thing is that now it is working ok, even with the cy.wait commented out.
I shared the code with a colleague of mine and he had the same trouble.
Any idea why it was failling, and why now it seems to work ok?
Issue is hapening with cy.get('nav a.dropdown-toggle').click();
click is not working on User Icon hence the drop down is not visible and test fails.
One of the solution is to use { force: true }. This option is to disable error checking on drop down click.
beforeEach(() => {
cy.visit("https://objective-benz-e53b25.netlify.app/");
});
it("has the correct <h1>", () => {
cy.contains("h1", "Dashboard");
});
it("navigates to /settings", () => {
cy.get("nav a.dropdown-toggle").click({ force: true });
cy.get("nav a.dropdown-item").contains("Settings").click({ force: true });
cy.url().should("include", "/settings");
cy.contains("h3", "Settings");
});
it("navigates to /logout", () => {
cy.get("nav a.dropdown-toggle").click({ force: true });
cy.get("nav a.dropdown-item").contains("Logout").click({ force: true });
cy.url().should("include", "/pages/authentication/login");
cy.contains("h3", "Login");
});
});

Resources