Cypress: Testi sona çatdırmaq üçün Cypress ilə necə başlamaq lazımdır.

Cypress nədir

Cypress, bəzi qaynaqlanmış alətlərin üstündə oturan açıq mənbəli JavaScript sonu-sonu test çərçivəsidir.

  1. Bir xüsusiyyət zəngin JavaScript test çərçivəsi olan Mocha.
  2. Chai, bir BDD / TDD təsdiq kitabxanası.

Cypress Brian Mann tərəfindən yaradılan bir son nöqtədir. TestCafe'yə bənzərdir, Selen'dən heç bir asılılığı olmayan Node'un üstündə qurulmuşdur və JavaScript'i dəstəkləyən müstəqil bir sınaq çərçivəsidir. TestCafe-dən fərqli olaraq, istifadə edilən təsdiq kitabxanaları, ən çox inkişaf etdiricilərin işləməsi üçün istifadə olunanlar idi: təsvir () və bu () bloklardan istifadə edərək hazırkı təsdiq kitabxanalarımızın quruluşu ilə yaxşı özünü təmin edən Mocha və Chai. sərvdə olan xüsusiyyətlər:

  1. Çatdırmaq asandır: inteqrasiya testlərini həll etmək ağrılı ola bilər, ancaq Cypress-də deyil. Başsız və ya başsız vəziyyətdə testlərin aparılmasından asılı olmayaraq, kodun CLI (başsız) və ya Chrome DevTools (başsız) çıxışı ilə həll edilməsi asandır.
  2. Vaxt Səyahət: Cypress testləriniz bitdiyində anlar çəkir. Hər addımda tam olaraq nə baş verdiyini görmək üçün əmrlər jurnalındakı əmrləri aparın.
  3. Debug qabiliyyəti: Testlərinizin niyə uğursuz olduğunu təxmin etməyi dayandırın. Geliştirici Alətlər kimi tanış vasitələrdən birbaşa düzəliş edin. Oxunan səhvlərimiz və yığma izlərimiz ildırım sürətləndirir.
  4. Avtomatik gözləmə: Testlərinizə heç vaxt gözləmə və ya yuxu əlavə etməyin. Cypress avtomatik olaraq hərəkət etmədən əvvəl əmrlər və təsdiqləmələri avtomatik olaraq gözləyir. Daha sinxron cəhənnəm yoxdur.
  5. Ardıcıl nəticələr: Arxitekturamız Selenium və ya Veb Sürücü istifadə etmir. Yağsız sürətli, ardıcıl və etibarlı testlərə salam verin.
  6. Ekran görüntüləri və videolar: Uğursuzluqdan avtomatik olaraq alınan ekran görüntülərini və ya CLI-dən işləyərkən bütün test paketinizin videolarına baxın.
  7. İndi Cypress Version 4 Mozilla Firefox və Edge brauzerini dəstəkləyir.

Cypress-in bir neçə çatışmazlığı var:

1. Heç vaxt birdən çox brauzer nümunəsini dəstəkləməyin. Əsasən Chrome, Elektron brauzerini dəstəkləyir.

2. Doğma brauzer hadisələri dəstəklənmir: Hal-hazırda, yerli yükləmə hadisələri fayl yükləmələrini özündə birləşdirən Cypress-də dəstəklənmir. Bu, fayl yükləmələrini düzgün sınaqdan keçirə bilməyimizə təsir göstərir

Test üsulları

Birdən çox test üsulu var:

  1. Vahid sınağı kod vahidlərinin gözlənildiyi kimi işlədiyini yoxlayır.
  2. İnteqrasiya testi kodun müxtəlif hissələrinin bir API və verilənlər bazası kimi birlikdə işlədiyini təsdiqləyir.
  3. End-to-End (E2E) testi istifadəçi davranışını simulyasiya edərək sistemin bütün hissələrini yoxlayır. Başdan sonuna bir metod və ya bir xidmət alaraq və tam bir funksional həll təqdim edən bir prosesi təsvir edir.

Cypress Quraşdırma.

