Cypress ile uçtan uca test
Bu yazıda Cypress ve tarayıcıdaki testi sonuna kadar nasıl basitleştireceğimizi tartışacağız. Sitenizdeki herhangi bir ‘kritik yolu’ test etmek için Cypress’i kullanabilirsiniz. Bu, satış kanalınızın Push kodundan sonra hala çalışmasını sağlamak gibi eylemler şeklinde olabilir veya iletişim formu doğru şekilde gönderilmiştir. Genellikle elle test ederseniz edin, Cypress ile otomatikleştirebilirsiniz! Neden selvi? Cypress, uçtan uca testi basitleştirmeyi amaçlayan yeni bir test koşucusudur. Cypress’ten önce, hangi test kütüphanesinin kullanılacağını (mocha, karma, jest) bulmalısınız, Selenium’u yüklemeli, kütüphane ifadesini seçin, yapay kütüphane seçin, akıl kaybı ve ardından testinizi yazmalısınız. Cypress ile adımlar: Cypress’i takın -> Testi yazın.
Cypress, piyasaya sürülen tüm test öğelerine sahiptir, böylece gerçekten girip testlere başlayabilirsiniz. Gerçekleşmek güzel mi? Bu değil! Cypress web sitesinde yazıldığı gibi başlayın, projenize CD’si ve çalıştırın: NPM Yükleme Cypress tamamlandıktan sonra, klasör ./Cypress projenizde oluşturulacaktır. Orada, bazı alt kozalaklar yapılacak. Testleri yazmak için en önemli şey klasör /entegrasyondur, çünkü testi yazdığımız yer burasıdır. Cypress birçok test örneği ile birlikte gelir, ancak baştan beri kendiniz yapmak çok zor değildir. Klasörde ./Cypress/Inegrasyon, ne yaptığınız javaScript dosyası Cypress Runners tarafından alınacaktır. İlk testimizi yazabilmemiz için burada yeni bir JavaScript dosyası oluşturacağız. Cypress belgeleri bunun iyi bir resmini sunar, ancak proje veya WordPress eklentisinin nasıl test edileceğini görmek daha iyi olur. Yapmamız gereken ilk yazma testi ‘tarif edilen’ bir blok hazırlamaktır. Bu temelde Cypress’in bunun bir test olduğunu ve testi adlandırdığını söyler. (‘Bir çekme çalıştır’, function () {// …} mocha gibi, Cypress bir ‘önceden temin’ işlevi sağlar. Bu, her testin çalıştırılmadan önce çalıştırmak istediğiniz şeyleri koymak için çok yararlı bir yerdir. WP Migrate DB Pro, WordPress’i girmek ve WP-Admin’de WP Migrate DB Pro sayfasını açmak istiyorum.
const baseurl = cypress.env (“site”) .url;Öncesi (function () {cy.visit (baseurl + ‘/wp-login.php’); cy.wait (1000); cy.get (‘#user_login’). Type (cypress.env (“wp_user”); cy.get (‘#user_pass’). type (cypress.env (“wp_pass”)); cy.get (‘#wp-submit’). Click ();});Yan not: UI aracılığıyla girmek ‘anti-desen’ selvidir, ancak başarılıdır.Cypress.Env deyimi (…), proje köküne yerleştirilen cypress.json dosyasından veri çeker.Bu, Cypress ile çevresel değişkenleri depolamanın birkaç yolundan biridir.
Cypress.json şuna benziyor: {“env”: {“wp_user”: “admin”, “wp_pass”: “gizli”, “site1”: {“url”: “http:” http: “http:”, ” Yol “:” ~/Sites/CypressStests.Devtest “,” Remote_Connection “:” https: //anothercyprestest.devtest
7bpxn3s6qihnejga4o6qlzj1mvcmuokt9zhoezqc “},” site2 “: {” url “:” http: “http:” http: “~/local \ siteler/testler/app”
68HQT30JPR9D9X/IH+XATRW8Q2E7ZKZ+D19BQLO “},” Plugins_to_migrate “: [” Ithemes senkronizasyonları “,” Monsterinsights tarafından WordPress için Google Analytics “,” Hello Dolly “,” Themes_to_to -IS işlevi göreceksiniz: CY nesnelerini kullanın. Cypress bu nesneyi Cypress Runners ile etkileşime girecek ve tüm test işlevlerine erişebilecek şekilde ortaya çıkarır. Yukarıdaki kod oldukça kolaydır, URL’yi yüklemek için Cy.visit () kullanırız, sayfa yüklü sayfaya 1 saniye bekleyin, sonra yazın Giriş kimlik.
Cy.get () JQuery veya Document.querySector () seçmeye benzer ve DOM öğesine referans almak için kullanırız. Oradan cy.type () veya cy.click () kullanarak elemanları manipüle edebiliriz. Cypress API belgesinde tüm etkileşim yöntemlerinin tam bir listesi bulunabilir. ‘Açıklama’ bloğunda, testinizin farklı bölümlerini açıklamak için Mocha IT () stil ifadesini kullanabilirsiniz. It (‘Bir Çekme Çalışabilir’, Function () {// ..} Benim durumumda, testimin WordPress’in yapabileceği diğer her şeyi yapıp yapamayacağını gerçekten umursamıyorum (girin, WP Migrate DB Pro sayfasını aç , vb.), Test etmek istediğim şey, çekimi çalıştırıp çalıştıramayacağıdır. Testin kendisi için BT bloğuna () bazı kodlar ekleyeceğiz: IT (‘Çekme çalıştırabilir’, function () {cy. Visit (BaseUrl + ‘/ WP-Admin/ Tools.php? Page = WP-Migrate-DB-Pro & WPMDB-Profile = -1’); Cy.get (‘#pull’). Click (); Cy.get (‘.pull-push-connection -info’) .type (cypress.env (“site2”) .remote_connection); cy.get (‘.connect-button’). click (); cy.wait (2000); //… Daha fazla test kodu // Geçir düğmesini tıklayın Cy.get (‘.migrate-db-button’) .Click ();}); Yukarıdaki testte yeni bir URL (/wp-admin açacağız /tools.php?page=wp- Migrate-db-Pro & WPMDB-Profile = -1) WP Migrate DB Pro’nun yeni profil sayfasını yüklemek için ve ‘Çekme’ Türü türünü seçen #Pull seçmenlerini tıklıyoruz .
Daha sonra Cypress’e bazı bağlantı bilgileri yazmasını, Connect’e basın ve iki saniye beklemesini söyleriz. Bundan sonra geçiş başlatmak için ‘çekme’ düğmesine bastık. Şimdi tam testimiz şöyle görünecek: açıklayın (‘bir çekme çalıştır’, function () {const baseurl = cypress.env (“site”). Url; öncü (function () {cy.visit (baseurl + ‘/wp -login.php ‘); cy.wait (1000); cy.get (‘ #user_login ‘). type (cypress.env (“wp_user”)); cy.get (‘ #user_pass ‘) .type (Cypress. env (“wp_pass”)); cy.get (‘#wp-submit’) .click ();}); it (‘bir çekme çalıştırabilir’, function () {cy.visit (baseurl + ‘/wp- -admin/tools.php? Page = wp-migrate-db-pro & wpmdb-profile = -1 ‘); cy.get (‘ #pull ‘) .Click (); cy.get (‘ .pull-push- bağlantı -info ‘) .type (cypress.env (“site2”) .remote_connection); cy.get (‘ .connect -button ‘). click (); cy.wait (2000); //… Kod // Cy.get (‘.migrate-db-button’) .click ();});}) taşıma düğmesini tıklayın; Cypress’in en iyi yanı, hiçbir şeyi vurgulamanıza gerek olmamasıdır. Bir JavaScript hatası veya hiçbir öğe durumunda Cypress başarısız olur. Elemanların var olduğunu vurgulayabilir ve beklenen durumun bir karşılaştırmasını yapabilirsiniz, ancak bu gerekli değildir. Testi şimdiye kadar çalıştırmak kodu araştırdık ve Cypress tarafından sağlanan mucizeler görmedik. Bu testi gerçekten çalıştırdığımızda ne olacağını görelim. Terminalimize dönerek, projemizin kökünde NPX Selvimi’ni açık olarak çalıştıracağız. Cypress uygulaması açılacak ve şöyle bir şey göreceksiniz:
Ne!Bu doğrudur, Cypress ile test çerçevenizle UI alırsınız!Zihin patladı.Cypress uygulamasında, çalıştırmak için ayrı testleri tıklayabilir veya ‘Tüm Özellikleri Çalıştır’ı tıklayabilirsiniz.Benim durumumda, MDB_PULL_SPEC.js gerilme testini adlandırdım, böylece üzerine tıklayıp çalıştıracağız.https: //cdn.deliciousbrains.com/content/uploads/2018/09/2809549/5gyh3vvfjv.mp4
CLI yeterli görünmüyor, Cypress’in testiniz için varsayılan bir CLI koşucusu var. Düğmeyi tıklamak veya hatta çalışan testini görmek istemiyor musunuz? Sadece NPX CELPPİYA RUNCU Proje Kökünüzde Çalıştır: Komut satırında Cypress Çalıştırma ayrıca testten video (!) Kaydeder, böylece test başarısız olursa/zaman daha kolay hata ayıklama yapabilirsiniz. Bir CLI Runner ile Cypress’i CI iş akışınıza bağlayabilir ve kodunuzu her girdiğinizde çalıştırabilirsiniz. Bu uyarının hepsi çok iyi görünüyor ama Cypress hakkında sinir bozucu olan Pete?! Birincisi, Cypress gerçek tarayıcı etkileşimini iyi idare etmez. WP Migrate DB’nin dışa aktarma işlevi için bir test yazmaya çalışırken bunu fark ettim. Dışa aktarma dosyası oluşturulduğunda, tarayıcı bir indirme ister. Cypress’in bu tarayıcı iletişim kutusuyla etkileşime girmenin bir yolu yoktur, bu nedenle uygulamanızın dosya seçmenleri kullanıp kullanmadığını veya tarayıcı etkileşimlerine bağlı olarak hatırlanması gereken bir şeydir. Bir Test Runner Her Şeyi Yönetmek İçin Gerçekten Cypress Geliştiricisine bir ipucu vermek zorundayım, bu çok harika bir deneme ve benim için eski uygulamanın sonuna eklemeyi çok kolaylaştırıyor. Ayrıca sadece Cypress’in neler yapabileceğini kısaca tartıştım, tartışmadığım CI entegrasyonu, isteği ve ağ değişkenlerini kapatın ve eşzamansız kodu ele aldım!
