Aşağıdaki videoda yeni Kaydedici paneline (önizleme özelliği) göz atın.
Kullanıcı akışlarını kaydetmek, yeniden oynatmak ve ölçmek için Kaydedici panelini nasıl kullanacağınızı öğrenmek üzere bu eğitimde yer alan adımları uygulayın.
Kaydedilen kullanıcı akışlarının nasıl paylaşılacağı ve bu akışlarla ilgili adımların nasıl paylaşılacağı hakkında daha fazla bilgi için Kaydedici özellikleri referansına göz atın.
Kaydedici panelini açma
- Geliştirici Araçları'nı açın.
Diğer seçenekler
> Diğer araçlar > Kaydedici'yi tıklayın.
Alternatif olarak, Kaydedici panelini açmak için Komut Menüsü'nü de kullanabilirsiniz.
Giriş
Bu kahve siparişi demo sayfasını kullanacağız. Ödeme, alışveriş web siteleri arasında yaygın bir kullanıcı akışıdır.
Sonraki bölümlerde, Kaydedici panelini kullanarak aşağıdaki ödeme akışını nasıl kaydedeceğiniz, yeniden oynatacağınız ve denetleyeceğiniz konusunda size yol göstereceğiz:
- Alışveriş sepetine kahve ekle.
- Alışveriş sepetine bir kahve daha ekle.
- Alışveriş sepeti sayfasına gidin.
- Alışveriş sepetinden bir kahve çıkarın.
- Ödeme işlemini başlatın.
- Ödeme ayrıntılarını girin.
- Ödeme yapın.
Kullanıcı işlemleri akışını kaydetme
- Bu demo sayfasını açın. Başlamak için Yeni kayıt başlat düğmesini tıklayın.
- Kayıt adı metin kutusuna "kahve ödeme" yazın.
- Yeni kayıt başlat düğmesini tıklayın. Kayıt başlatılır. Panelde, kaydın devam ettiğini belirten Kayıt yapılıyor... ifadesi görünür.
- Cappuccino'yu alışveriş sepetine eklemek için tıklayın.
- Americano'yu tıklayarak sepete ekleyin. Kaydedici'nin şu ana kadar uyguladığınız adımları gösterdiğine dikkat edin.
- Alışveriş sepeti sayfasına gidip Americano'yu sepetten kaldırın.
- Ödeme sürecini başlatmak için Toplam: 19,00 ABD doları düğmesini tıklayın.
- Ödeme ayrıntıları formunda Ad ve E-posta metin kutularını doldurun ve Sipariş güncellemeleri ve tanıtım mesajları almak istiyorum onay kutusunu işaretleyin.
- Ödeme işlemini tamamlamak için Gönder düğmesini tıklayın.
- Kaydı sonlandırmak için Kaydedici panelinde
Kaydı sonlandır düğmesini tıklayın.
Kullanıcı işlemlerini yeniden oynatma
Bir kullanıcı akışını kaydettikten sonra 
Tekrar oynat düğmesini tıklayarak akışı tekrar oynatabilirsiniz.
Sayfada kullanıcı akışını tekrar oynatmayı görebilirsiniz. Tekrar oynatma ilerleme durumu Kaydedici panelinde de gösterilir.
Kayıt sırasında yanlış tıkladıysanız veya bir şey çalışmıyorsa kullanıcı akışınızda hata ayıklama yapabilirsiniz: Oynatma hızını yavaşlatın, bir kesme noktası ayarlayın ve adım adım yürütün.
Yavaş ağ simülasyonu
Tekrar oynatma ayarlarını yapılandırarak yavaş bir ağ bağlantısını simüle edebilirsiniz. Örneğin, Tekrar oynatma ayarları'nı genişletin, Ağ açılır menüsünden Yavaş 3G'yi seçin.
Gelecekte daha fazla ayar desteklenebilir. İstediğiniz yeniden oynatma ayarlarını bizimle paylaşın.
Kullanıcı akışını ölçme
Performansı ölç düğmesini tıklayarak kullanıcı işlemleri akışının performansını ölçebilirsiniz. Örneğin ödeme, alışveriş yapan bir web sitesindeki kritik kullanıcı işlemleri akışıdır. Kaydedici paneliyle ödeme akışını bir kez kaydedebilir ve düzenli olarak ölçebilirsiniz.
Performansı ölç düğmesi tıklandığında ilk olarak kullanıcı akışı tekrar oynatılır, ardından Performans panelinde performans izleme bölümü açılır.
Performans panelini kullanarak sayfanızın çalışma zamanı performansını nasıl analiz edeceğinizi öğrenin. Web Vitals metriklerini görüntülemek ve kullanıcıların tarama deneyimini iyileştirme fırsatlarını belirlemek için Performans panelinde Web Vitals onay kutusunu etkinleştirebilirsiniz.
Adımları düzenle
Şimdi, kaydedilen iş akışındaki adımları düzenlemeye ilişkin temel seçeneklerin üzerinden geçelim.
Düzenleme seçeneklerinin kapsamlı bir listesi için özellikler referansında Düzenleme adımları bölümüne bakın.
Adımları genişlet
İşlemin ayrıntılarını görmek için her adımı genişletin. Örneğin, "Cappuccino" Öğesini Tıklayın adımını genişletin.
Yukarıdaki adımda iki seçici gösterilmektedir. Daha fazla bilgi için Kayıt seçiciyi anlama başlıklı makaleye bakın.
Kullanıcı akışını tekrar oynatırken Kaydedici, öğeyi seçicilerden biriyle sırayla sorgulamaya çalışır. Örneğin, Kaydedici, öğeyi ilk seçiciyle başarıyla sorgularsa ikinci seçiciyi atlar ve bir sonraki adıma geçer.
Bir adıma seçici ekleme ve adımdan seçici kaldırma
Seçicileri ekleyebilir veya kaldırabilirsiniz. Örneğin, bu durumda yalnızca aria/Cappuccino yeterli olduğundan seçici #2'yi kaldırabilirsiniz. Fareyle 2. seçicinin üzerine gelip - simgesini tıklayarak seçiciyi kaldırın.
Bir adımdaki seçicileri düzenleme
Seçici de düzenlenebilir. Örneğin, Cappuccino yerine Mocha'yı seçmek isterseniz şunları yapabilirsiniz:
Bunun yerine seçici değerini aria/Mocha olarak düzenleyin.
Alternatif olarak Seç
düğmesini ve ardından sayfada Mocha'yı da tıklayabilirsiniz.Akış şimdi yeniden oynatılır. Cappuccino yerine Mocha seçilir.
type, target, value gibi diğer adım özelliklerini düzenlemeyi deneyin.
Adım ekleme ve kaldırma
Adım ekleme ve kaldırma seçenekleri de vardır. Bu, fazladan bir adım eklemek veya yanlışlıkla eklenen bir adımı kaldırmak istediğinizde yararlı olur. Kullanıcı akışını yeniden kaydetmek yerine düzenleyebilirsiniz:
Düzenlemek istediğiniz adımı sağ tıklayın veya yanındaki
üç nokta simgesini tıklayın. 
Kaldırmak için Adımı kaldır'ı seçebilirsiniz. Örneğin, Mocha adımı sonrasındaki Scroll etkinliği gerekli değildir.
Herhangi bir adım gerçekleştirmeden önce sayfada 9 kahvenin gösterilmesini beklemek istediğinizi varsayalım. Mocha adım menüsünde Önceki adımı ekle'yi seçin.
Assert Element'te, yeni adımı aşağıdaki ayrıntılarla düzenleyin:
- tür: waitForElement
- 1. seçici: .cup
- operatör: == (operatör ekle düğmesini tıklayın)
- adet: 9 (Adet ekle düğmesini tıklayın)
Değişiklikleri görmek için
akışı hemen yeniden oynatın.
Sonraki adımlar
Tebrikler, eğitimi tamamladınız.
Kaydedici ile ilgili diğer özellikleri ve iş akışlarını (ör. içe ve dışa aktarma) keşfetmek için Kaydedici özellikleri referansı başlıklı makaleye bakın.