how to access the element that is yielded from .get().contains() in .then() function
My code is not entering the Then block. where am i doing wrong ?
cy.get(".c-header-listItem").contains("My Account").should(($link) => {
expect(localStorage.read("CD-SessionId")).to.be.not.null;`enter code here`
}).then(($link) => {
$link.click();
});
I got the login from Cypress documentation https://docs.cypress.io/api/commands/should.html#Subjects
.should(elem => {}) behaves exactly as .then(elem => {}), except that the function passed to the should will retry until it doesn't throw any exceptions. With that in mind, the following code should work:
cy.get(".c-header-listItem").contains("My Account").should(($link) => {
expect(localStorage.read("CD-SessionId")).to.be.not.null;
// Notice I have to wrap this to perform a Cypress
// click on it. $link is a native DOM object.
cy.wrap($link).click();
});
This would also work, but the separation isn't necessary.
cy.get(".c-header-listItem").contains("My Account").should(($link) => {
expect(localStorage.read("CD-SessionId")).to.be.not.null;
});
cy.get(".c-header-listItem").contains("My Account").click();
Related
I'm using a node library to execute api calls for test data setup and teardown. The library works as follows:
someApiServiceObject
.executeApiCall({... parameters})
.then(doSomethingWithResults())
.catch(() => {
// Here I would like to fail the test as something has gone wrong
})
If the request fails for some reason, I only learn about it by the Promise returning from executeApiCall function being rejected - hence the catch block.
But if I put throw new Error(); into the catch block or remove the catch block, I can see the (uncaught exception) Error: in the cypress console, but the test still passes.
Can someone advise me on how this case should be handled correctly?
The test:
it('List projects', () => {
projectsApi.projectsList({})
.then(() => {
cy.log('Success');
}).catch(() => {
throw new Error();
});
});
If you call someApiServiceObject.executeApiCall({...parameters}) in a task (since it's a node library), you should just be able to return the promise and Cypress handles failing the test. Don't catch() within the task.
module.exports = (on, config) => {
on('task', {
api(parameters) {
return someApiServiceObject
.executeApiCall({... parameters})
.then(doSomethingWithResults())
},
})
}
If that fails, follow this pattern Return number of files in the folder
module.exports = (on, config) => {
on('task', {
countFiles(folderName) {
return new Promise((resolve, reject) => {
someApiServiceObject
.executeApiCall({... parameters})
.then(doSomethingWithResults())
.then((results) => resolve(results))
.catch((err) => reject(err))
})
})
},
})
}
From comments, I think there's a assumption being made that .executeApiCall() must be returning a promise, but that may not be the case.
For example cy.get(...) has a .then(...) method, but it does not return a promise, it just has a .then() method.
If .executeApiCall() does actually return a promise, the first example is all you need. If it does not, you need to wrap the code.
Cypress will recognise a promise returned from a task, and use resolve or reject accordingly.
i am new to cypress and i am trying to check if the element exists on a page once the api call is finished.
i do a http post to url 'things/thing1' and once this api finishes i want to check if span element is present on page.
i have tried something like below.
const setUp = () => {
cy.apiPatchSomethings(something1)
.then(() => {
cy.reload();
});
}
describe('Suite name', () => {
before(() => {
setUp();
});
it('test case', () => {
cy.contains('span');
}
});
the above code doesnt work. even before span element is seen on page it checks for span element.
if i use cy.wait(10000) like below it works
it('test case', () => {
cy.wait(10000);
cy.contains('span');
});
but i dont want to use cy.wait. is there some other way to solve this. could someone help me with this. thanks.
Cypress command cy.contains() when called with a single argument is looking for content,
Syntax
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)
but I'm guessing you are looking for a span element, so use
cy.get('span')
or
cy.contains('span', 'my-content-in-span')
Assuming that's not the problem, just some arbitrary sample code...
Your can modify the setup function to return a promise, in order to wait for the reload.
const setUp = () => {
return cy.apiPatchSomethings(something1) // need a return here
.then(() => {
return new Cypress.Promise(resolve => { // inner return also
cy.reload()
resolve(true) // resolve will signal reload is finished
})
});
}
Because setup() is invoked inside before() Cypress will wait for the promise to resolve before proceeding.
Please don't add extra waits or timeouts, which is too often suggested. This will only lead to flaky tests.
Note if you don't mind ditching the setup() function, it becomes a lot simpler
describe('Suite name', () => {
before(() => {
cy.apiPatchSomethings(something1)
.then(() => cy.reload() ); // all commands here will be completed
// before the tests start
});
it('test case', () => {
cy.contains('span', 'my-content-in-span');
}
});
1.You can wait for span to be visible. The default timeout that cypress provides is 4 seconds.
cy.contains('span').should('be.visible')
2.If you want to give a custom timeout(eg. 10 sec) specific to this command, you can use:
cy.contains('span', { timeout: 10000 }).should('be.visible')
3.If you want to increase the timeout globally you mention this in your cypress.json file:
"defaultCommandTimeout": 10000
and, then just use:
cy.contains('span').should('be.visible')
Now, all your commands will have a default timeout for 10 seconds.
I have a function that I want to add as a command so i can reuse it.
Its on cypress/support/commands.js:
Cypress.Commands.add("generatePassword", () => {
return 'randomstring';
}
);
Then on my test I want to use it as:
it("Visits page", () => {
const password = generatePassword();
cy.log({password})
// Here it logs this:
//{password: {chainerid: chainer146, firstcall: false}}
});
Any idea on how to get the actual value? Now i get this:
{chainerid: chainer146, firstcall: false}
Thanks.
Basically cypress works in promise chain and you're returning the promise chainerid from your custom command. You have to chain it to use in next statement. Use something like below.
it("Visits page", () => {
return cy.generatePassword().then(pwd => {
cy.log(pwd);
});
});
Cypress executing the expect assertions immediately. Not even waiting for the view to be opened at all (which takes 500ms+) .. also a cy.wait(1000) or cy.get('.modalbutton').should('be.visible'); (which would make the handle.exists() be truthy) is completely ignored too, nothing I can do to prevent it from immediately asserting.
it('Open and close split view', () => {
cy.window().then(win => {
const handle = win.Luigi.navigation().openAsSplitView('/ext', {title: 'Preserved Split View' });
// using cy.wait(N) or cy.get('#opened-splitview').should('be.visible'); are being ignored
cy.wait(1000);
// expectations are not working since they are executed immediately
cy.expect(handle.exists()).to.be.true;
handle.close();
cy.expect(handle.exists()).to.be.false;
});
});
On the other hand this one works:
cy.window().then(win => {
const handle = win.Luigi.navigation().openAsSplitView('/ext', { title: 'Preserved Split View', collapsed: false});
handle.collapse();
cy.expect(handle.isCollapsed()).to.be.true;
});
Previously it was green when win....openAsSplitView was not saved to the handle constant and close and extra command on the Luigi.navigation() api, which I refactored to align with our client side API.
So I have the feeling it could be a bug with Cypress win interception. Or I am just using it wrong.
The handle is non-async, so immediately usable. Maybe also a refactoring to return a promise which resolves once the view is really opened would help, too.
EDIT:
It is a sort of race condition which is not handled by cypress. I have worked around it with setTimeout.
setTimeout(() => {
handle.close();
setTimeout(() => {
cy.expect(handle.exists()).to.be.false;
cy.get('#splitViewContainer').should('not.be.visible');
done();
}, 50);
}, 50);
I get the following error message when using: "TypeError: Cannot read property 'text' of undefined"
I´ve done exactly as they do in the documentation: https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Aliases
Can anyone see what i´m doing wrong?
beforeEach(() => {
cy.visit('http://localhost:4200/');
loginPage.login();
timeFilter.button.click();
cy.get('#title').invoke('text').as('text');
});
it('should show text', () => {
console.log(this.text);
});
Read the cypress documentation and the problem i did was using arrow functions and i did not access the alias in a closure using a .then(). As soon as i did this, it worked:
cy.get('#title').invoke('text').as('text');
it('should show text', () => {
cy.get('#main').then(function () {
console.log(this.text);
});
});
OR use function() instead of () => on the it() callback
cy.get('#title').invoke('text').as('text');
it('should show text', function() {
console.log(this.text);
});
Text has always been a pain in cypress. This could be one of a few things:
1) Sometimes this.alias doesn't work, try using:
cy.get('#text').then(text => console.log(text));
2) If the text is contained in an element below #title, you will have to get that specific element. For example, #title might be a div, which contains an h1 element inside of it, so in that case you would need to use #title > h1 as your selector. Post your HTML and I'll be able to tell if that's the case
3) invoke('text') almost never works, I'm not sure why. I find this works much more often cy.get('#title').then($el => el.text())