Alıştırma: Visual Studio Code'da Playwright kullanma
Önceki bölümde Playwright Test Yapılandırması ve Playwright Test Belirtimi ile ilgili temel kavramlar üzerinden geçtik, ancak testlerimizi yürütmek ve raporları görüntülemek için Playwright Komut Satırı'nı (CLI) kullandık.
Visual Studio Code ortamımızda bunu yapabilirsek ve testlerimizde yazma, çalıştırma ve hata ayıklama için daha fazla görsel etkileşim işlemi gerçekleştirebilirsek ne olur?
Visual Studio Code Uzantısı için Playwright Testi ile üstün bir geliştirici deneyimine ve Playwright Test çalıştırıcısıyla etkileşimde bulunmak için tercih ettiğiniz yöntem haline getirebilecek bazı benzersiz araç özelliklerine sahip olursunuz. Hadi atlayalım ve tura çıkalım.
Başlangıç Yapmak
Playwright belgelerinde, kendi zamanlarınızda izlemenizi önerdiğimiz video kılavuzunu içeren kapsamlı bir öğretici vardır. Bu derste, kullanımı öğrenmenizi sağlamak için bu alıştırmaların bir alt kümesini gözden geçirmeye çalışacağız.
]
Playwright uzantısını yükleme
Visual Studio Code Market'ten uzantıyı yükleyin. Yüklendikten sonra, ekran görüntüsünde gösterildiği gibi Visual Studio Code pencerenizin sol tarafında bir beher simgesi görmelisiniz. Uzantının projenizdeki test belirtimlerini otomatik olarak nasıl algılayıp topladığına dikkat edin.
Başsız test çalıştır
Testleri başsız bir şekilde (tarayıcı penceresi olmadan) çalıştırmak için Tarayıcıyı göster ve İzleme görüntüleyicisi seçeneklerini göster seçeneklerinin işaretlenmediğinden emin olun. İlk testi çalıştırmak için example.spec.ts dosyasının 3. satırındaki yeşil oynat düğmesini seçin. Dosyadaki tüm testleri çalıştırmak veya belirli bir testi çalıştırmak için Test Gezgini kenar çubuğundaki gri yürütme düğmelerini de seçebilirsiniz.
Testlerinizi çalıştırdıktan sonra Test Sonuçları sekmesi, test yürütme geçmişinin tamamını görebileceğiniz bir pencere açar. Ayrıca bir testte detaya gidebilir ve Testi çalıştır'ı seçerek bu testi yeniden çalıştırabilirsiniz.
Tarayıcıyı göster (başlı)
Bir tarayıcı penceresi açıkken testlerinizi çalıştırmak anlamına gelen baş modunda çalıştırmak istiyorsanız, testleri çalıştırmadan önce Tarayıcıyı göster kutusunu işaretleyebilirsiniz.
Playwright çok hızlı bir kullanıcıdır, bu da Show browser kullanırken testte neler olduğunu izlemeyi zorlaştırabilir. Hata ayıklama için İzleme görüntüleyicisini göster seçeneğini kullanmanızı öneririz.
İzleme görüntüleyicisini göster (başlı)
İzleme görüntüleyicisini göster kutusunu işaretleyin ve ikinci test için yeşil oynat düğmesini seçin. Bu, test yürütmesinin görsel bir gösterimini gösteren izleme görüntüleyicisi penceresini başlatır.
En üstte, tarayıcının durumunu görmek için üzerine gelebileceğiniz testin bir zaman çizelgesini görürsünüz. Odaklanacak belirli bir zaman aralığını seçmek için zaman çizelgesini seçin ve sürükleyin.
Sol kenar çubuğunda, test yürütmesi sırasında gerçekleştirilen eylemleri görebilirsiniz. locator.click eylemini seçerseniz, DOM anlık görüntüsündeki Başlarken düğmesinde kırmızı bir nokta görürsünüz.
Ardından expect.toBeVisible onayını seçtiğinizde DOM anlık görüntümüzün değiştirildiğini ve onayladığımız başlıkta vurgunun yer alan Yükleme sayfasını göstereceğini göreceksiniz. DOM anlık görüntüsünün üzerinde, eylemin gerçekleştirilmeden önce ve sonra durumunu görmek için Önce ve Sonra düğmelerini seçebilirsiniz.
Sağ üst köşedeki açılır simgeyi seçerek DOM anlık görüntüsünü ayrı bir pencereye açabilirsiniz . Testinizde hata ayıklarken DOM'yi incelemek istediğinizde yararlı olabilir.
Hata ayıklamadan bahsetmişken, alt paneldeki Bulucu Seç düğmesini seçerek DOM anlık görüntüsünden bir bulucu da seçebilirsiniz. Ardından, DOM anlık görüntüsündeki öğelerin üzerine gelerek o öğenin bulucusunu görebilirsiniz. Bir öğe seçildiğinde, öğeyi izleme görüntüleyicisinin alt kısmındaki Bulucu kutusuna ekler ve panonuza kopyalamadan önce bu öğeyi düzenleyebilirsiniz.
Arama ,Konsol, Ağ ve Kaynak sekmeleri gibi izleme görüntüleyicisinin diğer özelliklerini kendiniz keşfedebilirsiniz.
Testlerde hata ayıklama
Hata ayıklama için, neler olduğunu daha iyi anlamak için testlerinizi İzleme görüntüleyicisini göster seçeneğiyle çalıştırmanızı ve testinizin izlemesini kullanmanızı öneririz.
Ancak, Visual Studio Code uzantısıyla doğrudan Visual Studio Code'da testlerinizin hatalarını ayıklayabilir, hata iletilerine göz atabilir, kesme noktaları oluşturabilir ve testlerinizin hatalarını canlı olarak ayıklayabilirsiniz. Hata ayıklama desteği hakkında bilgi edinmek için belgelerden daha fazla bilgi edinin veya aşağıdaki videoyu izleyin.
Test oluşturma
CodeGen , siz tarayıcıda eylemler gerçekleştirirken testlerinizi sizin için oluşturur ve karmaşık iş akışları için test yazmaya başlamanın en basit yoludur.
Test oluşturmak için Visual Studio Code'daki test kenar çubuğundaKi Yeni kaydet düğmesini seçin. Bu, kaydedilecek ve teste dönüştürülecek eylemleri gerçekleştirebileceğiniz bir tarayıcı penceresi açar. Ayrıca, oluşturulan testle klasörde yeni bir dosyanın tests oluşturulduğunu da fark edeceksiniz.
Tarayıcı penceresine bir URL yazın ve kullanıcının yapacağı gibi eylemler gerçekleştirmeye başlayın. Eylemlerin VS Code'daki test dosyasında kaydedildiğini görürsünüz.
Playwright web sitesine gidip Başlarken düğmesini seçerek daha önce çalıştırdığımız basit testi yeniden oluşturalım. Daha sonra Codegen araç çubuğundan Onay Görünürlüğü simgesini seçip Yükleme başlığını seçerek görünür olduğunu onaylayabiliriz.
Aşağıdaki videoda test oluşturma hakkında daha fazla bilgi edinin.
Sonraki Adımlar
Bu bölümde, testleri bulmak ve çalıştırmak için Visual Studio Code uzantısını kullanmayı ve hata ayıklama testlerine yönelik daha görsel bir deneyim elde etmek için izleme görüntüleyicisiyle çalışmayı öğrendiniz.
Ayrıca Visual Studio Code'un Yeni Test Kaydet, Bulucu Seç ve İmleçte Kaydet özelliklerini kullanarak test oluşturmak için nasıl daha zengin araçlar sağladığını da öğrendiniz. Şimdi örnek uygulamamız için uçtan uca test belirtimi oluşturmak üzere kılavuzlu bir projede Playwright Fundamentals öğrenmelerinizi uygulama zamanı geldi.