I need to close the tab/window after each test so I can start the next from scratch
describe('theImplementationIamTesting', () => {
after(() => {
// CLOSE THE TAB AFTER THE TEST...
});
});
I am looking a way to close the current tab after the test. I am not talking about closing a child tab/window. I am talking about the initial tab.
In selenium, it will be something like webdriver.close().
I cannot find a single place online, including the cypress website, where it said how to close the tab browser.
Thanks for helping
If you separate the cases in different test files it will close the whole browser and reopen it every time. This is the only way I had found so far and works for me very well to start every case from scratch since sometimes it continues to run unfinished API requests from the first case after the start of the second case.
The downside is you need to make the initial preparation of the system every time and it increases the runtime.
The way I resolved this was to actually add an extra line at the end of each test which would click to navigate to a page from where the other tests could continue, say the 'home page'.
describe('Test Inline Text Entry Interactions', () => {
beforeEach('Log in as CypressEditor', () => {
cy.MockLoginUser('cypressEditor');
cy.visit('http://localhost:4200/homepage');
})
it('should test 1st thing', () => {
//Test something, then...
cy.get('#logo-label').click(); //To navigate back to http://localhost:4200/homepage
});
it('should test the 2nd thing', () => {
//Test something else...
cy.get('#logo-label').click(); //To navigate back to http://localhost:4200/homepage
});
it('should test the 3rd thing', () => {
//Test some more stuff, then...
cy.get('#logo-label').click(); //this might not be necessary since it's the last one.
});
For me this ensured that each test could finish and continue with the next.
Related
I'm using the cy.visit() command but the website i'm visiting (which i don't own) doesn't always fire the load event, although the content itself that i need for testing does appear on the website.
Despite the content appearing, since the load event is not fired sometimes (for some reason which i can't fix since i don't have ownership over this website), the cy.visit() command fails.
Is there a way to "force" it somehow, similar to how we can pass { force: true} for the cy.click() command?
Add the below to your cypress commands file
Cypress.Commands.add('forceVisit', url => {
cy.window().then(win => {
return win.open(url, '_self');
});
});
And in your tests, you can call
cy.forceVisit("www.google.com")
It's hard to simulate the problem, but I think I managed by setting pageLoadTimeout really low (30ms).
You can catch the onLoad fail in an event handler and checking for the page load error message.
I recommend doing it in a beforeEach().
beforeEach(() => {
Cypress.config("pageLoadTimeout", 30) // set this to whatever time length
// you feel is appropriate to start testing
// You'll need to experiment to get this right
// and in CI it will be a lot longer
cy.once('fail', (err) => { // "once" to just catch a single error
const message = err.parsedStack[0].message
if (message.match(/Timed out after waiting `\d+ms` for your remote page to load/)) {
return false
}
throw err // any other error, fail it
})
cy.visit('www.example.com');
})
it('checks the heading of the page', () => {
cy.get('h1').should('have.text', 'Example Domain') // ✅
})
As you can already assume, that is highly discouraged. It also really depends on how it fails and with which errors, but, without any code to reproduce, you may want to try this if you haven't already:
cy.visit('/', {failOnStatusCode: false});
Reference: https://docs.cypress.io/api/commands/visit#Arguments
I am currently studying cypress and as I was going through the tutorials one thing popped up in my mind. What if I wrote a small test case to, for example, open a website, click login and enter the credentials. Then I want to start a new test case to do something else on that website once logged in but on a different test case. Can I pull the information from the first one?
What I mean is this:
describe('My first test', function () {
it('login as user', function () {
cy.visit('https://uat2.myregus.com/home')
cy
.get('#header_LogIn').click()
.get('#Username').click()
.type('dogejaq#getairmail.com')
.type('{enter}')
.get('.password').click()
.type('Test_123!')
.type('{enter}')
})
})
Then my second case would pull the information from the above so that I can continue.
describe('My second test', function () {
it('book a meeting', function () {
cy.visit('https://uat2.myregus.com/home')
})
})
The reason I want to do this is because I don't want to run both tests every time. Essentially it would log me in every time using those credentials. I was thinking of making a separate .js file to pull from but I am not sure how. Please help.
Coupling multiple tests together is an anti-pattern. Your tests should always be able to be run independently from one another and still pass.
See docs from Cypress best practices here.
The code from your first test should be wrapped in a beforeEach hook so it can be run before each it():
describe('My second test', function () {
beforeEach(() => {
cy
.get('#header_LogIn').click()
.get('#Username').click()
.type('dogejaq#getairmail.com')
.type('{enter}')
.get('.password').click()
.type('Test_123!')
.type('{enter}')
})
it('book a meeting', function () {
cy.visit('https://uat2.myregus.com/home')
})
it('does something else', function () {
cy.visit('...')
})
})
You should also have a look at these logging in recipes to perform backend authentication instead of going through the UI to log in before each test.
I have a notification message which pops up upon saving a file and wish to close it only if it is still present when I need to press the next button which may be covered by this notification.
So far this is how I have tried to conditionally close the notification
Cypress.Commands.add('notificationClose', () => {
if (cy.get('.notification').should('be.visible')) {
console.log('CLOSE ME');
cy.get('.notification-dismiss').click({mulitple: true});
}else{
console.log('ALREADY GONE');
}
});
I have also tried a jQuery solution I found here too.
Cypress.Commands.add('notificationClose', () => {
if (Cypress.$('.notifications-wrapper') == true) {
cy.get('.notification-dismiss').click({mulitple: true});
}
});
I only use this immediately before needing to click the subsequent button, so the notification may close on its own.
The element in question is only temporarily attached to the DOM after saving the file.
How do I ask if this element is attached to the DOM?
I'm not completely sure that I understand your issue. But this is what I assume you mean:
You have a popup that isn't closed sometimes.
If the popup isn't closed you want to close it.
If the popup is closed you want to continue the test.
If that is correct we only need to fix step 1 and 2 since those are special. Continuing the test is just like you normally do.
To get the behaviour you need to get() the element and assert if it is present. You can do that with this code:
cy.get('body').then($body => {
if ($body.find('.notification').length === 1) {
cy.get('.notification-dismiss').click()
}
})
// continu the test
I am running e2e tests on a web app using Cypress.
This section fails intermittently.
Here, search text is entered in the appropriate field. When {enter} is clicked, the search happens & the dialog only shows the search results.
Here is the code:
function selectDesign(designName: string, designCode: string) {
// enter search text & click enter
cy.get(singlePickerSearch).type(designName + '{enter}', { force: true });
// select your design from search results
cy.get(designPickerDesign(designCode))
.scrollIntoView()
.should('have.length', 1)
.click({ force: true });
}
When it fails, it is like '{enter}' was not executed. I can click enter manually, and it works.
Because it is an intermittent failure, it is difficult to obtain logs.
Every single test uses the same design. In a single run there are 19 tests. The test runner can find the file 18 times & then fail on 1 test.
Also tried using backticks in the .type() command:
cy.get(singlePickerSearch)
.clear()
.type(`${designName}{enter}`);
There was no appreciable improvement.
I finally got this working by using the following:
function selectDesign(e2eDesign: any) {
// open dodi picker
cy.get(createCardQueryOpenDodiPicker)
.should('be.visible')
.click()
.then(() => {
// wait for loader
cy.get(loader).should('not.be.visible');
// enter search text
cy.get(dodiPickerSearchText)
.clear()
.type(`${e2eDesign.design.name}{enter}`)
.then(() => {
// wait for loader to go
cy.get(loader).should('not.be.visible');
// short wait to avoid intermittent failure here
cy.wait(400);
// select required design
cy.get(dodiPickerItems)
.should('have.length', 1) // should only be one match
.click();
});
});
}
I think the last .should('have.length' 1) causes it to wait until that is true before trying to execute the next statement.
In a test spec, I need to click a button on a web page, and wait for the new page completely loaded.
emailEl.sendKeys('jack');
passwordEl.sendKeys('123pwd');
btnLoginEl.click();
// ...Here need to wait for page complete... How?
ptor.waitForAngular();
expect(ptor.getCurrentUrl()).toEqual(url + 'abc#/efg');
Depending on what you want to do, you can try:
browser.waitForAngular();
or
btnLoginEl.click().then(function() {
// do some stuff
});
to solve the promise. It would be better if you can do that in the beforeEach.
NB: I noticed that the expect() waits for the promise inside (i.e. getCurrentUrl) to be solved before comparing.
I just had a look at the source - Protractor is waiting for Angular only in a few cases (like when element.all is invoked, or setting / getting location).
So Protractor won't wait for Angular to stabilise after every command.
Also, it looks like sometimes in my tests I had a race between Angular digest cycle and click event, so sometimes I have to do:
elm.click();
browser.driver.sleep(1000);
browser.waitForAngular();
using sleep to wait for execution to enter AngularJS context (triggered by click event).
You don't need to wait. Protractor automatically waits for angular to be ready and then it executes the next step in the control flow.
With Protractor, you can use the following approach
var EC = protractor.ExpectedConditions;
// Wait for new page url to contain newPageName
browser.wait(EC.urlContains('newPageName'), 10000);
So your code will look something like,
emailEl.sendKeys('jack');
passwordEl.sendKeys('123pwd');
btnLoginEl.click();
var EC = protractor.ExpectedConditions;
// Wait for new page url to contain efg
ptor.wait(EC.urlContains('efg'), 10000);
expect(ptor.getCurrentUrl()).toEqual(url + 'abc#/efg');
Note: This may not mean that new page has finished loading and DOM is ready. The subsequent 'expect()' statement will ensure Protractor waits for DOM to be available for test.
Reference: Protractor ExpectedConditions
In this case, you can used:
Page Object:
waitForURLContain(urlExpected: string, timeout: number) {
try {
const condition = browser.ExpectedConditions;
browser.wait(condition.urlContains(urlExpected), timeout);
} catch (e) {
console.error('URL not contain text.', e);
};
}
Page Test:
page.waitForURLContain('abc#/efg', 30000);
I typically just add something to the control flow, i.e.:
it('should navigate to the logfile page when attempting ' +
'to access the user login page, after logging in', function() {
userLoginPage.login(true);
userLoginPage.get();
logfilePage.expectLogfilePage();
});
logfilePage:
function login() {
element(by.buttonText('Login')).click();
// Adding this to the control flow will ensure the resulting page is loaded before moving on
browser.getLocationAbsUrl();
}
Use this I think it's better
*isAngularSite(false);*
browser.get(crmUrl);
login.username.sendKeys(username);
login.password.sendKeys(password);
login.submit.click();
*isAngularSite(true);*
For you to use this setting of isAngularSite should put this in your protractor.conf.js here:
global.isAngularSite = function(flag) {
browser.ignoreSynchronization = !flag;
};
to wait until the click itself is complete (ie to resolve the Promise), use await keyword
it('test case 1', async () => {
await login.submit.click();
})
This will stop the command queue until the click (sendKeys, sleep or any other command) is finished
If you're lucky and you're on angular page that is built well and doesn't have micro and macro tasks pending then Protractor should wait by itself until the page is ready. But sometimes you need to handle waiting yourself, for example when logging in through a page that is not Angular (read how to find out if page has pending tasks and how to work with non angular pages)
In the case you're handling the waiting manually, browser.wait is the way to go. Just pass a function to it that would have a condition which to wait for. For example wait until there is no loading animation on the page
let $animation = $$('.loading');
await browser.wait(
async () => (await animation.count()) === 0, // function; if returns true it stops waiting; can wait for anything in the world if you get creative with it
5000, // timeout
`message on timeout`
);
Make sure to use await
you can do something like this
emailEl.sendKeys('jack');
passwordEl.sendKeys('123pwd');
btnLoginEl.click().then(function(){
browser.wait(5000);
});
browser.waitForAngular();
btnLoginEl.click().then(function() { Do Something });
to solve the promise.