Cypress新手技术咨询：Cypress对象与JQuery对象的差异及性能影响、cy.wrap函数作用与断言方法选择

Hey there! Since you're new to Cypress and experimenting with different approaches, let's break down your questions clearly with context from your sample code.

1. Differences Between Cypress Objects & jQuery DOM Operations, and Performance Impacts #

First, let's clarify the core distinction:

• Cypress commands (like cy.get, cy.contains) return Cypress "chainers": These are not raw jQuery objects—they wrap jQuery and add Cypress-specific features like automatic retries, async queueing, and test context integration.
• When you use .then() on a Cypress command, you get a raw jQuery object: This is the actual DOM element(s) wrapped in jQuery, which behaves exactly like regular jQuery in vanilla JS.

Key Differences: #

• Automatic Retries: Cypress chainers will retry the preceding command until your assertion passes or the timeout is hit. For example, cy.get('#submit').should('be.enabled') will keep checking the button until it's enabled, even if the DOM takes time to update. jQuery has no retry logic—$('#submit').is(':enabled') runs once, and if the element isn't ready yet, you'll get a false negative.
• Async Execution: Cypress commands are added to a queue and run asynchronously in order. jQuery operations are synchronous and run immediately when the code executes. This means you can't mix raw jQuery with Cypress commands without handling wait times manually.
• Test Context Access: Cypress chainers let you access other Cypress APIs (like cy.log, cy.wait) in the chain. jQuery objects don't have access to these—they're purely for DOM manipulation.

Performance Impacts: #

• Cypress Retries: If you use specific, efficient selectors, retries are a huge win—they prevent flaky tests caused by slow-loading DOM. But if your selectors are vague (like cy.get('div')), Cypress will waste time retrying on multiple elements, slowing down your test.
• jQuery Operations: Raw jQuery is faster for one-off DOM checks since there's no retry overhead. But you have to manually handle waits (e.g., using cy.wait() or checking if elements exist first) to avoid race conditions, which adds complexity.

2. should() vs expect(): Use Cases, and What cy.wrap() Does #

Let's start with the assertion methods, then dive into cy.wrap().

should() vs expect(): When to Use Which #

• should(): This is a Cypress-specific chained assertion. It works directly with Cypress chainers and leverages Cypress's retry mechanism. Use it when you want to assert directly on a Cypress command's subject. For example:

  cy.wrap(secondForm).find('[for="exampleInputPassword1"]').should('contain','Password')
  

  Here, should('contain', 'Password') tells Cypress to keep re-running the find command until the element contains the text (or times out). This is perfect for asserting on elements that might take time to update.

• expect(): This is a standard Chai assertion (a vanilla JS assertion library). It's synchronous and works on plain variables (like strings, numbers, or jQuery objects you've extracted in .then()). Use it when you've already retrieved a value and want to assert on it immediately. In your sample code:

  const emailLabelFirst = firstForm.find('[for="inputEmail1"]').text()
  expect(emailLabelFirst).to.equals('Email')
  

  Here, emailLabelFirst is a plain string—expect checks it once, no retries needed, since you've already fetched the text from the jQuery object.

What cy.wrap() Actually Does #

The Cypress docs description can be a bit jargon-heavy, so let's simplify: cy.wrap() takes any value (a jQuery object, a plain JS variable, even an array) and converts it into a Cypress chainer object. This lets you:

1. Use Cypress's chained commands (like .find(), .should()) on non-Cypress subjects.
2. Take advantage of Cypress's retry mechanism for assertions on those subjects.

In your sample code, secondForm is a raw jQuery object from .then(). If you tried to do secondForm.find(...).should(...), it would fail because jQuery objects don't have a should() method. But cy.wrap(secondForm) turns it into a Cypress chainer, so you can chain .find() and .should()—and Cypress will retry that chain until the assertion passes.

As for why you can't use should() directly on variables in .then(): it's because those variables are plain JS/jQuery values, not Cypress chainers. cy.wrap() bridges that gap.

Quick Note on Your Sample Code #

Your code does a great job showing both approaches:

• You use expect() to assert on text values you've extracted from jQuery objects (since those values are static once retrieved).
• You use cy.wrap() + should() to assert directly on an element from a jQuery object, letting Cypress handle any potential DOM delays with retries.

内容的提问来源于stack exchange，提问作者Bilawal Wajid Ali