Something in Cypress: Tips and Lessons Learned from My Journey

1. The best way to install Cypress in your project.

There are various methods to install Cypress, such as using Homebrew or Docker, and also installing Cypress via npm, yarn, or pnpm. However, the recommended approach is to install Cypress via npm, yarn, or pnpm, as outlined in the official documentation.

Installing Cypress via npm, yarn, or pnpm ensures that everyone in the project uses the same Cypress version. This consistency is crucial for CI/CD pipelines, where having a predictable environment simplifies setup.

While we can acknowledge alternative approaches, it’s important to emphasize the benefits of using npm, yarn, or pnpm for project cohesion and efficient testing integration.

2. How Cypress utilizes jQuery under the hood as its selector engine

Cypress indeed uses jQuery for DOM manipulation and querying within its test scripts. This means that when you write Cypress commands to interact with elements on your web application during testing, behind the scenes, Cypress uses jQuery methods to locate and manipulate those elements.

Here are a few points to note about Cypress and jQuery integration:

1. Selector Engine: Cypress uses jQuery selectors ($, $$, etc.) to find and interact with DOM elements in your tests. This allows you to leverage jQuery's powerful querying capabilities directly in your Cypress test scripts.
2. Compatibility: If you’re familiar with jQuery selectors and methods, you can apply that knowledge directly in your Cypress tests. This can be advantageous for those who have experience with jQuery and want to use its syntax for testing.
3. Under the Hood: Even though Cypress uses jQuery, it abstracts away a lot of the complexities of dealing with asynchronous behaviors, making it easier to write and maintain tests for modern web applications.
4. TypeScript Support: Cypress provides TypeScript hints that indicate its chainable methods, while under the hood, jQuery handles the DOM interactions.

Simply, When you use Cypress commands like cy.get() or cy.contains(), you're actually using jQuery selectors. For example, cy.get('button') internally uses jQuery's $('button') to find and interact with the button element on your web page.