我如何在赛普拉斯中存储一个值以供以后在测试中使用？

Question

Problem: I am testing whether one piece of information is exactly the same as it is somewhere else. I would like to know how to keep that first piece of information, and then use it later for comparison through Cypress assertions.

Steps for extra clarity of problem:

1. Visit one URL path
2. Use cy.get() to obtain an element in the HTML DOM
3. Visit the second URL path
4. Assert the first element against one in the current page, and ensure they are matching.

Current Code Attempt:

// After visiting the first URL, I look to store the display title:
    cy.get('[datacy="displayTitle"]').then((displayTitle) => cy.wrap(displayTitle).as('displayTitle'));

// I then go to the second url
    cy.visit("different url")

// My attempt at asserting the first element equals the second.
    cy.get("@displayTitle").then(title => {
        const titleText = cy.get(':nth-child(1) > .css-106jpu6 > .css-1j088rq > .MuiBox-root > button > .MuiTypography-root')
        expect(title).to.equal(titleText)
    })

Error:

(uncaught exception)TypeError: Cannot read properties of null (reading 'displayTitle')

It looks like I cannot read the properties when wrapping the display title, to make the assertion. What am I doing incorrectly? Is wrapping the best approach here?

Answer 1

The solution is to use cy.wrap() , and access the value of the element. This removed my error.

Read about wrap in the Cypress documentation .

Step 1) Wrap the first element you would like to use later, and use the val() method to target the value of the element:

cy.get('element').then((el) => cy.wrap(el.val()).as('el'));

Step 2) Navigate to your new page:

cy.visit(url)

Step 3) Compare the first value with the value on that page:

cy.get('secondElement').then((secondEl) => cy.wrap(secondEl.val()).as('secondEl'));
cy.get("@secondElement").then((secondElement) => cy.get("@el").should("contain", secondElement));

Code Samples Altogether:

cy.get('element').then((el) => cy.wrap(el.val()).as('el'));
cy.visit(url)
cy.get('secondElement').then((secondEl) => cy.wrap(secondEl.val()).as('secondEl'));
cy.get("@secondElement").then((secondElement) => cy.get("@el").should("contain", secondElement));

Answer 2

In addition to the options already mentioned, there is also the option of using Cypress environment variables .

The use is very simple:

Set variable:

Cypress.env(ENV_NAME, yourVariable)

Read variable:

const yourVariable = Cypress.env(ENV_NAME)