search

cypress-io / cypress-example-kitchensink

This is an example app used to showcase Cypress.io testing.
https://example.cypress.io/
MIT License
1.22k stars 2.2k forks source link

element selector: ":last" vs ":last-child" #753

Open xmquan opened 1 year ago

xmquan commented 1 year ago

https://github.com/cypress-io/cypress-example-kitchensink/blob/277e055329a3c1a07674aeaf42d882488dcdbb78/cypress/e2e/2-advanced-examples/assertions.cy.js#L12

should be changed to .find('tbody tr:last-child') to get the last element. The :last-child is accepted in CSS while not :last .

MikeMcC399 commented 1 year ago

@zeromquan

Interesting find! The one line of code is not the only place where :last is used.

Documentation

The reason that :last works is as follows:

The Cypress find command documentation says:

The querying behavior of this command matches exactly how .find() works in jQuery.

jQuery > Category: Selectors includes the :last Selector.

HOWEVER, this positional selector is deprecated!

Deprecation

The jQuery > :last Selector was deprecated in jQuery 3.4.0 released on April 10, 2019. See section "Deprecating positional selectors and the sunset of Sizzle", where it says:

jQuery 3.4.0 is deprecating :first, :last, :eq, :even, :odd, :lt, :gt, and :nth.

Suggestion

Review and revise all use of the deprecated jQuery positional selectors such as :first and :last, both in this repository and in the Cypress documentation repository.

xmquan commented 1 year ago

for the positional selector, .first() .last() are more Cypressic way.

MikeMcC399 commented 1 year ago

Cypress seems to be using jquery 3.1.1 currently, which was released on Sep 23, 2016

https://github.com/cypress-io/cypress/blob/f741635b91d8e1e9d9a0ec7ac3680d05b0bc01fd/package.json#L270

    "**/jquery": "3.1.1",
MikeMcC399 commented 1 year ago
alexsch01 commented 3 days ago

Cypress seems to be using jquery 3.1.1 currently, which was released on Sep 23, 2016

https://github.com/cypress-io/cypress/blob/f741635b91d8e1e9d9a0ec7ac3680d05b0bc01fd/package.json#L270

    "**/jquery": "3.1.1",

Now Cypress is using jquery 3.4.1 https://docs.cypress.io/app/references/changelog#13-15-2:~:text=Updated%20jquery%20from%203.1.1%20to%203.4.1

MikeMcC399 commented 3 days ago

@alexsch01

Thanks for spotting that Cypress >= 13.13.1 is using jquery@3.4.1! I have hidden my post, which you quoted, as outdated.

The suggestion in https://github.com/cypress-io/cypress-example-kitchensink/issues/753#issuecomment-1751995291 to update the usage is still valid and the tests continue to work with the current Cypress 13.15.2 despite the deprecation.