Catch URL after click with Cypress (window.location changes)

Question

I would like to know how to capture and read the URL after a click event on an <a> link.

On the onClick event our javascript does some string manipulation of the actual href of the clicked link and then a window.location.href = myNewReplacebleURL is done on the fly. The original href is not necessarily the location you get to after the onClick.

Here is how I started:

describe("Twitter", function() {

  it("Should assert that via value is set correctly in JS", function() {

    cy.server();
    cy.visit(Cypress.config("appUrl") + "/probes/sha/sha-via.html");
    cy.get("#v_test ul.share li a")
      .click();

  });

});

EDIT: What I would like is to catch the URL located at the "Page Load" step.

Did you manage to solve this issue somehow? – jaw Oct 17 '19 at 06:47 — jaw, Oct 17 '19 at 06:47
No, I wonder if this is even possible – Radu Chiriac Oct 18 '19 at 08:13 — Radu Chiriac, Oct 18 '19 at 08:13

score 11 · Answer 1 · edited May 15 '20 at 12:10

11

You should be able to use cy.on to perform your assertions inside the url:changed event callback:

cy.on("url:changed", (newUrl) => {
  expect(newUrl).to.contain("?magic=true")
})

edited May 15 '20 at 12:10

conny

9,973
6
38
47

answered Mar 06 '20 at 16:23

Guillaume Robbe

658
1
7
18

1

I had to use this approach to catch query params changes, but I don't get it. Usually, Cypress philosophy is to retry until your assertion work, so `cy.url().should("match", "?foo=bar")` would be expected to wait for the url to match "foo=bar". It is not the case, I have to listen to `url:changed` as you described to make it work. – Eric Burel Jan 13 '21 at 07:36

Diogo Rocha · Answer 2 · 2019-02-01T16:55:29.143

5

You can use thecy.location() command, example:

cy.get("#v_test ul.share li a")
      .click();
cy.location('href').should('eq', 'newUrl');

Also, as an alias to the cy.location('href') command you could use cy.url().

edited Feb 01 '19 at 16:55

answered Feb 01 '19 at 16:45

Diogo Rocha

9,759
4
48
52

Thanks, but as you can see in my updated image, I would like to stop at the page load step. The generated URL (which does not exist as newURL inside Cypress) can sometimes redirect multiple times. – Radu Chiriac Feb 04 '19 at 10:17
try to add cy.location('pathname') instead cy.location('href'). – Victor Oliveira Oct 08 '20 at 10:54
This no longer works with the latest version of cypress (6.0.1 as of today) – Martin Carel Dec 01 '20 at 01:39

Catch URL after click with Cypress (window.location changes)

2 Answers2