cy.url() and/or cy.location('href') does not return a string

Question

I have an editor page. When I add any content and click the "Save" button my URL will change, adding a random id in the URL. I want to check if my ID's are changing every time when I click the "Save button".

I save the URL result in variable and want to check it, I do it like this:

const currentURL = cy.url();
cy.get('.editor-toolbar-actions-save').click();
cy.url().should('not.eq', currentURL);

But my currentURL variable's type is not string:

expected http://localhost:8080/editor/37b44d4d-48b7-4d19-b3de-56b38fc9f951 to not equal { Object (chainerId, firstCall) }

How I can use my variable?

Answer 1

tl;dr

Cypress commands are asynchronous, you have to use then to work with their yields.

cy.url().then(url => {
  cy.get('.editor-toolbar-actions-save').click();
  cy.url().should('not.eq', url);
});

Explanation

A similar question was asked on GitHub, and the official document on aliases explains this phenomenon in great detail:

You cannot assign or work with the return values of any Cypress command. Commands are enqueued and run asynchronously.

The solution is shown too:

To access what each Cypress command yields you use .then().

cy.get('button').then(($btn) => {
  // $btn is the object that the previous
  // command yielded us
})

It is also a good idea to check out the core concepts docs's section on asynchronicity.