Currently when I am using cy.stub() inside a loop, It works for the first time but for the second time it throws error "Attempted to wrap open which is already wrapped".
screenshot here
for(...){
cy.window().then((win) => {
cy.stub(win, 'open').as('popup');
})
//click event that opens the window
cy.get("#popup").should("be.called"); // works for the first loop and breaks for the second time
}
You are trying to create a stub with the same exact alias each time in your loop. Each alias should be unique and to do that with your loop you'll have to append a unique id to it.
for(i=0, i<10, i++){
cy.window().then((win) => {
cy.stub(win, 'open').as(`popup${i}`);
})
//click event that opens the window
cy.get(`#popup${i}`).should("be.called");
}
Move the stub setup outside the loop
cy.window().then((win) => {
cy.stub(win, 'open').as('popup');
})
for(...){
//click event that opens the window
cy.get("#popup").should("be.called");
}
Related
I'm new to cypress framework and trying to achieve the below functionality using cypress.
I have a page with table rows and a dropdown menu on page header. On selecting the option, the dropdown menu gets closed and the body content gets changed/loaded up according to the selected menu options.
Problem: Getting the same length for the table rows for all the menu options selected sequentially, although the table rows count is different for the options.
Here is my code:
it.only('Validate table Row changed length on menu option selection', {defaultCommandTimeout: 10000}, () => {
// opening the dropdown menu
page.openDropdownMenu();
// getting the dropdown options and calculating the length
cy.get('dropdownOptions').then($options => {
// calculating the length
const menuOptionCount = $options.length;
// closing the dropdown menu
page.closeDropdownMenu();
for (let i = 0; i < menuOptionCount; i++) {
// opening the dropdown menu
page.openDropdownMenu();
// clicking the menu option
$options[i].click();
// closing the dropdown menu
page.closeDropdownMenu();
cy.get("body").then($body => {
// always getting the same length for the table rows for all selected options
const rowsLength = $body.find('.table.rows').length;
cy.log('****************Rows length************', rowsLength);
});
}
});
});
Is there any way to write the asynchronous statement to synchronous like (await async in promises) without using any external utility in cypress. As in my previous assignment using Protractor the same thing could be handled using async await as below.
const elementCount = await element(
by.css('[title="Locked By"] .med-filter-header-button div')
).count();
After click() the app rewrites the table, but Cypress does not know that happens and gets the row count before the change occurs.
TLDR - You need to give Cypress more information test correctly. Generally, your test data should be known (not "discovered" by the test code).
Problem #1
You need some way to wait for the row change to finish. Either some text element changes (maybe the first row text), or by adding a .should() on the actual row count.
Something like
const expectedRowCount = [5, 4, 3, 2]
cy.get('dropdownOptions').each(($option, index) => {
page.openDropdownMenu()
$option.click()
page.closeDropdownMenu()
cy.get('.table.rows')
.should('have.length', expectedRowCount[index]) // this will retry until rowsLength changes
.then(rowsLength => {
cy.log('****************Rows length************', rowsLength)
})
})
Problem #2
If "the body content gets changed/loaded" means that the dropdown also gets rewritten with every click, then the loop will fail because $options gets refreshed each time.
You might use the expectedRowCount to loop instead
const expectedRowCount = [5, 4, 3, 2]
expectedRowCount.forEach((expectedCount, index) => {
page.openDropdownMenu()
cy.get('dropdownOptions').eq(index).click()
page.closeDropdownMenu()
cy.get('.table.rows')
.should('have.length', expectedCount) // retries until rowsLength changes
.then(rowsLength => {
cy.log('****************Rows length************', rowsLength)
})
})
The above strategies do not really give you the most solid test.
If you can, check some text that changes upon each iteration,
page.openDropdownMenu()
cy.get('dropdownOptions').then($options => {
let firstRowText = ''; // to control the loop, waiting for this to change
const menuOptionCount = $options.length;
page.closeDropdownMenu();
for (let i = 0; i < menuOptionCount; i++) {
page.openDropdownMenu();
cy.get('dropdownOptions').eq(i).click(); // fresh query each time through the loop
page.closeDropdownMenu();
cy.get('.table.rows').first().invoke('text')
.should('not.eq', firstRowText); // retry until text has changed
.then(newText => firstRowText = newText); // save for next loop
cy.get('.table.rows').then($rows => {
const rowsLength = $rows.length;
cy.log('****************Rows length************', rowsLength);
});
}
})
You can condense your code to something like this. Instead of using a for loop, use each which is a cypress inbuilt method for looping.
it.only(
'Validate table Row changed length on menu option selection',
{defaultCommandTimeout: 10000},
() => {
page.openDropdownMenu()
cy.get('dropdownOptions').each(($options, index) => {
cy.wrap($options).eq(index).click()
page.closeDropdownMenu()
cy.get('.table.rows')
.its('length')
.then((rowsLength) => {
cy.log('****************Rows length************', rowsLength)
})
page.openDropdownMenu()
})
page.closeDropdownMenu()
}
)
I need a way to easily trigger a click() event only if an element exist on page.
the fact that the element (confirm modal dialog) itself exist is not an issue for my test, but this can stop next steps. so I want to click OK only if the dialog is shown.
I tried something like this, but it didn't work:
cy.get('body').find("button[data-cy=sometag]").then(items => {
if(items.length) {
cy.get('button[data-cy=sometag]').click();
}
});
If you want to test that the modal exists but don't want to fail the test if it doesn't, use a jQuery selector.
const found = Cypress.$('button[data-cy=sometag]').length
Modals are likely to animate on opening, so you you will need to repeat the check a few times, which you can do in a function
function clearModal(selector, timeout = 1000, attempts = 0)
if (attempts > (timeout / 100)) {
return; // modal never opened
}
if (!Cypress.$(selector).length) { // not there yet, try again
cy.wait(100)
clearModal(selector, timeout, ++attempts)
else {
Cypress.$(selector).click() // modal is up, now close it
}
}
clearModal('button[data-cy=sometag]')
If you use the find like this cy.get('body').find("button[data-cy=sometag]") this will fail always whenever the element is not present. Instead you can use the find command inside the If condition and check its length.
cy.get('body').then($body => {
if ($body.find("button[data-cy=sometag]").length > 0) {
cy.get('button[data-cy=sometag]').click();
} else {
//Do something
}
})
Instead of body, you can also use the parent element of the element in question, which you know for sure is visible and present on the page every time.
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.
For some reason an RSVP promise I created in an action stopped working for me and I can't figure out what when wrong where to make it stop working.
I have a component that sends an action and waits for a response
// COMPONENT IN ITEM ROUTE
callAjaxAction() {
this.setProperties({working:true});
Ember.RSVP.cast(this.attrs.action()).finally(() => {
Ember.$('.draggable').animate({
left: 0
});
this.setProperties({working:false});
});
}
This particular instance of the component calls this action in the controller
// IN ITEM CONTROLLER
placeBid() {
return new Ember.RSVP.Promise((resolve,reject) => {
if(this.get('winning')) {
this.get('notification')._confirm({message: "You are currently the highest bidder, would you like to continue with your bid?",isConfirm: true}).then(()=>{
console.log('confirmed');
this.send('placeBidActual').then(()=>{
resolve();
}).catch(()=>{
reject();
});
return true;
}).catch(()=>{
resolve();
console.log('denied');
return false;
});
} else {
setTimeout(()=>{
this.send('placeBidActual').then(()=>{
resolve();
}).catch(()=>{
reject();
});
},500);
}
});
}
This action is calling a confirm method on a service and waiting for the user to hit yes in the case of the user already winning this item. Otherwise I'm just calling the actual ajax action right away, that action looks like this
// IN ITEM CONTROLLER
placeBidActual() {
return new Ember.RSVP.Promise((resolve,reject) => {
Ember.$.ajax({
...
}).then((response)=>{
(do some stuff with the response)
resolve();
}, (reason)=>{
(do something with rejection reason)
reject(reason);
});
});
}
In the console I'm getting the error
Uncaught TypeError: Cannot read property 'then' of undefined
On the line where it states this.send('placeBidActual')
UPDATE:
Here is maybe a better explanation to the expected process flow.
The user attempts to place a bid, the user swipes a component over to indicate they wish to bid. The UI at this point shows a loading indicator and waits for the ajax action to complete before it resets the UI.
If the user is not already the highest bidder of the item it will go straight to the ajax action and upon completion signifies to the component to reset the UI.
However, if the user is the highest bidder of the item it should instead show a confirm message (using the notification service I have setup) and wait for the user to either confirm or deny. If they deny it just cancels and signifies to the component to reset the UI. If the user confirms then it calls the ajax action and upon completion signifies to the component to reset the UI.
Updated answer:
This isn't working because send doesn't return the value of the action.
I suggest moving the placeBidActual action to a method on the controller and call it like any normal method. This way you will get the return value and be able to call .then on it.
You should pass a function, whithout invoke it.
Instead this:
Ember.RSVP.cast(this.attrs.action()).finally(() =>
Try it:
Ember.RSVP.cast(this.attrs.action).finally(() =>
Invoking the funcion this.attrs.action() does it pass undefined for the Promise.
i am showing the server error message with an info_dialog.
I would like to fire a function, when the info_dialog ist getting closed. I have tried to do it with a mouse click, but it only fires after the dialog is already closed
first mouseclick: dialog closes, but alert is not fired
second and every following mouseclick: alert is fired.
I am using celledit.
Anyone with an idea how i can fire a function, when the dialog ist getting closed?
Thanks for your help.
errorCell: function(serverresponse, status) {
$.jgrid.info_dialog(
$.jgrid.errors.errcap,
serverresponse.responseText,
$.jgrid.edit.bClose,
{ zIndex: 1500}
);
$(document).click(function() {
alert( "Handler for .click() called." );
});
}
The method $.jgrid.info_dialog supports onClose callback which will be called on closing. The return value from the callback informs whether the closing is permitted. Just try the code
$.jgrid.info_dialog(
$.jgrid.errors.errcap,
serverresponse.responseText,
$.jgrid.edit.bClose,
{
zIndex: 1500,
onClose: function () {
alert("inside onClose");
return true; // allow closing
}
}
);
UPDATED: To catch closing of $.jgrid.info_dialog in case of clicking with the mouse outside of the dialog one have to do more complex trick.
var orgViewModal = $.jgrid.viewModal;
$.extend($.jgrid,{
viewModal: function (selector, options) {
if (options.onHide) {
options.orgOnHide = options.onHide;
options.onHide = function (h) {
alert("inside onHide");
return options.orgOnHide.call(this, h);
}
}
return orgViewModal.call (this, selector, options);
}
});
$.jgrid.info_dialog($.jgrid.errors.errcap, "Test message",$.jgrid.edit.bClose, {
zIndex: 1500,
onClose: function () {
alert("inside onClose");
return true; // allow closing
}
});
In the first part of the code I use "subclassing" of $.jgrid.viewModal method (like I used in the answer, this one and some other). So I forward all calls to original $.jgrid.viewModal method with one exception. If $.jgrid.viewModal method are called with onHide callback parameter I forward to original $.jgrid.viewModal method modified implementation of the callback. It allows to catch closing of the dialog.
UPDATED 2: The demo shows the approach live.
Alternatively (instead of subclassing) you can just modify the lines
onHide: function(h) {
h.w.hide().remove();
if(h.o) { h.o.remove(); }
},
of info_dialog in jquery.jqGrid.src.js. You need just insert additional call of mopt.onClose if the option defined. Probably one should include additional callback onClosed because onClose can deny closing, but new callback called inside of onHide can't do this.