Adding the data-cy attributes to the element for testing.

[alinadivante]

Add data-* attributes to provide context to following selectors and isolate them from CSS or JS changes.

---

UPDATE
@defudef

• footer links
• header's categories
• subcategories in the sidebar
  (and also sidebar div #category > div.main.section > div.sidebar.desktop-only > div > div)
• each filter element
• tabs in myAccount
• language icons (.container > :nth-child(2) > .sf-image > img)
• images from PDP (.product__gallery > .sf-image > img) and from the cart (each element)
• options from dropdown list (.sf-select__options > :nth-child(4)')
• counter from minicart icon (.sf-badge)
• .sf-checkbox__input
• .sf-circle-icon

---

• Home Page
  (login modal):

• '.sf-topbar__right > .sf-button'

• '.action > .sf-button'

• '#email'

• '#password'

• '.sf-input__error-message'

• '.form > .sf-button--full-width'

• '.sf-header__container'

• '.sf-search-bar__input'

• '[style="--max-width:56px;"] > a'

• '.sf-top-bar__container'

• '.sf-footer__container'

• '.container > :nth-child(2) > .sf-image > img'

• #footer

• (registration modal):

• '#email'

• '#first-name'

• '#last-name'

• '#password'

• '#create-account'

• '.sf-input__error-message'

• Navbar

• '[aria-label="cart"]'

• '[style="--max-width:56px;"] > a'

• .sf-header__logo > .sf-image > img

• [style="--max-width:31px;"] > a

• [style="--max-width:32px;"] > a

• .nuxt-link-exact-active

• .sf-search-bar__input

• :nth-child(4) > .sf-header__icon > .sf-icon-path

• :nth-child(5) > .sf-header__icon > .sf-icon-path

• :nth-child(6) > .sf-header__icon > .sf-icon-path

• Sidebar - cart

• 'a[href*="personal-details"]'

• '.sf-sidebar__circle-icon'

• '.heading__close-button'

• '.sf-collected-product__title'

• '.sf-collected-product__quantity-wrapper > .sf-quantity-selector > :nth-child(3)'

• '.sf-collected-product__quantity-wrapper > .sf-quantity-selector > :nth-child(1)'

• '.sf-collected-product__details > .sf-price > .sf-price__value--special')

• '.sf-property > .sf-price > .sf-price__value'

• '.sf-collected-product__actions > .sf-button'

• '.sf-collected-product__quantity-wrapper > .sf-quantity-selector > .sf-input > .sf-input__wrapper > input'

• '.empty-cart__label'

• '.empty-cart > .sf-button'

• Product Page:

• '[data-test=sf-add-to-card] > .sf-b'

• '.sf-sticky > .sf-heading > .sf-heading__title'

• '.product-details__sub'

• '.product__gallery > .sf-image > img'

• '.sf-color'

• '.sf-select__selected'

• '.sf-select__options'

• .sf-carousel

• sf-arrow--right'

• ':nth-child(6) > :nth-child(2) > .sf-button'

• ':nth-child(6) > :nth-child(3) > .sf-button'

• Category Page:

• .main > .sidebar

• .navbar__sort > .sf-select > [style="position: relative;"] > .sf-select__selected

• .navbar__sort > .sf-select > [style="position: relative;"] > .sf-select__dropdown

• .navbar__main > :nth-child(1)

• strong.desktop-only

• [aria-label="Change to grid view"] > .sf-icon-path

• [aria-label="Change to list view"] > .sf-icon-path

• .sf-breadcrumbs

• .sf-accordion-item__content

• '#category > div.main.section > div.sidebar.desktop-only > div > div'

• .sf-accordion-item__content > .sf-list

• Checkout:

(Personal details)

• '#firstName'
• '#lastName'
• '#email'
• '.form__action > :nth-child(1)')

(Shipping step)

• '#firstName
• '#lastName'
• '#streetName'
• '#apartment'
• '#city'
• [x ] '#zipCode
• '#state'
• '#phone'
• '.sf-select__label'
• [] '[style="position: relative;"] > .sf-select__dropdown > .sf-select__options > :nth-child(1)'
• '.form__radio-group [type="radio"]'
• '.form__action > :nth-child(1)'

(Payment step)

• '.sf-checkbox__checkmark'
• '#debit'
• '.form__action > :nth-child(1)'

(Order review)

• '.sf-checkbox__checkmark'
• '.summary > :nth-child(2) > :nth-child(1)'

(Thank you page)

• '.checkout__main'