1. Node yükləyin. (https://nodejs.org/az/download/)

2. Ətraf dəyişənində Node Home seçin.

3. Baza sərvü işləyən qovluq yaradın.

4. Visual Studio Kod Redaktorunu yükləyin. (Https://code.visualstudio.com/download)

5. Package.json-u yaradın ("$ npm sərv edin - qazanc-dev" əmri ilə proqramı quraşdırın)

6. sərv asılılıqlarını yükləyin. (npm i sərv -D)

7. Cypress Test Runner'i başladın (node_modules \ .bin \ cypress açıq).

Cypress qurğusu haqqında daha çox məlumat görmək üçün url vurun - https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements

Qovluqlar

Yeni bir layihə əlavə etdiyiniz və Cypress-i ilk dəfə işə saldığınız zaman təklif olunan bir qovluq quruluşunu islah edir:

1. Qurğular, testlərinizdən istifadə edilə bilən xarici statik məlumatlardır. Onları adətən cy.fixture () əmri ilə və ən çox Şəbəkə Tələbini ləkələyərkən istifadə edərdiniz.

2. Test sənədləri, öyüd-nəsihətdə cypress / inteqrasiya içərisində. Cypress-də istifadə olunan hər bir əmr nümunəsini görmək üçün inteqrasiya qovluğunuzdakı nümunə qovluğunu açın.

3. Plugin faylları, Cypress'in daxili davranışlarına daxil olmağa, dəyişdirməyə və ya genişləndirməyə imkan verir. Varsayılan olaraq, Cypress, işlədiyi hər bir xüsusi fayldan əvvəl pluginlər faylını cypress / plugins / index.js daxil edir.

4. Dəstək faylları, Xüsusi əmrlər və ya tətbiq olunmaq istədiyiniz və bütün xüsusi fayllarınıza mövcud olmaq istədiyiniz qlobal ləğv kimi təkrar istifadə edilə bilən bir davranış qoymaq üçün əla bir yerdir.

Bu yazıda, Cypress'i cəbhənizin sonu ilə sınaqdan keçirtmək üçün necə istifadə edəcəyimi göstərir. Bir istifadəçiyə giriş kimi istifadəçi davranışını təqlid edən test hallarını yazıram.

İlk sınaq

Cypress testində ilk addım brauzerdə tətbiqin bir səhifəsinə daxil olmaqdır.

Integrasiya qovluğunda Login.js faylını yaradın. Cypress Test Runner'i İnteqrasiya Testləri siyahısında göstərməli və yalnız tıkladığımız və çalışdığımız hər hansı bir testi görməliyik. Seçdiyimiz brauzeri açacaq (Chrome, Electron).

Giriş səhifəsinə daxil olan ilk testi əlavə edək. Bütün Cypress API qlobal cy obyekti altında mövcuddur. URL'ə daxil olmaq üçün cy.visit (url) istifadə edə bilərik.

Cypress, Mocha'nın BDD sintaksisini qəbul etdi, bu da testlərin mütəşəkkil olmasını və oxumağın asan olmasını təmin edir. Burada biz təsvir () və bu () istifadə edirik.

düzgün səhifəyə yönləndirildiyimizdən əmin olun. Bir element seçmək üçün cy.get ('CSS Locator') əmrindən istifadə edirik. Lokator dəyərində yalnız CSS dəyərləri üzərində işləyir. X-yol kimi hər hansı digər yerləşdirmə növünü təmin edə bilərik.

Test işinizi işlədərkən Chrome brauzerində belə görünür. Yazdıqlarımızı avtomatik olaraq hər bir test işini bir-bir icra edin.

əldə etdiyimiz gözlənilən dəyərin düzgün və ya düzgün olmadığını yoxlamaq üçün test qaçışına əlavə edilmiş bir təsdiq görə bilərik.

Test sınağı keçəndə yaşıl siqnalları göstərir. Testi icra etməyə nə qədər vaxt lazım olduğunu göstərir.

Hər hansı bir sınaq işi uğursuz olduqda, icra etdiyimiz sınaq işindəki qırmızı xaç işarəsini göstərir.

Cypress burada bizə kömək edir və kodumuza baxmağa belə ehtiyac duymuruq. Brauzer pəncərələrinin yuxarı sol küncündəki krossover simgesini basaraq Selector oyun meydançasını aça bilərik.

Komponenti tıkladığımız zaman üst barda lazım olan kodu görürük. Biri olan mavi nişan bu element üçün yalnız bir uyğunluq olduğunu göstərir. Birdən çox varsa, onu CSS-də unikal bir şəkildə təyin etməliyik. Budur, bu görüntüdə bənzərsiz və tək elementlər olan elementlər göstərilir.

Cypress tablosu, testi yazmaq imkanı verən bir xidmətdir. İdarəetmə paneli, sınağınız qaçanda nə baş verdiyini təmin edir. Tablosunda aşağıdakı şeyi edə bilərsiniz:

  1. Keçmiş, Uğursuz, Atlandı və gözləyən testi görmək.
  2. Test işi uğursuz olduqda ekran görüntüsünə baxın.
  3. Uğursuz sınaqların bütün iz izlərini alın.
  4. Sınaq hallarınızın videosunu işləyərkən yazın.
  5. Müvafiq test qruplarına baxın.
  6. Yazılan test məlumatlarınıza kimin girdiyini idarə edin

Bu, sərv tablosuna daha çox xüsusiyyət ödəməli olduğunuz standart olaraq verilən bir xüsusiyyətdir. Bu işləri sərv tablosunda etmək üçün sərv tablosuna yazılmaq lazımdır.

İstifadəçilər Cypress.json konfiqurasiya faylını cypress.json-da layihənin tələbinə uyğun olaraq düzəldə bilər və saxlaya bilər.

Nəticə

Cypress kimi bir vasitə ilə test avtomatlaşdırılması daha sadə və əyləncəli hala gəlir. JavaScript-də yazılı testləriniz varsa, onda Cypress artıq tanışdır.