Chrome Geliştirici Araçları Kaydedici panelinin bu kapsamlı özellik referansında kullanıcı akışlarını paylaşmanın, düzenlemenin ve adımlarını keşfetmenin yollarını keşfedin.
Kaydedici paneliyle çalışmanın temellerini öğrenmek için Kullanıcı akışlarını kaydetme, tekrar oynatma ve ölçme başlıklı makaleyi inceleyin.
Kısayolları öğrenin ve özelleştirin
Kaydedici'de daha hızlı gezinmek için kısayolları kullanın. Varsayılan kısayolların listesi için Kaydedici paneli klavye kısayolları başlıklı makaleyi inceleyin.
Tüm kısayolların listelendiği bir ipucunu doğrudan Kaydedici'de açmak için sağ üst köşedeki yardım Kısayolları göster'i tıklayın.
Kaydedici kısayollarını özelleştirmek için:
Ayarlar'ı açın > Kısayollar.
- Kaydedici bölümüne ilerleyin.
- Kısayolları özelleştirme başlıklı makaledeki adımları uygulayın.
Kullanıcı işlemleri akışlarını düzenleme
Kaydedici panelinin üst kısmında şunları yapabilirsiniz:
- Yeni kayıt ekle
. Yeni kayıt eklemek için + simgesini tıklayın.
- Tüm kayıtları göster
. Açılır liste, kaydedilen kayıtların listesini gösterir. Kaydedilen kayıtların listesini genişletip yönetmek için [sayı] kayıt seçeneğini belirleyin.
Bir kaydı dışa aktarma
. Komut dosyasını daha da özelleştirmek veya hata raporlama amacıyla paylaşmak için kullanıcı akışını aşağıdaki biçimlerden birinde dışa aktarabilirsiniz:
- JSON dosyası.
- @puppeteer/replay komut dosyasını kullanın.
- Puppeteer komut dosyası.
- Puppeteer (Lighthouse analizi dahil).
Biçimler hakkında daha fazla bilgi edinmek için Kullanıcı akışını dışa aktarma başlıklı makaleyi inceleyin.
Kaydı içe aktarın
. Yalnızca JSON biçiminde.
Kayıt silme
. Seçili kaydı silin.
Ayrıca, kaydın adını yanındaki düzenle düğmesini tıklayarak da düzenleyebilirsiniz.
Kullanıcı işlemleri akışlarını paylaşma
Kullanıcı akışlarını Kaydedici'de dışa ve içe aktarabilirsiniz. Bu, bir hatayı yeniden üreten adımların tam kaydını paylaşabileceğiniz için hata raporlama açısından yararlıdır. Ayrıca dosyayı dışa aktarıp harici kitaplıklarla tekrar oynatabilirsiniz.
Kullanıcı akışını dışa aktarma
Bir kullanıcı akışını dışa aktarmak için:
- Dışa aktarmak istediğiniz kullanıcı akışını açın.
- Kaydedici panelinin üst kısmında
Dışa Aktar'ı tıklayın.
- Açılır listeden aşağıdaki biçimlerden birini seçin:
- JSON dosyası. Kaydı JSON dosyası olarak indirin.
- @puppeteer/replay. Kaydı Puppeteer Replay komut dosyası olarak indirin.
- Kuklacı. Kaydı Puppeteer komut dosyası olarak indirin.
- Puppeteer (Lighthouse analizi dahil). Kaydı, yerleştirilmiş bir Lighthouse analizine sahip bir Puppeteer komut dosyası olarak indirin.
- Kaydedici'nin Uzantıları dışa aktarma bölümünde sunulan bir veya daha fazla seçenek.
- Dosyayı kaydedin.
Her varsayılan dışa aktarma seçeneğiyle aşağıdaki işlemleri yapabilirsiniz:
- JSON gibi olması gerekir. İnsan tarafından okunabilir JSON nesnesini düzenleyin ve JSON dosyasını Kaydedici'e içe aktarın.
- @puppeteer/replay. Komut dosyasını Puppeteer Replay kitaplığıyla tekrar oynatın. @puppeteer/replay komut dosyası olarak dışa aktarırken adımlar bir JSON nesnesi olarak kalır. CI/CD ardışık düzeninizle entegrasyon sağlamak istiyorsanız ancak adımları JSON olarak düzenleme, daha sonra bunları dönüştürüp Recorder'a geri aktarma esnekliğine sahip olmak istiyorsanız bu en iyi seçenektir.
- Puppeteer komut dosyası. Senaryoyu Puppeteer ile tekrar oynatın. Adımlar JavaScript'e dönüştürüldüğünden, adımları döngüye almak gibi daha ayrıntılı özelleştirmeler yapabilirsiniz. Bu komut dosyasını Kaydedici'ye geri aktaramazsınız.
Puppeteer (Lighthouse analizi dahil). Bu dışa aktarma seçeneği, önceki seçenekle aynıdır ancak Lighthouse analizi oluşturan bir kod içerir.
Komut dosyasını çalıştırın ve sonucu bir
flow.report.html
dosyasında kontrol edin:# npm i puppeteer lighthouse node your_export.js
Bir uzantı yükleyerek özel bir biçimde dışa aktarın
Kaydedici uzantıları başlıklı makaleyi inceleyin.
Kullanıcı akışını içe aktarma
Kullanıcı akışını içe aktarmak için:
- Kaydedici panelinin üst kısmındaki İçe aktar
düğmesini tıklayın.
- Kaydedilen kullanıcı akışını içeren JSON dosyasını seçin.
- İçe aktarılan kullanıcı akışını çalıştırmak için
Tekrar Oynat düğmesini tıklayın.
Harici kitaplıklarla tekrar oynatma
Puppeteer Replay, Chrome Geliştirici Araçları ekibi tarafından yönetilen açık kaynak bir kitaplıktır. Puppeteer'ın üzerine kurulmuştur. JSON dosyalarını tekrar oynatabileceğiniz bir komut satırı aracıdır.
Bunun dışında, JSON dosyalarını aşağıdaki üçüncü taraf kitaplıklarla dönüştürüp tekrar oynatabilirsiniz.
JSON kullanıcı akışlarını özel komut dosyalarına dönüştürün:
- Chrome Kaydedici'yi tıklayın. Kullanıcı akışı JSON dosyalarını Cypress test komut dosyalarına dönüştürmek için kullanabilirsiniz. Uygulamalı olarak görmek için bu demoyu izleyin.
- Gece Saatleri Chrome Kaydedici. Kullanıcı akışı JSON dosyalarını Nightwatch test komut dosyalarına dönüştürmek için kullanabilirsiniz.
- CodeceptJS Chrome Kaydedici. Kullanıcı akışı JSON dosyalarını CodeceptJS test komut dosyalarına dönüştürmek için bu dosyayı kullanabilirsiniz.
JSON kullanıcı akışlarını tekrar oynatma:
- Testcafe ile tekrar oynat. Kullanıcı akışı JSON dosyalarını yeniden oynatmak ve bu kayıtlar için test raporları oluşturmak üzere TestCafe'i kullanabilirsiniz.
- Sauce Labs ile tekrar oynayın. JSON dosyalarını Sauce Labs'de saucectl kullanarak tekrar oynatabilirsiniz.
Kullanıcı akışlarında hata ayıklama
Her kodda olduğu gibi, bazen kayıtlı kullanıcı akışlarında hata ayıklamanız gerekir.
Kaydedici paneli, hata ayıklamanıza yardımcı olmak için tekrarları yavaşlatmanıza, ayrılma noktaları ayarlamanıza, yürütmede adım atmanıza ve adımları paralel olarak çeşitli biçimlerde kodu incelemenize olanak tanır.
Tekrarı yavaşlatın
Kaydedici varsayılan olarak kullanıcı akışını mümkün olduğunca hızlı bir şekilde tekrar oynatır. Kayıtta ne olduğunu anlamak için tekrar oynatma hızını düşürebilirsiniz:
Tekrar oynat açılır menüsünü açın.
- Tekrar oynatma hızı seçeneklerinden birini belirleyin:
- Normal (Varsayılan)
- Yavaş
- Çok yavaş
- Son derece yavaş
Kodu inceleyin
Kullanıcı işlemleri akışının kodunu çeşitli biçimlerde incelemek için:
- Kaydedici panelinde bir kaydı açın.
- Adımlar listesinin sağ üst köşesindeki Kodu göster'i tıklayın.
- Kaydedici'de adımlar ve kodları yan yana gösterilir.
- Fareyle bir adımın üzerine geldiğinizde Kaydedici, ilgili kodu uzantılar tarafından sağlananlar da dahil olmak üzere herhangi bir biçimde vurgular.
Kullanıcı akışlarını dışa aktarmak için kullanacağınız biçimi seçmek üzere biçim açılır listesini genişletin.
Bu, üç varsayılan biçimden (JSON, @puppeteer/replay, Puppeteer komut dosyası veya bir uzantı tarafından sağlanan biçim) biri olabilir.
Adım parametrelerini ve değerlerini düzenleyerek kaydınızdaki hataları ayıklamaya devam edin. Kod görünümü düzenlenemez ancak siz soldaki adımlarda değişiklik yaptıkça uygun şekilde güncellenir.
Kesme noktaları belirleme ve adım adım yürütme
Bir ayrılma noktası belirlemek ve adım adım uygulamak için:
- Kayıttaki herhangi bir adımın yanındaki
dairesinin üzerine gelin. Daire,
ayrılma noktası simgesine dönüşür.
ayrılma noktası simgesini tıklayıp kaydı tekrar oynatın. Yürütmeler kesme noktasında duraklatılır.
.
- Yürütme işleminde ilerlemek için Kaydedici panelinin üst kısmındaki işlem çubuğunda
Bir adım yürüt düğmesini tıklayın.
- Tekrar oynatmayı durdurmak için
Tekrar oynatmayı iptal et'i tıklayın.
Adımları düzenle
Kayıt sırasında ve sonrasında, kayıttaki herhangi bir adımı yanındaki düğmesini tıklayarak düzenleyebilirsiniz.
Ayrıca eksik adımları ekleyebilir ve yanlışlıkla kaydedilen adımları kaldırabilirsiniz.
Adım ekle
Bazen adımları manuel olarak eklemeniz gerekebilir. Örneğin, Kaydedici hover
etkinliklerini otomatik olarak yakalamaz, çünkü bu durum kaydı kirlemesine neden olur ve bu tür etkinliklerin hepsi faydalı değildir. Ancak, açılır menüler gibi kullanıcı arayüzü öğeleri yalnızca hover
üzerinde görünebilir. Bu tür öğelere bağlı kullanıcı akışlarına manuel olarak hover
adımı ekleyebilirsiniz.
Manuel olarak adım eklemek için:
- Bu demo sayfasını açıp yeni bir kayıt başlatın.
- Görüntü alanındaki öğenin üzerine gelin. Bir işlem menüsü açılır.
.
- Menüden bir işlem seçip kaydı sonlandırın. Kaydedici yalnızca tıklama etkinliğini yakalar.
Tekrar oynat'ı tıklayarak kaydı tekrar oynatmayı deneyin. Kaydedici menüdeki öğeye erişemediğinden, zaman aşımından sonra tekrar oynatma başarısız olur.
- Tıklama adımının yanındaki
renkli üç nokta düğmesini tıklayın ve Önüne adım ekle'yi seçin.
- Yeni adımı genişletin. Varsayılan olarak
waitForElement
türüne sahiptir.type
öğesinin yanındaki değeri tıklayıphover
seçeneğini belirleyin. - Daha sonra, yeni adım için uygun bir seçici ayarlayın.
Seç'i, ardından
Hover over me!
öğesinde pop-up menünün dışındaki bir alanı tıklayın. Seçici#clickable
olarak ayarlandı. - Kaydı tekrar oynatmayı deneyin. Eklenen fareyle üzerine gelme adımının ardından Kaydedici, akışı başarıyla yeniden oynatır.
Onaylama ekle
Kayıt sırasında, örneğin HTML özellikleri ve JavaScript özellikleri üzerinde hak iddia edebilirsiniz. Onaylama eklemek için:
- Örneğin bu demo sayfasında kayıt başlatın.
Onay ekle'yi tıklayın.
Kaydedici, yapılandırılabilir bir
waitForElement
adımı oluşturur.Bu adım için seçicileri belirtin.
Adımı yapılandırın ancak
waitForElement
türünü değiştirmeyin. Örneğin, şunları belirtebilirsiniz:- HTML özelliği. Özellik ekle'yi tıklayın ve bu sayfadaki öğelerin kullandığı özelliğin adını ve değerini yazın. Örneğin,
data-test: <value>
. - JavaScript özelliği. Mülk ekle'yi tıklayın ve mülkün adını ve değerini JSON biçiminde yazın. Örneğin,
{".innerText":"<text>"}
. - Diğer adım özellikleri. Örneğin,
visible: true
.
- HTML özelliği. Özellik ekle'yi tıklayın ve bu sayfadaki öğelerin kullandığı özelliğin adını ve değerini yazın. Örneğin,
Kullanıcı akışının geri kalanını kaydedip kaydı durdurun.
Tekrar Oynat'ı tıklayın. Onaylama başarısız olursa Recorder, zaman aşımı sonrasında bir hata gösterir.
Bu iş akışının nasıl çalıştığını görmek için aşağıdaki videoyu izleyin.
Adımları kopyala
Kullanıcı akışının tamamını dışa aktarmak yerine tek bir adımı panoya kopyalayabilirsiniz:
- Kopyalamak istediğiniz adımı sağ tıklayın veya yanındaki üç nokta simgesini
tıklayın.
- Açılır menüde Farklı kopyala ... seçeneklerinden birini belirleyin.
Adımları çeşitli biçimlerde kopyalayabilirsiniz: JSON, Puppeteer, @puppeteer/replay ve uzantılar tarafından sağlananlar.
Adımları kaldır
Yanlışlıkla kaydedilen bir adımı kaldırmak için ilgili adımı sağ tıklayın veya yanındaki üç nokta simgesini tıklayıp Adımı kaldır'ı seçin.
Ek olarak Kaydedici, her kaydın başına otomatik olarak iki ayrı adım ekler:
- Görüntü alanını ayarlayın. Görüntü alanının boyutlarını, ölçeklendirmesini ve diğer özelliklerini kontrol etmenizi sağlar.
- Gezinme. URL'yi ayarlar ve her tekrar oynatmada sayfayı otomatik olarak yeniler.
Sayfayı yeniden yüklemeden sayfa içi otomasyon gerçekleştirmek için gezinme adımını yukarıda açıklandığı şekilde kaldırın.
Adımları yapılandırın
Bir adımı yapılandırmak için:
Türünü belirtin:
click
,doubleClick
,hover
, (giriş)change
,keyUp
,keyDown
,scroll
,close
,navigate
(bir sayfaya),waitForElement
,waitForExpression
veyasetViewport
.Diğer özellikler
type
değerine bağlıdır.type
altında gerekli özellikleri belirtin.İsteğe bağlı türe özel özellikler eklemek ve bunları belirtmek için ilgili düğmeleri tıklayın.
Kullanılabilir özelliklerin listesi için Adım özellikleri'ne bakın.
İsteğe bağlı bir mülkü kaldırmak için yanındaki Kaldır düğmesini tıklayın.
Dizi özelliğine öğe eklemek veya dizi özelliğinden öğe kaldırmak için öğenin yanındaki + veya - düğmelerini tıklayın.
Adım özellikleri
Her adım aşağıdaki isteğe bağlı özelliklere sahip olabilir:
target
: Chrome Geliştirici Araçları Protokolü (CDP) hedefi için bir URL; varsayılanmain
anahtar kelimesi, geçerli sayfayı ifade eder.- Şu anda yalnızca tek bir
navigation
etkinliği olabilecekassertedEvents
Çoğu adım türünde kullanılabilen diğer yaygın özellikler şunlardır:
frame
: İç içe yerleştirilebilecek bir iframe'i tanımlayan sıfır tabanlı dizinler dizisi. Örneğin, ana hedefin ikinci (1) iframe'indeki ilk (0) iframe'i[1, 0]
olarak tanımlayabilirsiniz.timeout
: Bir adım yürütülmeden önce beklenecek milisaniye sayısı. Daha fazla bilgi edinmek üzere Adımlar için zaman aşımlarını ayarlama başlıklı makaleyi inceleyin.selectors
—bir seçiciler dizisi. Daha fazla bilgi için Seçicileri anlama konusuna bakın.
Türe özgü özellikler şunlardır:
Tür | Özellik | Zorunlu | Açıklama |
click doubleClick |
offsetX offsetY |
Öğe içerik kutusunun sol üst tarafına göre (piksel cinsinden) | |
click doubleClick |
button |
İşaretçi düğmesi: birincil | yardımcı | saniye | geri | ileri | |
change |
value |
Nihai değer | |
keyDown keyUp |
key |
Anahtar adı | |
scroll |
x y |
Piksel cinsinden mutlak kaydırma x ve y konumları, varsayılan 0 | |
navigate |
url |
Hedef URL | |
waitForElement |
operator |
>= | == (varsayılan) | <= | |
waitForElement |
count |
Bir seçicinin tanımladığı öğe sayısı | |
waitForElement |
attributes |
HTML özelliği ve değeri | |
waitForElement |
properties |
JavaScript özelliği ve JSON'daki değeri | |
waitForElement |
visible |
Boole. Öğe DOM'deyse ve görünürse doğru değerini döndürür (display: none veya visibility: hidden içermez) |
|
waitForElement waitForExpression |
asserted events |
Şu anda yalnızca type: navigation ancak başlık ve URL belirtebilirsiniz |
|
waitForElement waitForExpression |
timeout |
Milisaniye cinsinden maksimum bekleme süresi | |
waitForExpression |
expression |
Doğru olarak çözümlenen JavaScript ifadesi | |
setViewport |
width height |
Görüntü alanının piksel cinsinden genişliği ve yüksekliği | |
setViewport |
deviceScaleFactor |
Cihaz Piksel Oranı'na (DPR) benzer, varsayılan 1 | |
setViewport |
isMobile hasTouch isLandscape |
Aşağıdakilerin yapılıp yapılmadığını belirten Boole işaretleri: |
Tekrar oynatmayı duraklatan iki özellik vardır:
waitForElement
özelliği, adımın, bir seçici tarafından tanımlanan birkaç öğenin varlığını (veya yokluğunu) beklemesini sağlar. Örneğin, aşağıdaki adım, sayfada.my-class
seçicisiyle eşleşen üçten az öğenin bulunmasını bekler."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
waitForExpression
özelliği, bir JavaScript ifadesinin doğru değerine dönüşmesi için adımı bekler. Örneğin, aşağıdaki adım iki saniye duraklar ve daha sonra doğru değerine dönüşerek tekrar oynatmanın devam etmesini sağlar."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Adımlar için zaman aşımlarını ayarlayın
Sayfanızda yavaş ağ istekleri veya uzun animasyonlar olması durumunda, 5000
milisaniyelik varsayılan zaman aşımını aşan adımlarda tekrar oynatma başarısız olabilir.
Bu sorunu önlemek amacıyla her adım için varsayılan zaman aşımını tek seferde ayarlayabilir veya belirli adımlar için ayrı zaman aşımları ayarlayabilirsiniz. Belirli adımlardaki zaman aşımları varsayılan değerin üzerine yazılır.
Her adımın varsayılan zaman aşımını tek seferde ayarlamak için:
Zaman aşımı kutusunu düzenlenebilir hale getirmek için Tekrar oynatma ayarları'nı tıklayın.
Zaman aşımı kutusunda, zaman aşımı değerini milisaniye cinsinden ayarlayın.
Ayarlanan varsayılan zaman aşımının nasıl çalıştığını görmek için
Tekrar oynat'ı tıklayın.
Belirli bir adımdaki varsayılan zaman aşımının üzerine yazmak için:
Adımı genişletin ve Zaman aşımı ekle'yi tıklayın.
timeout: <value>
simgesini tıklayın ve değeri milisaniye cinsinden ayarlayın.Zaman aşımının işlendiği adımı görmek için
Tekrar oynat seçeneğini tıklayın.
Bir adımdaki zaman aşımının üzerine yazma işlemini kaldırmak için yanındaki Sil düğmesini tıklayın.
Seçicileri anlama
Yeni bir kayıt başlattığınızda aşağıdakileri yapılandırabilirsiniz:
- Seçici özelliği metin kutusuna bir özel test özelliği girin. Kaydedici, seçicileri algılamak için yaygın test özellikleri listesi yerine bu özelliği kullanır.
Kaydedilecek seçici türleri onay kutusu grubunda, otomatik olarak algılanacak seçici türlerini belirleyin:
CSS'yi seçin. Sözdizimsel seçiciler.
ARIA. Anlamsal seçiciler
Metin. Varsa en kısa benzersiz metne sahip seçiciler.
XPath. XML Yol Dili kullanan seçiciler.
Pierce. CSS'lere benzeyen ancak gölge DOM'sini bozabilen seçiciler.
Yaygın test seçiciler
Basit web sayfalarında, Kaydedici'nin seçicileri algılaması için id
özellikleri ve CSS class
özellikleri yeterlidir. Ancak bu durum her zaman geçerli olmayabilir çünkü:
- Web sayfalarınızda dinamik sınıflar veya değişen kimlikler kullanılıyor olabilir.
- Kod veya çerçeve değişiklikleri nedeniyle seçicileriniz bozulabilir.
Örneğin, CSS class
değerleri modern JavaScript çerçeveleriyle (ör. React, Angular, Vue) ve CSS çerçeveleriyle geliştirilen uygulamalar için otomatik olarak oluşturulabilir.
Bu durumlarda, daha dayanıklı testler oluşturmak için data-*
özelliklerini kullanabilirsiniz. Geliştiricilerin otomasyon için kullandığı bazı yaygın data-*
seçiciler zaten vardır. Kaydedici bunları da destekler.
Web sitenizde aşağıdaki ortak test seçiciler tanımlanmışsa Kaydedici bunları otomatik olarak algılar ve ilk olarak kullanır:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
Örneğin, "Cappuccino"yu inceleyin ve öğesine giderek test özelliklerini inceleyin:
"Cappuccino"ya bir tıklama kaydedin, kayıtta ilgili adımı genişletin ve algılanan seçicileri kontrol edin:
Kayıt seçiciyi özelleştir
Yaygın test seçiciler sizin için çalışmıyorsa kayıt seçiciyi özelleştirebilirsiniz.
Örneğin, bu demo sayfasında seçici olarak data-automate
özelliği kullanılır. Yeni bir kayıt başlatın ve seçici özelliği olarak data-automate
değerini girin.
Bir e-posta adresi girin ve seçici değeri ([data-automate=email-address]
) gözlemleyin.
Seçici önceliği
Kaydedici, özel CSS seçici özelliği belirtip belirtmediğinize bağlı olarak seçicileri aşağıdaki sırayla arar:
- Belirtilmişse:
- Özel CSS özelliğinizi içeren CSS seçici.
- XPath seçicileri
- Varsa ARIA seçicisi.
- Bulunursa en kısa benzersiz metne sahip bir seçici.
- Belirtilmezse:
- Varsa ARIA seçicisi.
- Aşağıdaki önceliğe sahip CSS seçiciler:
- Test için en yaygın olarak kullanılan özellikler:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- Kimlik özellikleri (örneğin,
<div id="some_ID">
). - Normal CSS seçiciler.
- Test için en yaygın olarak kullanılan özellikler:
- XPath seçicileri
- Pierce seçiciler.
- Bulunursa en kısa benzersiz metne sahip bir seçici.
Birden fazla normal CSS, XPath ve Pierce seçici olabilir. Kaydedici şunları kaydeder:
- Her kök düzeyinde normal CSS ve XPath seçiciler, yani iç içe yerleştirilmiş gölge ana makineleri (varsa).
- Tüm gölge kökleri içindeki tüm öğelerde benzersiz olan pierce seçiciler.