Chrome Geliştirici Araçları Kaydedici panelindeki bu kapsamlı özellik referansında, kullanıcı akışlarını paylaşmanın, düzenlemenin ve adım adım düzenleme yollarını keşfedin.
Kaydedici paneliyle çalışmaya ilişkin temel bilgileri öğrenmek için Kullanıcı akışlarını kaydetme, yeniden oynatma ve ölçme başlıklı makaleye bakın.
Kısayolları öğrenme ve özelleştirme
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.
Doğrudan Kaydedici'de tüm kısayolları listeleyen bir ipucunu 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 > Kısayollar'ı açın.
- Recorder (Kaydedici) bölümüne gidin.
- Kısayolları özelleştirme başlıklı makaledeki adımları uygulayın.
Kullanıcı işlemleri akışlarını düzenleme
Kaydedici panelinin üst tarafında şunları yapabilirsiniz:
- Yeni kayıt ekleme. Yeni bir kayıt eklemek için + simgesini tıklayın.
- Tüm kayıtları görüntüleyin. Açılır menüde, kaydedilen kayıtların listesi gösterilir. Kaydedilen kayıtların listesini genişletmek ve yönetmek için [sayı] kayıt seçeneğini belirleyin.
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ı olarak kaydedin.
- @puppeteer/replay komut dosyası.
- Puppeteer komut dosyası.
- Kuklacı (Lighthouse analizi dahil).
Biçimler hakkında daha fazla bilgi edinmek için Kullanıcı akışını dışa aktarma başlıklı makaleye göz atın.
Kaydı içe aktarın. Yalnızca JSON biçiminde.
Kaydı silme. Seçili kaydı silin.
Ayrıca kaydın adını, yanındaki düzenleme düğmesini tıklayarak da düzenleyebilirsiniz.
Kullanıcı akışlarını paylaşma
Kaydedici'de kullanıcı akışlarını dışa ve içe aktarabilirsiniz. Bir hatayı yeniden oluşturan adımların tam kaydını paylaşabileceğiniz için bu özellik hata raporlama açısından kullanışlıdır. Ayrıca, içeriği dışa aktarabilir ve harici kitaplıklarla yeniden oynatabilirsiniz.
Kullanıcı işlemlerini 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ındaki Dışa Aktar'ı tıklayın.
- Açılır listeden aşağıdaki biçimlerden birini seçin:
- JSON dosyası olarak yeniden adlandırın. Kaydı JSON dosyası olarak indirin.
- @puppeteer/replay. Kaydı, Kuklacı Tekrar Oynatma komut dosyası olarak indirin.
- Kuklacı. Kaydı Puppeteer komut dosyası olarak indirin.
- Kuklacı (Lighthouse analizi dahil). Kaydı, yerleştirilmiş bir Lighthouse analiziyle Puppeteer komut dosyası olarak indirin.
- Kaydedici'nin Dışa Aktarma uzantıları tarafından sağlanan bir veya daha fazla seçenek.
- Dosyayı kaydedin.
Her bir varsayılan dışa aktarma seçeneğiyle aşağıdakileri yapabilirsiniz:
- JSON için geçerlidir. Okunabilir JSON nesnesini düzenleyin ve JSON dosyasını tekrar Kaydedici'ye import.
- @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. Bu seçenek, CI/CD ardışık düzeninizle entegrasyon gerçekleştirmek istiyorsanız ancak adımları JSON olarak düzenleme, daha sonra dönüştürüp tekrar Recorder'a aktarma esnekliğine sahip olmak istiyorsanız idealdir.
- Kuklacı komut dosyası. Senaryoyu Puppeteer ile tekrar oynatın. Adımlar JavaScript'e dönüştürüldüğü için, adımları döngüye almak gibi daha ayrıntılı özelleştirmeler yapabilirsiniz. Bu komut dosyasını tekrar Kaydedici'ye aktaramayacağınıza dikkat edin.
Kuklacı (Lighthouse analizi dahil). Bu dışa aktarma seçeneği, önceki seçenekle aynıdır ancak Lighthouse analizi oluşturan kod içerir.
Komut dosyasını çalıştırın ve çıkışı bir
flow.report.html
dosyasında kontrol edin:# npm i puppeteer lighthouse node your_export.js
Uzantı yükleyerek özel bir biçimde dışa aktarma
Kaydedici uzantıları başlıklı makaleyi inceleyin.
Kullanıcı içe aktarma işlemleri
Bir 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ı işlemleri 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. Kuklacı'nın temeli üzerine inşa edilmiştir. JSON dosyalarını birlikte 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:
- Cypress Chrome Kaydedici. Kullanıcı akışı JSON dosyalarını Cypress test komut dosyalarına dönüştürmek için bunu kullanabilirsiniz. İşleyiş şeklini görmek için bu demoyu izleyin.
- Gece Saati Chrome Kaydedici. Kullanıcı akışı JSON dosyalarını Nightwatch test komut dosyalarına dönüştürmek için bu işlevi kullanabilirsiniz.
- CodeceptJS Chrome Kaydedici. Kullanıcı akışı JSON dosyalarını CodeceptJS test komut dosyalarına dönüştürmek için bunu kullanabilirsiniz.
JSON kullanıcı akışlarını tekrar oynatma:
- Testcafe ile tekrar oynatın. 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 deneyin. JSON dosyalarını saucectl kullanarak Sauce Labs'de yeniden oynatabilirsiniz.
Kullanıcı işlemleri akışlarında hata ayıklama
Tüm kodlarda olduğu gibi, bazen kaydedilen kullanıcı işlemleri akışlarında hata ayıklamanız gerekir.
Kaydedici paneli, hata ayıklamanıza yardımcı olmak için tekrar oynatmaları yavaşlatmanıza, kesme noktaları belirlemenize, yürütme işlemine adım atmanıza ve adımlarla paralel olarak kodu çeşitli biçimlerde incelemenize olanak tanır.
Tekrarı yavaşlatma
Varsayılan olarak Kaydedici, kullanıcı akışını olabildiğince hızlı şekilde yeniden oynatır. Kayıtta neler 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
Bir kullanıcı işlemleri akışının kodunu çeşitli biçimlerdeki incelemek için:
- Kaydedici panelinde bir kaydı açın.
- Adım listesinin sağ üst köşesindeki Kodu göster'i tıklayın.
- Kaydedici, adımları ve kodlarını yan yana gösterir.
- 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 kullandığınız biçimi seçmek üzere biçim açılır listesini genişletin.
Varsayılan üç biçimden (JSON, @puppeteer/replay, Puppeteer komut dosyası) veya bir uzantı tarafından sağlanan bir biçim 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 soldaki adımlarda değişiklik yaptığınızda uygun şekilde güncellenir.
Kesme noktaları belirleyin ve işlemleri adım adım yürütün
Bir kesme noktası belirlemek ve adım adım yürütmek için:
- İmleci, kayıttaki herhangi bir adımın yanındaki dairesinin üzerine getirin. Daire, ayrılma noktası simgesine dönüşüyor.
- ayrılma noktası simgesini tıklayın ve kaydı yeniden oynatın. Yürütme işlemleri ayrılma 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, yanındaki düğmesini tıklayarak kayıttaki herhangi bir adımı 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 etkinlikleri otomatik olarak yakalamaz.hover
Bu, kaydı kirlettiği ve bu tür etkinliklerin hepsinin işe yaramadığı için. 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ı olan kullanıcı akışlarına hover
adımlarını manuel olarak 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ında öğenin üzerine gelin. Bir işlem menüsü açılır.
- Menüden bir işlem seçip kaydı sona erdirin. Kaydedici, yalnızca tıklama etkinliğini kaydeder.
- Yeniden Oynat'ı tıklayarak kaydı tekrar oynatmayı deneyin. Kaydedici menüdeki öğeye erişemediğinden, zaman aşımı sonrasında tekrar oynatma başarısız olur.
- Tıklama adımının yanındaki üç nokta düğmesini tıklayın ve Önce adımı ekle'yi seçin.
- Yeni adımı genişletin. Varsayılan olarak
waitForElement
türündedir.type
öğesinin yanındaki değeri tıklayın vehover
öğesini seçin. - Sonra, yeni adım için uygun bir seçici ayarlayın. Seç'i ve ardından
Hover over me!
öğesinde pop-up menünün dışında kalan bir alanı tıklayın. Seçici#clickable
olarak ayarlandı. - Kaydı tekrar oynatmayı deneyin. Fareyle üzerine gelinen adım eklendiğinde 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 bir 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 öğelerde kullanılan özelliğin adını ve değerini yazın. Örneğin,
data-test: <value>
. - JavaScript özelliği. Özellik ekle'yi tıklayıp 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 öğelerde kullanılan özelliğin adını ve değerini yazın. Örneğin,
Kullanıcı akışının geri kalanını kaydetme işlemine devam edin ve ardından kaydı durdurun.
Tekrar oynat'ı tıklayın. Onaylama başarısız olursa Kaydedici, zaman aşımı sonrasında bir hata görüntüler.
Bu iş akışını çalışırken 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 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şlangıcına otomatik olarak iki ayrı adım ekler:
- Görünümü ayarla. 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 yukarıda açıklandığı şekilde gezinme adımını 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
öğesinin 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 konusuna bakın.
İsteğe bağlı bir özelliği kaldırmak için yanındaki Kaldır düğmesini tıklayın.
Dizi özelliğine bir öğe eklemek veya dizi özelliğinden kaldırmak için ilgili öğenin yanındaki + veya - düğmesini 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) hedefinin URL'sidir. Varsayılanmain
anahtar kelimesi geçerli sayfayı ifade eder.- Şu anda yalnızca tek bir
navigation
etkinliği olabilenassertedEvents
Adım türlerinin çoğu için 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'i iç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 için Adımlar için zaman aşımlarını ayarlama başlıklı makaleye bakın.selectors
: Bir seçici dizisi. Daha fazla bilgi için Seçicileri anlama konusuna bakın.
Türe özgü özellikler şunlardır:
Tür | Özellik | Gerekli | Açıklama |
click doubleClick |
offsetX offsetY |
Öğe içeriği kutusunun sol üst tarafına göre (piksel cinsinden) | |
click doubleClick |
button |
İşaretçi düğmesi: birincil | yardımcı | ikinci | geri | ileri | |
change |
value |
Nihai değer | |
keyDown keyUp |
key |
Anahtar adı | |
scroll |
x y |
Piksel cinsinden mutlak x ve y kaydırma konumları, varsayılan 0 | |
navigate |
url |
Hedef URL | |
waitForElement |
operator |
>= | == (varsayılan) | <= | |
waitForElement |
count |
Seçici tarafından tanımlanan öğ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'daysa ve görünürse doğru değerini alır (display: none veya visibility: hidden yoksa) |
|
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 seçici tarafından tanımlanan çeşitli öğelerin varlığını (veya yokluğunu) beklemesini sağlar. Örneğin, aşağıdaki adım,.my-class
seçicisiyle eşleşen sayfada üçten az öğenin bulunmasını bekler."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
waitForExpression
özelliği, bir JavaScript ifadesinin true (doğru) değerine çözümlenmesine kadarki adımı bekler. Örneğin, aşağıdaki adım iki saniye duraklar ve daha sonra, tekrar oynatmanın devam etmesi için doğru değerine çözümlenir."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
milisaniye olan varsayılan zaman aşımını aşan adımlarda tekrar oynatma başarısız olabilir.
Bu sorunu önlemek için her adımın varsayılan zaman aşımını aynı anda ayarlayabilir veya belirli adımlar için ayrı zaman aşımları ayarlayabilirsiniz. Belirli adımlardaki zaman aşımları varsayılanın üzerine yazılır.
Her adımın varsayılan zaman aşımını aynı anda 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ı çalışırken görmek için Tekrar oynat'ı tıklayın.
Belirli bir adımda 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 gerçekleştiği adımı görmek için Tekrar oynat'ı tıklayın.
Bir adımdaki zaman aşımı üzerine yazma özelliğini kaldırmak için adımın yanındaki Sil düğmesini tıklayın.
Seçicileri anlama
Yeni bir kayda başladığınızda aşağıdakileri yapılandırabilirsiniz:
- Seçici özelliği metin kutusuna bir özel test özelliği girin. Kaydedici, yaygın test özellikleri listesi yerine seçicileri algılamak için bu özelliği kullanır.
Kaydedilecek seçici türleri onay kutuları grubunda, otomatik olarak algılanacak seçici türlerini belirleyin:
- CSS. Sözdizimsel seçiciler.
- ARIA. Anlamsal seçiciler.
- Metin. Varsa en kısa benzersiz metne sahip seçiciler.
- XPath olur. XML Yol Dili'ni kullanan seçiciler.
- Pierce. CSS'lere benzeyen ancak gölge DOM'u delebilen seçiciler.
Sık kullanılan test seçiciler
Basit web sayfalarında, Kaydedici'nin seçicileri algılaması için id
özellikleri ve CSS class
özellikleri yeterlidir. Ancak bu her zaman geçerli olmayabilir, çünkü:
- Web sayfalarınızda, değişen dinamik sınıflar veya kimlikler kullanılıyor olabilir.
- Seçicileriniz, kod veya çerçeve değişiklikleri nedeniyle bozulabilir.
Örneğin, CSS class
değerleri, modern JavaScript çerçeveleri (ör. React, Angular, Vue) ve CSS çerçeveleriyle geliştirilen uygulamalar için otomatik olarak oluşturulabilir.
Bu gibi durumlarda, daha dayanıklı testler oluşturmak için data-*
özelliklerini kullanabilirsiniz. Geliştiricilerin otomasyon için kullandığı bazı yaygın data-*
seçicileri zaten mevcuttur. Kaydedici bunları da destekler.
Web sitenizde tanımlanmış aşağıdaki ortak test seçicileri varsa Kaydedici, önce bunları otomatik olarak algılar ve kullanır:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
Örneğin, bu demo sayfasındaki "Cappuccino" öğesini denetleyin ve test özelliklerini inceleyin:
"Cappuccino"yu bir tıklama kaydedin, kayıtta ilgili adımı genişletin ve algılanan seçicileri kontrol edin:
Kayıt seçiciyi özelleştirme
Ortak test seçiciler sizin için uygun değilse kaydın seçicisini özelleştirebilirsiniz.
Örneğin, bu demo sayfası, seçici olarak data-automate
özelliğini kullanı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ğerine ([data-automate=email-address]
) dikkat edin.
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:
- CSS seçiciyi özel CSS özelliğinizle birlikte kullanın.
- XPath seçiciler.
- Bulunursa ARIA seçici.
- Bulunursa en kısa benzersiz metni içeren bir seçici.
- Belirtilmezse:
- Bulunursa ARIA seçici.
- 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 (ör.
<div id="some_ID">
). - Normal CSS seçiciler.
- Test için en yaygın olarak kullanılan özellikler:
- XPath seçiciler.
- Pierce seçiciler.
- Bulunursa en kısa benzersiz metni içeren bir seçici.
Birden fazla normal CSS, XPath ve Pierce seçicisi olabilir. Kaydedici şunları kaydeder:
- Her kök seviyesindeki normal CSS ve XPath seçicileri, yani varsa iç içe yerleştirilmiş gölge ana makineleri
- Tüm gölge kökleri içindeki tüm öğeler arasında benzersiz olan parça seçiciler.