Cypress ile Test Yazmak için ideal VS Code Eklentileri(Extensions)

Miktad Öztürk
2 min readNov 28, 2022

Bu yazımda sizlere Cypress testlerinizi yazarken VS Code’da işinizi çok kolaylaştıracak bazı eklentilerden bahsedeceğim. Bunları yükleyerek sizde daha hızlı ve eklenti önerileriyle kolayca testlerinizi yazabilirsiniz.

1. Cypress Fixture-IntelliSense

Bu eklenti ile cypress.json dosyalarını, fixturesFolderözelliğini kullanarak bunları okuyup ayrıştırır ve bu dizindeki tüm dosyaları görebilmenizi sağlar.
Kodunuzda bir yere cy.fixture("")yazarsanız ve bir kod önerisini tetiklerseniz (Windows’ta CTRL+Space), uzantı, o anda girilen metinle eşleşen tüm fikstür dosyalarını önerir.

Source: https://marketplace.visualstudio.com/items?itemName=JosefBiehler.cypress-fixture-intellisense

2. ES6 Mocha Snippets

Bu eklenti aslında size kaç test yazdığınıza bağlı olarak bir kaç dakika kazandırabilir. Bu eklenti ile, bir hızlı describe() veya it() bloğu oluşturabilirsiniz. Ayrıca yeni adlar öğrenmenize gerek kalmayacak şekilde bellek kolaylığı için Mocha işlev adlarını kullanır.

3. Add .only

Add .only uzantısı tam olarak cypress test yazanların anlayacağı üzere it() bloğunuza .only anahtar sözcüğünü ekleyerek testinizi filtreler. Ayrıca ekledikten sonra remove only seçeneği ile hızlıca kaldırabilirsiniz. Yazmaktansa tıklayarak buradan zaman kazanmanız mümkün.😃

Source: https://marketplace.visualstudio.com/items?itemName=ub1que.add-only

4. VSCode-icons

Klasörlerinizi düzenli tutmak için farklı klasörler adına farklı simgeler atanır. Cypress ile ilgili dosya ve klasörler, onları daha kolay bulabilmeniz için küçük bir Cypress simgesi alır.

Source: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

5. Bracket pair colorizer

Tüm farklı kod bloklarıyla, tüm köşeli parantezlerde kaybolmak kolaydır, hatta bazen hangi köşeli yada süslü parantezin…