Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Бвойства Β· jQuery для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

Powered by GitBook

ΠšΡ€ΠΎΠΌΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ свойства элСмСнтов, ΠΊ Π½ΠΈΠΌ относятся Β«selectedIndexΒ», Β«tagNameΒ», Β«nodeNameΒ», Β«nodeTypeΒ», Β«ownerDocumentΒ», Β«defaultCheckedΒ» ΠΈ Β«defaultSelectedΒ». Ну, Π²Ρ€ΠΎΠ΄Π΅ Π±Ρ‹, список Π½Π΅Π²Π΅Π»ΠΈΠΊ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ. Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ со свойствами ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈΠ· сСмСйства Β«.prop()Β»:

prop(propName) β€” ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ значСния свойства

prop(propName, propValue) β€” установка значСния свойства (Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ hash Π»ΠΈΠ±ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°)

removeProp(propName) β€” ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ свойства (скорСй всСго, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ понадобится)

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΌΡƒΠ·Ρ‹ΠΊΡƒ, ΠΈ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ – для ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ/измСнСния состояния чСкбоксов ΠΌΡ‹ всСгда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄ Β«.prop()Β», ΠΏΡƒΡΡ‚ΡŒ вас Π½Π΅ смущаСт Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠΈΠΌΠ΅Π½Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π² HTML (это я ΠΏΡ€ΠΎ Β«disabledΒ» ΠΈ Β«checkedΒ»), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Β«.prop()Β» ΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ properties.html:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ систСма Π±Π΅Π· нашСго Π²ΠΌΠ΅ΡˆΠ°Ρ‚Π΅Π»ΡŒΡΡ‚Π²Π° β€” ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ чСкбокс, сСлСктбокс, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ приступим ΠΊ сСрии экспСримСнтов (Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ страничку):

  1. Π‘Ρ‚Π°Π²ΠΈΠΌ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ Π½Π° чСкбоксС посрСдством ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Β«.attr()Β» β€” $(«#checkbox»).attr(«checked», «checked»)
  2. Π’Π΅ΠΏΠ΅Ρ€ΡŒ снимитС Π³Π°Π»ΠΎΡ‡ΠΊΡƒ ΠΌΡ‹ΡˆΠΊΠΎΠΉ β€” Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«.attr()Β» ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«.prop()Β» измСнилось
  3. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΅Ρ‰Ρ‘ Ρ€Π°Π· ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ Β«.attr()Β»

НСбольшоС пояснСниС сути происходящСго. ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π²Ρ‹Π·ΠΎΠ²Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Β«.attr(«checked», «checked»)Β» проставляСтся Π³Π°Π»ΠΎΡ‡ΠΊΠ°, Ρ‚.ΠΊ. ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΈ свойство Β«checkedΒ». ΠŸΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ Π²Ρ‹Π·ΠΎΠ²Π΅ ΡƒΠΆΠ΅ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ происходит, мСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈ Ρ‚Π°ΠΊ ΡƒΠΆΠ΅ Β«checkedΒ».

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ экспСримСнт:

  1. ΠŸΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ Π½Π° чСкбоксС
  2. Π‘Π½ΠΈΠΌΠΈΡ‚Π΅ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ β€” Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«.attr()Β» Π½Π΅ измСняСтся
  3. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ посрСдством Π²Ρ‹Π·ΠΎΠ²Π° $(«#checkbox»). attr(«checked», «checked»)

Π’ Π΄Π°Π½Π½ΠΎΠΌ экспСримСнтС интСрСсСн ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: Π²Ρ‹Π·ΠΎΠ² ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Β«.attr(«checked», «checked»)Β» Π½Π΅ срабатываСт послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ измСнял статус чСкбокса

Ну ΠΈ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ экспСримСнт со Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ чСкбоксом:

  1. УдаляСм Π³Π°Π»ΠΎΡ‡ΠΊΡƒ β€” $(«#checkbox-two»).removeAttr(«checked»)
  2. Π‘Ρ‚Π°Π²ΠΈΠΌ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ β€” $(«#checkbox-two»).attr(«checked», «checked»)
  3. ΠžΠΏΡΡ‚ΡŒ удаляСм Π³Π°Π»ΠΎΡ‡ΠΊΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ Β«.attr()Β»
  4. ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΠ΅ΠΌ Π΄ΠΎ ΡƒΠΏΠ°Π΄Ρƒ

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ β€” Π½Π΅ Ρ‚Ρ€ΠΎΠΆΡŒ, ΠΌΡ‹ΡˆΠΊΠΎΠΉ всё сломаСтС πŸ™‚

Π‘Ρ€Π°Π²Π½ΠΈΡ‚Π΅ с ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Β«.prop()Β»:

  1. УдаляСм Π³Π°Π»ΠΎΡ‡ΠΊΡƒ β€” $(«#checkbox-two»).prop(«checked», false)
  2. Π‘Ρ‚Π°Π²ΠΈΠΌ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ β€” $(«#checkbox-two»).prop(«checked», true)
  3. МоТСм ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΏΠΎ чСкбоксу ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС, всё Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ часы

НадСюсь, я достаточно наглядно Π΄Π°Π» ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π½Π°Π΄ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«.

attr()Β», Π° ΠΊΠΎΠ³Π΄Π° Β«.prop()Β»

Π­Ρ‚ΠΎ Π΅Ρ‰Ρ‘ Π½Π΅ всё, Ρƒ нас ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ свойство Β«disabledΒ»! Но Π½Π΅ Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ, Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ прСдсказуСмо, Ρ‚.ΠΊ. ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² Π΅Π³ΠΎ состояниС:

  1. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Ρ€Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΡƒ β€” $(«#radio-two»).attr(«disabled», false)
  2. Π’Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ β€” $(«#radio-two»).attr(«disabled», true)
  3. ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΠ΅ΠΌ

АналогичноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ использовании ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Β«.prop()Β»:

  1. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ β€” $(«#radio-two»).prop(«disabled», false)
  2. Π’Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ β€” $(«#radio-two»).prop(«disabled», true)
  3. ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΠ΅ΠΌ

Ну, ΠΊΠ°ΠΊ Π±Ρ‹, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«.attr()Β», Π½ΠΎ Π½Π΅Ρ‚!

Как ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, установлСн Π»ΠΈ Ρ„Π»Π°ΠΆΠΎΠΊ Π² jQuery? [Π Π•Π¨Π•ΠΠž]


Автор — Steve Alila

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π Π΅ΠΊΠ»Π°ΠΌΠ°

ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТно ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ элСмСнт, установив Ρ„Π»Π°ΠΆΠΎΠΊ jQuery. Π’ этом руководствС Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ элСмСнт послС установки Ρ„Π»Π°ΠΆΠΊΠ°. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ jQuery ΠΈ Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript.

ΠœΡ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ тСкстовоС ΠΏΠΎΠ»Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° установлСн Ρ„Π»Π°ΠΆΠΎΠΊ. Π’ΠΎΡ‚ дСмонстрация ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ рСсурсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. 9ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹

1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ toggle()

 $('<сСлСктор Ρ„Π»Π°ΠΆΠΊΠ°>').click(function() {
    $("<сСлСктор Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ элСмСнта>").toggle(this.checked)
}) 

2. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ is() , show() ΠΈ hide()

 $('<сСлСктор Ρ„Π»Π°ΠΆΠΊΠ°>').click(function(){
    Ссли($(это).Π΅ΡΡ‚ΡŒ(':ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½ΠΎ'))
    {
        $("<сСлСктор Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ элСмСнта>").show(this.checked)
    }
    Π΅Ρ‰Π΅
    {
        $("<сСлСктор Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ элСмСнта>").hide(this.checked)
    }
  }) 

3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ стандартный JavaScript change event

Advertisement

 document. getElementById('').onchange = function () {
    document.getElementById('<ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ элСмСнта>').hidden = this.checked ? false true
} 

НачнСм с настройки Π»Π°Π±ΠΎΡ€Π°Ρ‚ΠΎΡ€Π½ΠΎΠΉ срСды.

Β 

Лабораторная срСда для ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ jQuery ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π° Ρ„Π»Π°ΠΆΠΊΠΎΠΌ

ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ubuntu ΠΈ Visual Studio Code для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ЗапуститС Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π» ctrl+t , создайтС ΠΏΠ»Π°Π½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Visual Studio Code.

 mkdir jQueryChecked && cd jQueryChecked
ΠΊΠΎΡΠ½ΠΈΡ‚Π΅ΡΡŒ main.js index.html
ΠΊΠΎΠ΄ . 

ΠœΡ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠ΄ jQuery ΠΈ vanilla JavaScript Π² Ρ„Π°ΠΉΠ»Π΅ main.js ΠΏΠ΅Ρ€Π΅Π΄ связываниСм Ρ„Π°ΠΉΠ»Π° с Ρ„Π°ΠΉΠ»ΠΎΠΌ index.html .

Π’ΠΠšΠ–Π• Π§Π˜Π’ΠΠ™Π’Π•: JavaScript Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„Π°ΠΉΠ» JSON [Π Π•Π¨Π•ΠΠž]

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ.

Β 

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ установки Ρ„Π»Π°ΠΆΠΊΠ° jQuery

Π’ΠΎΡ‚ ΠΊΠΎΠ΄ HTML.

 

<Π³ΠΎΠ»ΠΎΠ²Π°>
    <ΠΌΠ΅Ρ‚Π°-ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ°="UTF-8">
    
     0">
    Π€Π»Π°ΠΆΠΎΠΊ jQuery установлСн   
<Ρ‚Π΅Π»ΠΎ>
     

Π€Π»Π°ΠΆΠΎΠΊ Testing jQuery установлСн

<Ρ„ΠΎΡ€ΠΌΠ°> <Π΄Π΅Π»> <Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°="Ρ„Π»Π°ΠΆΠΎΠΊ">

Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ jQuery вСрсии 3.6.2,

  

ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ с Π²Π²ΠΎΠ΄ΠΎΠΌ Ρ„Π»Π°ΠΆΠΊΠ° с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ

age_checked Β 

Advertisement

  

ΠΈ тСкстовоС ΠΏΠΎΠ»Π΅ с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ age_textbox .

  

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ тСкстовоС ΠΏΠΎΠ»Π΅ скрыто. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ это, установив Ρ„Π»Π°ΠΆΠΎΠΊ. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ связываСм Ρ„Π°ΠΉΠ» сцСнария main.js ΠΏΠ΅Ρ€Π΅Π΄ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.

Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ toggle()

 $('#age_checked').click( () => {
    $("#age_textbox").toggle(this.checked)
}) 

Π‘Π΅Ρ€Π΅ΠΌ чСкбокс с Π΅Π³ΠΎ id. ΠŸΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΏΠΎ Ρ„Π»Π°ΠΆΠΊΡƒ функция стрСлки запускаСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π² тСкстовом ΠΏΠΎΠ»Π΅. Если тСкстовоС ΠΏΠΎΠ»Π΅ скрыто, функция ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΅Π³ΠΎ. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ скрываСт это.

Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ИспользованиС is() с функциями show() ΠΈ hide()

 $('#age_checked').click(function(){
    Ссли($(это).Π΅ΡΡ‚ΡŒ(':ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½ΠΎ'))
    {
        $("#age_textbox").show(this.checked)
    }
    Π΅Ρ‰Π΅
    {
        $("#age_textbox").hide(this.checked)
    }
  }) 

ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Ρ„Π»Π°ΠΆΠΊΠ° jQuery провСряСт, установлСн Π»ΠΈ Ρ„Π»Π°ΠΆΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ is() . Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ тСкстовоС ΠΏΠΎΠ»Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ show() . Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ скрываСт Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ

Ѐункция скрытия() .

Π’ΠΠšΠ–Π• Π§Π˜Π’ΠΠ™Π’Π•: ИспользованиС SVG с JavaScript? [Π£Ρ‡Π΅Π±Π½ΠΈΠΊ]

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ стрСлки, Π²Ρ‹ Π½Π΅ достигнСтС Π½Π°ΠΌΠ΅Ρ‡Π΅Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ этого ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова измСнится.

Это распространСнныС способы использования Ρ„Π»Π°ΠΆΠΊΠ° jQuery. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ jQuery ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.

Π Π΅ΠΊΠ»Π°ΠΌΠ°

Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм это прямо сСйчас.

Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3. ВмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ JavaScript

Π―Π·Ρ‹ΠΊ JavaScript развился Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ½ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ выполняСтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery. НапримСр, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ jQuery, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΈΠ»ΠΈ мСньшС строк ванильного ΠΊΠΎΠ΄Π° JavaScript.

 const ageCheckbox = document. getElementById('age_checked')
const ageInput = document.getElementById('age_textbox')
ageCheckbox.onchange = функция () {
    ageInput.hidden = this.checked ? false true
} 

Π‘Π΅Ρ€Π΅ΠΌ Ρ„Π»Π°ΠΆΠΎΠΊ ΠΈ тСкстовоС ΠΏΠΎΠ»Π΅. Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ ΡΠ»ΡƒΡˆΠ°Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ событиС Π½Π° Ρ„Π»Π°ΠΆΠΊΠ΅. Если Ρ„Π»Π°ΠΆΠΎΠΊ установлСн, ΠΌΡ‹ снимаСм Π΅Π³ΠΎ. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС провСряСм. ΠœΡ‹ достигаСм эффСкта ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Ρ€Π½Π°Ρ€Π½ΠΎΠ³ΠΎ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°.

 это.ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½ΠΎ ? false : true 

Β 

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ эффСкта Ρ„Π»Π°ΠΆΠΊΠ° jQuery, комбинируя нСсколько Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ jQuery. НСкоторыС ΠΈΠ· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ click() , toggle() , is() , hide() ΠΈ show() . Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² этом руководствС.

Β 

Β 

ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ JavaScript

НС нашли Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ искали? Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ быстрый поиск Π² GoLinuxCloud

. Π˜ΡΠΊΠ°Ρ‚ΡŒ:

Если ΠΌΠΎΠΈ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΎ GoLinuxCloud ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ Π²Π°ΠΌ, поТалуйста, ΠΊΡƒΠΏΠΈΡ‚Π΅ ΠΌΠ½Π΅ ΠΊΠΎΡ„Π΅ Π² Π·Π½Π°ΠΊ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Для Π»ΡŽΠ±Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ² ΠΈΠ»ΠΈ вопросов Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² ΠΈΠ»ΠΈ ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ со ΠΌΠ½ΠΎΠΉ Ρ‡Π΅Ρ€Π΅Π· Ρ„ΠΎΡ€ΠΌΡƒ.

Бпасибо Π·Π° Π²Π°ΡˆΡƒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ!

ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ | ΠšΠΈΠΏΠ°Ρ€ΠΈΡ ДокумСнтация

Cypress ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ популярноС ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ Chai Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для Π‘ΠΈΠ½ΠΎΠ½ ΠΈ jQuery, прСдоставляя Π²Π°ΠΌ дСсятки ΠΌΠΎΡ‰Π½Ρ‹Π΅ утвСрТдСния бСсплатно.

Chai

https://github.com/chaijs/chai

Π­Ρ‚ΠΈ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ доступны для ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ BDD ( ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚ / Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ). ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹ пСрСчислСнныС ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ взаимозамСняСмо с ΠΈΡ… ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ†Π΅ΠΏΠ½Ρ‹ΠΌ устройством. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список доступных ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ BDD Chai здСсь.

35 ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ .to.be.undefined 9025. )
expect([]).to.be.empty 922222222222222222222222222222222222222222222222222222222222222222222222222122222222Π½. Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: lte 0 90epObj) ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹ΠΉ .to.have.deep.property('tests[1]', 'e2e') . Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ({ΠΏΡ€ΠΎΠΉΠ΄Π΅Π½ΠΎ: 1, Π½Π΅ ΠΏΡ€ΠΎΠΉΠ΄Π΅Π½ΠΎ: 2}).to.have.keys('ΠΏΡ€ΠΎΠΉΠ΄Π΅Π½ΠΎ', 'Π½Π΅ ΠΏΡ€ΠΎΠΉΠ΄Π΅Π½ΠΎ') 59 . => num > 0)
expect(1).to.satisfy((num) => num > 0) 5 функция ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ(

5

ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅
Π¦Π΅ΠΏΠΎΡ‡ΠΊΠ° ΠŸΡ€ΠΈΠΌΠ΅Ρ€
НЕ . ЗасчитываСт ('Π½Π΅. deep .should('deep.equal', { name: 'Jane' })
expect(obj).to.deep. equal({ name: 'Jane' })
Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ .should('ΠΈΠΌΠ΅Ρ‚ΡŒ.Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅.свойство', 'ab[1]')
.should('nested.include', {'a.b[1]': 'y'})
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ({a: {b: 'x'}}).to.have.nested.property('a.b')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ({a: {b: 'x'}}). to.nested.include({'a.b': 'x'})
Π·Π°ΠΊΠ°Π·Π°Π½ΠΎ .should('have.ordered.members', [1, 2])
expect([ 1, 2]).to.ΠΈΠΌΠ΅Ρ‚ΡŒ.упорядочСнныС.Ρ‡Π»Π΅Π½Ρ‹([1, 2])
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ([1, 2]).Π½Π΅.ΠΈΠΌΠ΅Ρ‚ΡŒ.ΠΈΠΌΠ΅Ρ‚ΡŒ.упорядочСнныС.элСмСнты([2, 1])
любой .should('ΠΈΠΌΠ΅Ρ‚ΡŒ.Π»ΡŽΠ±Ρ‹Π΅.ΠΊΠ»ΡŽΡ‡ΠΈ', 'возраст')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(ΠΏΡ€ΠΈΠ±.).Π½Π°.ΠΈΠΌΠ΅Ρ‚ΡŒ.Π»ΡŽΠ±Ρ‹Π΅.ΠΊΠ»ΡŽΡ‡ΠΈ('возраст')
всСх ')
a( Ρ‚ΠΈΠΏ )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: an
.should('be.a', 'testto.a', 'string',

5 expect). .a('string')
include( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: содСрТат, Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚, содСрТит
. should('Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ', 2)
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ([1,2,3]).to.include(2)
ok .should('not.be.ok' ).
лоТь .should('be.false')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(лоТь).to.be.false
null .should('be.null')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(null).to.be.null
undefined .should('un.undefined')
БущСствуСт . Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ («сущСствуСт»)
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (myvar). Tot.to.exist
Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹
псСвдонимов: АргумСнты
. ΠžΠΆΠΈΠ΄Π°Π΅Ρ‚ΡΡ ('be.arguments')
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹). Ко. equals, eq
.should('equal', 42)
expect(42).to.equal(42)
deep. equal( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 90.212 90.024 6 ) deep.equal', {имя: 'Π”ΠΆΠ΅ΠΉΠ½'})
expect({имя: 'Π”ΠΆΠ΅ΠΉΠ½'}).to.deep.equal({имя: 'Π”ΠΆΠ΅ΠΉΠ½'})
EQL ( Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ )
ПсСвдоним: EQLS
. Should ('EQL', {name: 'Jane'} . .to.eql ({name: 'Jane'})
Greathan ( Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ )
ΠŸΠ›ΠžΠ₯А ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(10).to.be.greaterThan(5)
наимСньшСС( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: gte
( Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ )
ΠŸΡΠ΅Π²Π΄ΠΎΠ·Ρ‹: LT, Π½ΠΈΠΆΠ΅
. Π‘ΠΊΠΎΠ» ('be.lessthan', 10)
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (5). TO.Be.lessThan (10)
. should('ΠΈΠΌΠ΅Ρ‚ΡŒ.Π΄Π»ΠΈΠ½Ρƒ.наибольшСго', 4)
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ('тСст').ΠΈΠΌΠ΅Ρ‚ΡŒ.Π΄Π»ΠΈΠ½Ρƒ.Π½Π΅ Π±ΠΎΠ»Π΅Π΅(4)
Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ…( Π½Π°Ρ‡Π°Π»ΠΎ , ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ ) .Π΄ΠΎΠ»ΠΆΠ΅Π½('Π±Ρ‹Ρ‚ΡŒ.Π²Π½ΡƒΡ‚Ρ€ΠΈ , 5, 10)
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (7). Ко. .instanceOf', Array)
expect([1, 2, 3]).to.be.instanceOf(Array)
свойство( имя , [Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅] ) .should('ΠΈΠΌΠ΅Ρ‚ΡŒ.свойство', 'имя')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(ΠΎΠ±ΡŠΠ΅ΠΊΡ‚).to.have.property('имя')
deep.property( имя , [Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅] ) .should('have.deep.property', 'tests[1]', 'e2e')
ownProperty( имя )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: haveOwnProperty, own.property
name )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: haveOwnPropertyDescriptor
. should('have.ownPropertyDescriptor', 'a')
expect({a: 'own.1}).
lengthOf( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 9тСст/)
строка ( строка )
бросок( ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ )
ПсСвдоним: бросков, Π±Ρ€ΠΎΡΡŒ
. Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ (Β«Throw ', ошибка)
. )
ΠŸΡΠ΅Π²Π΄ΠΎΠ·Ρ‹: Repasssto
. Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ('repplyto', 'getName')
. ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (OBJ). ('itself.respondTo', 'getName')
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (foo) .itself.to.respondto ('bar')
Π£Π΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½ΠΈΠ΅ ( ΠœΠ΅Ρ‚ΠΎΠ΄ )
ΠŸΠ›ΠžΠ₯А: Π‘Π•Π Π’Π˜Π―
closeTo( ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹ΠΉ , delta )
Aliase 3s 4 ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ 70 30

. should('be.closeTo', 1, 0.5)
expect(1.5).to.be.closeTo(1, 0.5)
участников( set ) .should('include.members', [3, 2] expect('include.members', [3, 2])
5
([1, 2, 3]).to.include.members([3, 2])
oneOf( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ) .should('be.oneOf', [1, 2, 3])
expect(2).to.be.oneOf([1,2,3])
change( функция )
ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹: ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ
.should('change', obj, 'val')
expect(fn).to.change(obj, 'val')
ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅( function s 3 : ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ .should('ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅', obj, 'val')
expect(fn).to.increase(obj, 'val')
. should('ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅', obj, 'val')
expect(fn).to.decrease(obj, 'val')

Π­Ρ‚ΠΈ Π³Π΅Ρ‚Ρ‚Π΅Ρ€Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ доступны для ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ BDD. Они Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ английскиС прСдлоТСния.

Chainable getters
to , be , been , is , that , which , and , has , have , с , с , ΠΈΠ· , Ρ‚ΠΎΡ‚ ΠΆΠ΅

Chai-jQuery ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

Π’Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ послС использования ΠΊΠΎΠΌΠ°Π½Π΄ DOM, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ: cy.get() , cy.contains() ΠΈ Ρ‚.Β Π΄.0015 имя , [Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅] ) .should('have.attr', 'bar')
expect($el).to.have.attr('foo', 'bar') prop( name , [value] ) . should('have.prop', 'disabled', false)
expect($el('.have.prop) ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ', лоТь) css( имя , [Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅] ) .should('have.css', 'Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚', 'rgb(0, 0, 0)' )
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ($el).to.have.css('Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°', 'rgb(0, 0, 0)') Π΄Π°Π½Π½Ρ‹Π΅( имя , [Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅] ) .should('have.data', 'foo', 'bar')
expect($el).to.have.data('foo', 'bar') class( className ) .should('have.class', 'foo')
expect($el).to.have.class('foo') id( id

6) .should('have.id', 'foo')
expect($el).to.have.id('foo') html( html ) .should ('have.html', 'Π― люблю Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ')

expect($el).to.have.html('with Cypress') text( text ) . should( 'have.text', 'Π― люблю Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ)
expect($el).to.have.text('with Cypress') Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅( Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ) .should('have.value', '[emailΒ protected]')
expect($el).to.have.value('[emailΒ protected]') Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ .should('be.visible')
expect($el).to.be.visible hidden .should('be.hidden')
expect($el). Π±Ρ‹Ρ‚ΡŒ.скрытым Π²Ρ‹Π±Ρ€Π°Π½ΠΎ .слСдуСт('Π±Ρ‹Ρ‚ΡŒ.Π²Ρ‹Π±Ρ€Π°Π½ΠΎ')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ($option).Π½Π΅.Π±Ρ‹Ρ‚ΡŒ.Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΠ» . Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ('be.ceced')
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ ($ input). Not.to.be.ceced 165555551222122221222122212221222122212221.1222122212221222122219.122212221222122219. have.focus')
expect($input).not. to.be.focus
expect($input).to.have.focus enable .should('be. Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ($input).to.be.enabled ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ .should('be.disabled')
expect($input).to.be.disabled пустой .should(' 5 4) el).Π½Π΅.Π±Ρ‹Ρ‚ΡŒ.пустым сущСствуСт .should('сущСствуСт')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ($nonexistent).not.to.exist 5 selector66 ) .should('match', ':пусто')
expect($emptyEl).to.match(':пусто') БоблюдСниС ( ВСкст ) . Π‘ΠΊΠΎΠ» (Β«Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚Β», «ВСкст»)
. selector
) .should('ΠΈΠΌΠ΅Ρ‚ΡŒ.ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ²', 'div')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ($el).to.ΠΈΠΌΠ΅Ρ‚ΡŒ.ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ²('div')

Sinon-0Chai https://github.

com/domenic/sinon-chai

Π­Ρ‚ΠΈ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ с cy.stub() ΠΈ cy.spy() .

Бвойство Sinon.JS/ΠœΠ΅Ρ‚ΠΎΠ΄ Π£Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅
ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ . Sphould ('Have.been.been.called') 9.3333.3333923333333333333333333330.33333.33339.
callCount .should('have.callCount', 3)
expect(spy).to.have.callCount(n)
callOnce4 . CalledOnce')
ΠžΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ (SPY). Ко.
Π·Π²ΠΎΠ½ΠΈΠ»ΠΈ Ρ‚Ρ€ΠΈΠΆΠ΄Ρ‹ .should('have.been.callThrice')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(spy).to.be.callThrice
callBefore 9003 )
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(spy1).to.be.callBefore(spy2)
ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ AFTER . Π‘ΠžΠ‘Π‘Π’Π’Π•ΠΠΠž ('HASE.Been.Calledafter', SPY2)
. 'have.been.callWithNew')
expect(spy). to.be.callWithNew
alwaysCalledWithNew .to.always.be.callWithNew
callOn .should('have.been.callOn', контСкст)
expect(spy).to.be.callOn(context)
alwaysCalledOn2 .always.been.callOn', контСкст)
expect(spy).to.always.be.callOn(context)
callWith .should('have.been.callWith', [' arg1, 'arg2'])
expect(spy).to.be.callWith(...args)
alwaysCalledWith .should('have.always.been.callWith', ['arg1', 'arg2'])
expect(spy).to.always.be.callWith(... args)
callOnceWith )
callWithExactly .should('have.been.callWithExactly', ['arg1, 'arg2'])
expect(spy).to.be.callWithExactly(...args)
alwaysCalledWithExactly
expect(spy). to.always.be.callWithExactly(...args)
callOnceWithExactly .should('have.been.callOnceWithExactly', ['arg1, 'arg2'5'])
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(ΡˆΠΏΠΈΠΎΠ½ΠΈΡ‚ΡŒ).to.be.callOnceWithExactly(...args)
callWithMatch .should('всСгда.Π±Ρ‹Π».вызываСтсяWithMatch', ['arg1, 'arg2'])
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(шпион).Ρ‡Ρ‚ΠΎΠ±Ρ‹.всСгда.Π±Ρ‹Ρ‚ΡŒ.вызываСтсяWithMatch(...args)
Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΎ .should('have.returned', 'foo')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(spy).to.have.returned(returnVal)
ВсСгда ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ . Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ (Π΅ΡΡ‚ΡŒ. .should('have.thrown', TypeError)
expect(spy).to.have.thrown(errorObjOrErrorTypeStringOrNothing)
alwaysThrew .should('throw'n.always ')
ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ(spy).to.have.always.thrown(errorObjOrErrorTypeStringOrNothing)

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹Ρ… ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ chai , это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ. Cypress Π±ΡƒΠ΄Π΅Ρ‚ «просто Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒΒ» с Π½ΠΎΠ²Ρ‹ΠΌΠΈ утвСрТдСниями, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΊ chai . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅:

  • ΠΠ°ΠΏΠΈΡΠ°Ρ‚ΡŒ свои собствСнныС chai ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ здСсь.
  • npm установитС Π»ΡŽΠ±ΡƒΡŽ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ chai ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π΅ Π² тСстовый Ρ„Π°ΠΉΠ» ΠΈΠ»ΠΈ Ρ„Π°ΠΉΠ» ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ.

ΠžΠ±Ρ‰ΠΈΠ΅ утвСрТдСния

Π’ΠΎΡ‚ список ΠΎΠ±Ρ‰ΠΈΡ… ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ элСмСнтов. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ эти утвСрТдСния (пСрСчислСны Π²Ρ‹ΡˆΠ΅) с .слСдуСт() . Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Ρ…ΠΎΡ‚Π΅Ρ‚ΡŒ Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Cypress повторяСт ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ утвСрТдСния.

Π”Π»ΠΈΠ½Π°

 // повторяСм ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΠΌ 3 совпадСния  
cy.get('li.selected').should('have.length', 3)

Класс

 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° для этого Π²Π²ΠΎΠ΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ класс 
cy.get('form').find('input').should('not.have.class', 'disabled')

Value​

 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΠΎΠΊΠ° это тСкстовоС ΠΏΠΎΠ»Π΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 
cy. get('textarea').should('have.value', 'foo bar baz')

Text Content​

 // ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ тСкстовоС содСрТимоС элСмСнта Ρ‚ΠΎΡ‡Π½ΠΎ соотвСтствуСт Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡƒ тСксту 
cy.get('[data-testid="user-name"]').should('have.text', 'Joe Smith')
// ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ тСкст элСмСнта Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π·Π°Π΄Π°Π½Π½ΡƒΡŽ подстроку
cy.get('[data-testid="address"]').should('include.text', 'Atlanta')
// повторяСм Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° это span Π½Π΅ содСрТит 'Π½Π°ΠΆΠΌΠΈ Π½Π° мСня'
cy.get('a').parent('span.help').should('not.contain', 'наТми на мСня')
// тСкст элСмСнта Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с " ΠΏΡ€ΠΈΠ²Π΅Ρ‚" 9ΠŸΡ€ΠΈΠ²Π΅Ρ‚/)

Π’ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒβ€‹

 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ, ΠΏΠΎΠΊΠ° элСмСнт с 
// data-testid "form-submit" Π½Π΅ станСт Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ
cy.get('[data-testid="form-submit"]'). should('be.visible')
// ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° элСмСнт списка с
// тСкстом Β«Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ тСсты» Π½Π΅ станСт Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ
cy.contains('[data-testid="todo"] li', 'Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ тСсты') .should('be. visible')

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ссли имССтся нСсколько элСмСнтов, утвСрТдСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΈ Π½Π΅.Π±Ρ‹Ρ‚ΡŒ.Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Π°Ρ‡Π΅:

 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ, ΠΏΠΎΠΊΠ° ΠΠ•ΠšΠžΠ’ΠžΠ Π«Π• элСмСнты Π½Π΅ станут Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ 
cy.get('li').should('be.visible')
// ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ, ΠΏΠΎΠΊΠ° Π’Π‘Π• элСмСнты Π½Π΅ станут Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ
cy.get('li.hidden').should ('not.be.visible')

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ "НСсколько элСмСнтов ΠΈ ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ must('be.visible')" ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ элСмСнтов.

БущСствованиС

 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° счСтчик Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π½Π΅ пСрСстанСт ΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ 
cy.get('[data-testid="loading"]').should('not.exist')

БостояниС

 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½ΠΎ нашС Ρ€Π°Π΄ΠΈΠΎ .get('[data-testid="completed"]').should( 
'have.css',
'text-decoration',
'line-through'
)
 // ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ, ΠΏΠΎΠΊΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ css ΠΈΠΌΠ΅Π΅Ρ‚ свойство 
// "display: none"
cy. get('[data-testid="accordion"]').should('not.have.css', 'display', 'none')

ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠ΅ свойство​

  
 cy.get('[data-testid="example-input"]') 
.should( 'be.disabled')
// Π²ΠΊΠ»ΡŽΡ‡ΠΈΠΌ этот элСмСнт ΠΈΠ· тСста
.invoke('prop', 'disabled', false)

cy.get('[data-testid="example-input"]')
// ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠ΅Β» ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅
.should('be.enabled')
// ΠΈΠ»ΠΈ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Β«ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠ΅Β» ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅
.and('not.be.disabled')

ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ утвСрТдСния

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ утвСрТдСния. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ:

 cy.get('[data-testid="todo-item"]') 
.should('have.length', 2)
.and('have.class', 'completed ')

ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ утвСрТдСния ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Π΄ ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΡƒ "Π½Π΅". ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ:

 cy.contains('ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅').should('not.have. class', 'completed') 
cy.get('[data-testid="loading"]'). should('not.be.visible')
Π›ΠΎΠΆΠ½ΠΎΠ΅ ΠΏΡ€ΠΎΡ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ тСстов

ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ утвСрТдСния ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΏΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ. скаТСм, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Todo list добавляСт Π½ΠΎΠ²Ρ‹ΠΉ элСмСнт Todo послС Π²Π²ΠΎΠ΄Π° Todo ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π²Π²ΠΎΠ΄Π°.

ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ утвСрТдСния

ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ элСмСнта Π² список ΠΈ использовании ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния тСст ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ количСство элСмСнтов Todo Π² нашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ тСст ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½ΠΎ ΠΏΡ€ΠΎΠΉΠ΄Π΅Π½, Ссли ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Π΄Π΅Ρ‚ сСбя Π½Π΅ΠΏΡ€Π΅Π΄Π²ΠΈΠ΄Π΅Π½Π½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΡΡ‚ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ вмСсто добавлСния Π½ΠΎΠ²ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ с тСкстом Β«ΠΠ°ΠΏΠΈΡΠ°Ρ‚ΡŒ тСсты».

 cy.get('[data-testid="todos"]').should('have.length', 2) 
cy.get('[data-testid="new-todo"]').type ('Π—Π°ΠΏΠΈΡΡŒ тСстов{enter}')

// использованиС ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ
// Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ количСства элСмСнтов
cy. get('[data-testid="todos"]').should('have.length ', 3)

ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ утвСрТдСния

ΠΏΡ€ΠΎΠΉΡ‚ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Π΄Π΅Ρ‚ сСбя нСсколькими Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹ΠΌΠΈ способами:

  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ удаляСт вСсь список элСмСнтов Todo вмСсто вставки Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Π³ΠΎ Π—Π°Π΄Π°Ρ‡Π°
  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ удаляСт Π·Π°Π΄Π°Ρ‡Ρƒ вмСсто добавлСния Π½ΠΎΠ²ΠΎΠΉ
  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ добавляСт ΠΏΡƒΡΡ‚ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ
 cy.get('[data-testid="todos"]').should('have.length', 2) 
cy.get('[data-testid="new-todo"]').type('Π—Π°ΠΏΠΈΡΡŒ тСстов{enter}')

// использованиС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ
// Π½Π΅ количСство элСмСнтов
cy.get('[data-testid="todos"]').should('not.have.length', 2)

Π”ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π²Ρ‹Π·ΠΎΠ²

Если встроСнных ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ нСдостаточно, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ утвСрТдСния ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°ΠΉΡ‚Π΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π²Ρ‹Π·ΠΎΠ² ΠΊΠΎΠΌΠ°Π½Π΄Π΅ .should() . ΠšΠΈΠΏΠ°Ρ€ΠΈΡ автоматичСски повторяйтС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΎΠ½Π° ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠ»ΠΈ врСмя оТидания ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ истСкло. Π‘ΠΌ. .should() докумСнтация.

 
Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

 cy.get('div').should(($div) => { 
expect($div).to.have.length(1)

const className = $div[0].className

// className Π±ΡƒΠ΄Π΅Ρ‚ строкой Ρ‚ΠΈΠΏΠ° "main-abc123 heading-xyz987"
expect(className).to.match(/heading-/)
})

НСсколько ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ нСсколько ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΉ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Π΅.

  data-testid="assertions-link" 
class="active"
href="https://on.cypress.io"
target="_blank"
>
Cypress Docs

 cy.get('[data-testid="assertions-link"]') 
.should('have.class', 'active')
.and('have.attr', 'href')
.and('include', 'cypress.io')

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ всС связанныС утвСрТдСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ ссылку Π½Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π» ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚. НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появляСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π° Π·Π°Ρ‚Π΅ΠΌ исчСзаСт, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ НЕ Π‘Π£Π”Π•Π’ Π ΠΠ‘ΠžΠ’ΠΠ’Π¬, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΡ‚ ΠΆΠ΅ элСмСнт Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ ΠΈ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ:

 // ⛔️ НЕ Π ΠΠ‘ΠžΠ’ΠΠ•Π’ 
cy.