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 zeromquan opened 1 year ago

zeromquan 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.

zeromquan 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