🦄 Cypress-Only Superpowers

Cypress-Only Superpowers: Cypress's selector engine runs jQuery's Sizzle motor rather than the CSS3 standard — meaning jQuery pseudo-classes like :visible, :contains(), :eq(), an

Cypress's selector engine runs jQuery's Sizzle motor rather than the CSS3 standard — meaning jQuery pseudo-classes like :visible, :contains(), :eq(), and :first work directly inside cy.get(), like using an ORM query language built on top of plain SQL: you have all the power of the base layer, but with a more expressive syntax layered on top. But if Selenium and Playwright fully support the CSS3 standard, why did Cypress choose the jQuery engine? Because Cypress runs inside the browser rather than in a separate Node.js server process, and jQuery is already loaded there — that architectural choice also delivers jQuery chaining methods like .invoke('val'), .its('length'), and .trigger() at no extra cost. In Java, think of it like Apache Commons Collections layering utility methods on top of the JDK's core collection API: non-standard, but it lets you write real-world code far faster. The practical QA payoff: without the :visible pseudo-class, selecting "all currently visible list items" in CSS3 requires either manually traversing the DOM with JavaScript or adding extra logic that makes the test more fragile — in Cypress a single line does it, which directly prevents the category of flaky tests caused by clicking a hidden element that matched the selector.

Because Cypress runs test code inside the browser, on top of the real jQuery library, it gains some features that have NO direct equivalent in Selenium or Playwright. The clearest example: the selector string you write inside cy.get() follows jQuery's Sizzle selector engine rules, not the CSS3 standard.

jQuery Pseudo-Classes — don't exist in CSS3, only in Cypress

Micro Lab: Cypress — cy.get() selection

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: Cypress — cy.get() selection

Check if data-cy attribute exists — if yes, use cy.get("[data-cy=btn]")

If no data-cy, write cy.get("#id") or cy.get(".class")

If text content matters, use cy.contains("Login") or chain .contains()

If nested structure needed, find child element with .find("button")

Assert: .should("be.visible"), .should("have.text", "...")

What is the Cypress element selection and chaining order?

.invoke() and .its() — chain-call a jQuery method/property

Micro Lab: Cypress — Writing assertions