Get the value or the text of an element in Cypress and use it later in the test - not possible
Introduction to the Cypress test challenge
Lets consider that we have a page with a popup where a user can change a number by selecting it from a select element.
That popup will close once the user finished the selection.
Later, down the page, is a Submit button that will do a redirect to another site, and the URL of that redirect will contain a parameter with the value selected by the user above in the popup.
The challenge I had today it was to check that the URL where the redirection is done contains the selected value from above by using
cy.location('search').should('equal', '?selectedValue='+selectedValue);Playground and various tries
My first try was to get the value of the selected option and simple use it as
cy.location('search).should('equal', '?selectedValue='+cy.get('select[name=numberToChose]').find('option:selected').invoke('text')));but I found that
cy.get('select[name=numberToChose]').find('option:selected').invoke('text');is returning [object Object] when used as a URL parameter.
Then I found that I need a promise to get the value and use it inside the promise by giving it an alias
cy.get('select[name=numberToChose]').find('option:selected').invoke('text').then(selectedValue => {
cy.wrap(selectedValue).as('selectedValue');
cy.get('@selectedValue'); // will return the selected value - e.q. 2
})
cy.get('@selectedValue'); // will return [object Object]only that this way does not permit the use of cy.get(‘@selectedValue’) outside the promise where the value is still [object Object]
My intention is to do the URL check later in the test after the user finishes with doing the selection, after the popup is closed, and after the user clicks on the Submit button and the page is redirecting, then I want to take the new URL and check if in its parameters list the value of selectedValue is as expected (e.q. 2).
On Cypress documentation page I found this example that should do what I need
beforeEach(() => {
// alias the $btn.text() as 'text'
cy.get('button').invoke('text').as('text')
})
it('has access to text', function () {
this.text // is now available
}) Even if the above code it looks credible that it will do the right thing, put into practice with the updated code as
beforeEach(() => {
// alias the $btn.text() as 'text'
cy.get('select[name=numberToChose]').find('option:selected').invoke('text').as('selectedValue');
})
it('has access to selectedValue', function () {
this.selectedValue // is now available
})is actually returning an error that the element was expected to be found but it was never found because is part of a popup that is closed at that moment and the test will have to run for a bit to get to that point where the popup is opened and the content inside it changed.
If you hope by finding this page that you will also find a solution for the same context, I am afraid this is not the case.
This article is more to show a limitation of Cypress when doing browser testing.
As this issue is still under investigation by me, I might update this article with the right solution if I will find one.
Happy testing!