CODEWITHSUNDEEP
cypress
Westy
Westy

Reputation: 305

Cypress find() keeping state?

I'm using the latest version of Cypress (4.12.0). I'm having problems using two find() commands in a row. It seems to me that Cypress is somehow keeping state, which is changed by doing a find().

Here is my Cypress JS code, to find the contents of three fields that are at the same level:

1. const shipmentContainer: any = cy.get(`div .shipment-container:contains("${SHIPMENT_LABEL} ${shipmentIndex + 1}")`);
2. shipmentContainer.find('div div').contains(`${TRACKING_NUMBER_LABEL} ${shipment[TRACKING_NUMBER_FIELD]}`);
3. shipmentContainer.find('div div').contains(`${SHIPPING_STATUS_LABEL} ${shipment[SHIPPING_STATUS_FIELD]}`);
4. shipmentContainer.find('div div').contains(`${SHIP_METHOD_LABEL} ${shipment[SHIP_METHOD_FIELD]}`);

I'm not including the HTML, because I don't think the details of the data matter.

Here is what is happening. Line 1 sets the container correctly. Line 2 gets the correct data, which I can see in the Cypress UI. But line 3 fails, because it appears to be starting in a totally different location than what the container was set to. If I comment out line 2, then line 3 works, but line 4 doesn't. So only the first find() ever works.

This led me to believe that the container must be keeping state. So I tried the following, but it made no difference at all, which debunked my hyposthesis.

const shipmentContainer: any = cy.get(`div .shipment-container:contains("${SHIPMENT_LABEL} ${shipmentIndex + 1}")`);
_.cloneDeep(shipmentContainer).find('div div').contains(`${TRACKING_NUMBER_LABEL} ${shipment[TRACKING_NUMBER_FIELD]}`);
_.cloneDeep(shipmentContainer).find('div div').contains(`${SHIPPING_STATUS_LABEL} ${shipment[SHIPPING_STATUS_FIELD]}`);
_.cloneDeep(shipmentContainer).find('div div').contains(`${SHIP_METHOD_LABEL} ${shipment[SHIP_METHOD_FIELD]}`);

Is Cypress itself keeping state on a find()? And if so, how can I reset it back so that each of my finds on a container starts in the same location?

Upvotes: 0

Views: 49

Answers (1)

Sam Cho
Sam Cho

Reputation: 96

That's because cypress commands are running asynchronously:

Return Values

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

For me, I often use alias to reuse the commands:

cy.get('div .some-class').as('fancyDiv');
cy.get('@fancyDiv').find('something').contains('bar');
cy.get('@fancyDiv').find('something').contains('foo');

Upvotes: 1

Related Questions