How to grab the :id from URLs using Cypress?

1
votes

I am currently working on Cypress tests and encountered an issue to which I cannot find the answer. Hopefully someone can help.

So, in ReactJs I have the following component that I want to test:

<Link
  to={`/example/${exampleId}/subexample/create`}
  className={classes.linkIcon}
  title="Create subexample"
  data-test="new-subexample"
>

To test this piece, in Cypress I am first creating a new example and that works fine, but then to test the subexample gives me problems because data-test="new-subexample" is not doing what I am expecting (i.e. to click on the /example/:exampleId/subexample/create link). Here is some code:

    cy.get("[data-test=new-subexample]").click()
    const subexample = faker.lorem.paragraph().substring(0, 200);

    ......
    cy.get('[data-test="submit-subexample"]').click();
    cy.get(".toast--success").should("be.visible");
  });

Did anyone encountered this before and how did you manage to click on the links where the id is always changing?

Also, maybe one approach would be to grab the :exampleId after example has been created (also via Cypress), but I cannot find anywhere how to get the element from the URL using Cypress.

Thanks in advance.

screenshot of the error

UPDATE: The problem was the redirect which took some time and never completed in time for the test to pass. I added a wait (using cy.wait()) time before the redirect and now the test passed.

1
reactjscypress
The screenshot of the error doesn't seem related to the elements mentioned in your code. – Arnon Axelrod
very good you noticed that, will update my question with the solution. – Diana Rusu

1 Answers

0
votes

To test the URL after redirect, you can use cy.url.

cy.url().should('include', `/example/${exampleId}/subexample/create`);