Özellik referansı

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Chrome Geliştirici Araçları Kaydedici panelindeki 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, yeniden oynatma ve ölçme başlıklı makaleyi inceleyin.

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.

Tüm kısayolların listesini doğrudan Kaydedici'de görmek için sağ üst köşedeki Kısayolları göster'i tıklayın.

Kısayolları göster düğmesi.

Kaydedici kısayollarını özelleştirmek için:

  1. Ayarlar'a dokunun. Ayarlar > Kısayollar'ı açın.
  2. Kaydedici bölümüne ilerleyin.
  3. Kısayolları özelleştirme bölümündeki adımları uygulayın.

Kullanıcı işlemleri akışlarını düzenleme

Geliştirici Araçları Kaydedici panelinin başlık bölümünde, düzenlenecek kullanıcı işlemleri akışını seçmenize olanak tanıyan bir açılır menü bulunur.

Kaydedici panelinin üst kısmında şunları yapabileceğiniz seçenekler bulunur:

  1. Yeni bir kayıt ekleyinEkle'ye dokunun.. Yeni kayıt eklemek için + simgesini tıklayın.
  2. Tüm kayıtları görüntüleyinDaha fazla genişlet.. Açılır liste, kaydedilen kayıtların listesini gösterir. Kaydedilen kayıtların listesini genişletip yönetmek için N kayıt seçeneğini belirleyin. Tüm kayıtları görüntüleyin.

  3. Kaydı dışa aktarmaDosya indirme.. 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:

    Biçimler hakkında daha fazla bilgi edinmek için Kullanıcı akışını dışa aktarma başlıklı makaleyi inceleyin.

  4. Kaydı içe aktarınDosya yükleme.. Yalnızca JSON biçiminde.

  5. Kayıt silmeSil'e dokunun.. Seçili kaydı silin.

Kaydın adını, yanındaki düzenleme düğmesini Düzenle'yi tıklayın. 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, dışa aktarıp harici kitaplıklarda oynatabilirsiniz.

Kullanıcı işlemlerini akışını dışa aktarma

Bir kullanıcı akışını dışa aktarmak için:

  1. Dışa aktarmak istediğiniz kullanıcı akışını açın.

  2. Kaydedici panelinin üst kısmından Dışa aktar'ı tıklayın.

    Dışa aktar menüsündeki biçim seçeneklerinin listesi.

  3. 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 (Firefox için). Kaydı Firefox için Puppeteer komut dosyası olarak indirin.
    • Puppeteer (Lighthouse analizi dahil). Kaydı, yerleşik bir Lighthouse analizi içeren Puppeteer komut dosyası olarak indirin.
    • Kaydedici'nin Uzantıları dışa aktar seçeneği tarafından sağlanan bir veya daha fazla seçenek.

  4. Dosyayı kaydedin.

Her varsayılan dışa aktarma seçeneğiyle aşağıdakileri yapabilirsiniz:

  • JSON gibi olması gerekir. İnsan tarafından okunabilir JSON nesnesini düzenleyin ve JSON dosyasını Kaydedici'e 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 yapmak ancak yine de adımları JSON olarak düzenleme, daha sonra dönüştürme ve Kaydedici'ye geri içe aktarma esnekliğine sahip olmak istiyorsanız mükemmeldir.
  • 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 (Firefox için) WebDriver BiDi desteği kapsamında bu Puppeteer komut dosyasını hem Chrome hem de Firefox'ta çalıştırabilirsiniz.

  • 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 flow.report.html dosyasındaki çıkışı kontrol edin:

    # npm i puppeteer lighthouse
node your_export.js

    Lighthouse raporu Chrome'da açıldı.

Bir uzantı yükleyerek özel bir biçimde dışa aktarın

Kaydedici uzantıları başlıklı makaleyi inceleyin.

Kullanıcı işlemleri akışını içe aktarma

Kullanıcı akışını içe aktarmak için:

  1. Kaydedici panelinin üst kısmındaki İçe aktarDosya yükleme. düğmesini tıklayın. Kaydı içe aktarın.
  2. Kaydedilen kullanıcı akışını içeren JSON dosyasını seçin.
  3. İçe aktarılan kullanıcı akışını çalıştırmak için Tekrar oynat.Yeniden oynat düğmesini tıklayın.

Harici kitaplıklarla yeniden oynatma

Puppeteer Replay, Chrome Geliştirici Araçları ekibi tarafından yönetilen açık kaynak bir kitaplıktır. Puppeteer'ın üzerine inşa edilmiştir. Komut satırı aracı olan bu programla JSON dosyalarını yeniden oynatabilirsiniz.

Bunun dışında, aşağıdaki üçüncü taraf kitaplıklarını kullanarak JSON dosyalarını dönüştürebilir ve yeniden oynatabilirsiniz.

JSON kullanıcı akışlarını özel komut dosyalarına dönüştürün:

  • Cypress Chrome Recorder. 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.
  • Nightwatch Chrome Recorder. Bu aracı, kullanıcı akışı JSON dosyalarını Nightwatch test komut dosyalarına dönüştürmek için kullanabilirsiniz.
  • CodeceptJS Chrome Kaydedici. Bu aracı, kullanıcı akışı JSON dosyalarını CodeceptJS test komut dosyalarına dönüştürmek için kullanabilirsiniz.

JSON kullanıcı işlemlerini yeniden oynatma:

Kullanıcı akışlarında hata ayıklama

Her kodda olduğu gibi, bazen kaydedilen kullanıcı akışlarında hata ayıklama yapmanız gerekir.

Kaydedici paneli, hata ayıklamanıza yardımcı olmak için yeniden oynatmaları yavaşlatmanıza, kesme noktaları belirlemenize, yürütme işleminde adım adım ilerlemenize ve adımlara paralel olarak çeşitli biçimlerde kod incelemenize olanak tanır.

Tekrarı yavaşlatma

Kaydedici, varsayılan olarak kullanıcı akışını olabildiğince hızlı bir şekilde yeniden oynatır. Kayıtta ne olduğunu anlamak için tekrar oynatma hızını düşürebilirsiniz:

  1. Tekrar oynat.Tekrar oynat açılır menüsünü açın.
  2. Tekrar oynatma hızı seçeneklerinden birini belirleyin:
    • Normal (Varsayılan)
    • Yavaş
    • Çok yavaş
    • Son derece yavaş

Yavaş tekrar oynatma.

Kodu inceleyin

Kullanıcı işlemleri akışının kodunu çeşitli biçimlerde incelemek için:

  1. Kaydedici panelinde bir kaydı açın.
  2. Adımlar listesinin sağ üst köşesindeki Kodu göster'i tıklayın. Kodu göster düğmesi.
  3. Kaydedici'de adımlar ve kodları yan yana gösterilir. Adımların ve kodlarının yan yana görünümü.
  4. 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.

  5. 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.

    Biçim açılır listesi.

    Üç varsayılan biçimden (JSON, @puppeteer/replay, Puppeteer komut dosyası) biri veya bir uzantı tarafından sağlanan bir biçim olabilir.

  6. 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 buna göre güncellenir.

Kesme noktaları ayarlama ve adım adım yürütme

Bir kesme noktası ayarlamak ve adım adım yürütmek için:

  1. İmleci, kayıttaki herhangi bir adımın yanındaki Adım. dairesinin üzerine getirin. Daire, Kesme noktası. kesme noktası simgesine dönüşür.
  2. Kesme noktası. ayrılma noktası simgesini tıklayıp kaydı tekrar oynatın. Yürütmeler, kesme noktasında duraklatılır. Yürütme duraklatıldı.
  3. Yürütme işleminde ilerlemek için Kaydedici panelinin üst kısmındaki işlem çubuğunda Bir adım yürütün. Bir adım yürüt düğmesini tıklayın.
  4. Tekrar oynatmayı durdurmak için Dur. Tekrar oynatmayı iptal et'i tıklayın.

Adımları düzenle

Kayıttaki herhangi bir adımı, hem kayıt sırasında hem de sonrasında yanındaki Genişlet. düğmesini tıklayarak düzenleyebilirsiniz.

Ayrıca eksik adımları ekleyebilir ve yanlışlıkla kaydedilen adımları kaldırabilirsiniz.

Adım ekleme

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'te görünebilir. Bu tür öğelere bağlı kullanıcı akışlarına manuel olarak hover adımları ekleyebilirsiniz.

Manuel olarak adım eklemek için:

  1. Bu demo sayfasını açın ve yeni bir kayıt başlatın. Fareyle üzerine gelme etkinliğini yakalamak için kayıt başlatın.
  2. Görüntü alanındaki öğenin üzerine gelin. Bir işlem menüsü açılır. Öğenin üzerine gelin.
  3. Menüden bir işlem seçin ve kaydı sonlandırın. Kaydedici yalnızca tıklama etkinliğini yakalar. Bir işlemi tıklayıp kaydı sonlandırma.
  4. Tekrar oynat. Tekrar oynat'ı tıklayarak kaydı tekrar oynatmayı deneyin. Kaydedici menüdeki öğeye erişemediği için zaman aşımı oluştuğunda yeniden oynatma başarısız olur. Tekrar oynatılamadı.
  5. Tıklama adımının yanındaki üç nokta Üç nokta düğmesi. düğmesini tıklayın ve Önüne adım ekle'yi seçin. Tıklamadan önceki bir adım ekleniyor.
  6. Yeni adımı genişletin. Varsayılan olarak waitForElement türüne sahiptir. type öğesinin yanındaki değeri tıklayıp hover seçeneğini belirleyin. Fareyle üzerine gelme seçeneği.
  7. Ardından, yeni adım için uygun bir seçici ayarlayın. Seç'e dokunun. 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ı. Seçiciyi ayarlama.
  8. Kaydı tekrar oynatmayı deneyin. Eklenen fareyle üzerine gelme adımı sayesinde Kaydedici akışı başarıyla yeniden oynatır. Tekrar başarılı oldu.

Onaylama ekleme

Kayıt sırasında, örneğin HTML özellikleri ve JavaScript özellikleri hakkında iddiada bulunabilirsiniz. Onaylama eklemek için:

  1. Örneğin bu demo sayfasında kayıt başlatın.

  2. Onay ekle'yi tıklayın.

    Onaylama ekle düğmesi.

    Kaydedici, yapılandırılabilir bir waitForElement adımı oluşturur.

  3. Bu adım için seçicileri belirtin.

  4. 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 mülkü. 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.

  5. Kullanıcı akışının geri kalanını kaydedip kaydı durdurun.

  6. Tekrar oynat. Tekrar oyna'yı tıklayın. Bir iddia başarısız olursa Kaydedici, zaman aşımı süresinin ardından 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:

  1. Kopyalamak istediğiniz adımı sağ tıklayın veya yanındaki Üç nokta menü. üç nokta simgesini tıklayın.
  2. Açılır menüden Şunun olarak kopyala: seçeneklerinden birini belirleyin.

Açılır menüden bir kopyalama seçeneği 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 Üç noktalı menü. üç nokta simgesini tıklayıp Adımı kaldır'ı seçin.

Bir adımı kaldırma

Ek olarak Kaydedici, her kaydın başına otomatik olarak iki ayrı adım ekler:

Ayarlanan görüntü alanını ve gezinme adımlarını içeren bir kayıt.

  • Görüntü alanını ayarlayın. Görüntü alanının boyutlarını, ölçeklendirmesini ve diğer özelliklerini kontrol etmenize olanak tanır.
  • Gezinme URL'yi ayarlar ve her oynatma için 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ırma

Bir adımı yapılandırmak için:

  1. Türünü belirtin: click, doubleClick, hover, (giriş) change, keyUp, keyDown, scroll, close, navigate (bir sayfaya), waitForElement, waitForExpression veya setViewport.

    Diğer özellikler type değerine bağlıdır.

  2. Zorunlu özellikleri type'ün altına belirtin.

    Bir adımı yapılandırın.

  3. İ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&#39;a dokunun. 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ımda aşağıdaki isteğe bağlı özellikler bulunabilir:

Adım türlerinin çoğunda kullanılabilen diğer ortak ö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 için Adımlar için zaman aşımlarını ayarlama başlıklı makaleyi inceleyin.
  • selectors: Seçiciler dizisi. Daha fazla bilgi için Seçicileri anlama başlıklı makaleyi inceleyin.

Türe özel özellikler şunlardır:

Tür Mülk Zorunlu Açıklama
click
doubleClick		 offsetX
offsetY		 Evet. Öğe içerik kutusunun sol üst tarafına göre (piksel cinsinden)
click
doubleClick		 button İşaretçi düğmesi: birincil | yardımcı | ikinci | geri | ileri
change value Evet. Nihai değer
keyDown
keyUp		 key Evet. Anahtar adı
scroll x
y		 Piksel cinsinden mutlak kaydırma x ve y konumları, varsayılan 0
navigate url Evet. 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 mülkü ve JSON'daki değeri
waitForElement visible Boole. Öğe DOM'daysa ve görünür durumdaysa (display: none veya visibility: hidden içermiyorsa) doğru değerini döndürür.
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 Evet. Doğru olarak çözülen JavaScript ifadesi
setViewport width
height		 Evet. Görüntü alanının piksel cinsinden genişliği ve yüksekliği
setViewport deviceScaleFactor Evet. Cihaz Piksel Oranı'na (DPR) benzer, varsayılan 1
setViewport isMobile
hasTouch
isLandscape		 Evet. Aşağıdakilerin yapılıp yapılmayacağını belirten Boole işaretleri:
  • Meta etiketini dikkate alın
  • Dokunma etkinliklerini destekleyin
  • Yatay modda görüntüleme
    		•

    Tekrar oynatmayı duraklatan iki özellik vardır:

    • waitForElement mülkü, adımın bir seçici tarafından tanımlanan bir dizi öğenin varlığını (veya yokluğunu) beklemesini sağlar. Örneğin, aşağıdaki adımda sayfadaki .my-class seçicisiyle eşleşen öğe sayısının üçten az olması beklenir.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • waitForExpression özelliği, adımın bir JavaScript ifadesinin doğru olarak çözülmesini beklemesini sağlar. Örneğin, aşağıdaki adım iki saniye duraklatılır ve ardından yeniden oynatmanın devam etmesine izin verecek şekilde true olarak çözülür.

        "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 varsa yeniden oynatma, 5000 milisaniyelik varsayılan zaman aşımını aşan adımlarda 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:

    1. Zaman aşımı kutusunu düzenlenebilir hale getirmek için Tekrar oynatma ayarları'nı tıklayın.

      Tekrar oynatma ayarları.

    2. Zaman aşımı kutusunda, zaman aşımı değerini milisaniye cinsinden ayarlayın.

    3. Ayarlanan varsayılan zaman aşımının işleyişini görmek için Tekrar oynat.Yeniden oynat'ı tıklayın.

    Belirli bir adımdaki varsayılan zaman aşımının üzerine yazmak için:

    1. Adımı genişletin ve Tüme zaman aşımı ekle'yi tıklayın.

      Zaman aşımı ekleyin.

    2. timeout: <value> simgesini tıklayın ve değeri milisaniye cinsinden ayarlayın.

      Zaman aşımı değerini ayarlayın.

    3. Zaman aşımının uygulandığı adımı görmek için Tekrar oynat.Tekrar oynat'ı tıklayın.

    Bir adımdaki zaman aşımının üzerine yazma işlemini kaldırmak için yanındaki SilSil&#39;e dokunun. düğmesini tıklayın.

    Seçicileri anlama

    Yeni bir kayıt başlattığınızda aşağıdakileri yapılandırabilirsiniz:

    Yeni bir kayıt yapılandırılıyor.

    • Seçici özelliği metin kutusuna bir özel test özelliği girin. Kaydedici, yaygın test özelliklerinin 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 seçin:

      • Onay kutusu. CSS. Söz dizimi seçicileri.
      • Onay kutusu. ARIA. Anlamsal seçiciler
      • Onay kutusu. Metin. Varsa en kısa benzersiz metne sahip seçiciler.
      • Onay kutusu. XPath. XML Yol Dili kullanan seçiciler.
      • Onay kutusu. Pierce. CSS'lere benzeyen ancak gölge DOM'sini bozabilen seçiciler.

    Sık kullanılan test seçicileri

    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ız değişen dinamik sınıflar veya kimlikler kullanıyor olabilir.
    • Seçicileriniz kod veya çerçeve değişiklikleri nedeniyle çalışmayabilir.

    Ö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.

    Rastgele adlara sahip otomatik olarak oluşturulan CSS sınıfları.

    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, bu demo sayfasındaki "Cappuccino" öğesini inceleyin ve test özelliklerini görün:

    Tanımlanmış test seçicileri.

    "Cappuccino"yu tıklamayı kaydedin, kayıtta ilgili adımı genişletin ve algılanan seçicileri kontrol edin:

    Ortak test seçici algılandı.

    Kayıt seçiciyi özelleştir

    Yaygın test seçicileri sizin için uygun değilse bir kaydın seçicisini özelleştirebilirsiniz.

    Örneğin, bu demo sayfasında seçici olarak data-automate özelliği kullanılmaktadır. Yeni bir kayıt başlatın ve seçici özelliği olarak data-automate değerini girin.

    Kaydın seçicisini özelleştirin.

    Bir e-posta adresi girin ve seçici değeri ([data-automate=email-address]) gözlemleyin.

    Özel seçici seçiminin sonucu.

    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:
      1. Özel CSS özelliğinizi içeren CSS seçici.
      2. XPath seçicileri
      3. Varsa ARIA seçicisi.
      4. Varsa en kısa benzersiz metne sahip seçici.
    • Belirtilmezse:
      1. Varsa ARIA seçicisi.
      2. Aşağıdaki önceliğe sahip CSS seçiciler:
        1. 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
        2. Kimlik özellikleri (ör. <div id="some_ID">).
        3. Normal CSS seçiciler.
      3. XPath seçicileri
      4. Pierce seçiciler.
      5. Varsa en kısa benzersiz metne sahip seçici.

    Birden fazla normal CSS, XPath ve Pierce seçici olabilir. Kaydedici şunları kaydeder:

    • Her kök düzeyinde, yani varsa iç içe yerleştirilmiş gölge ana makineleri'nde normal CSS ve XPath seçiciler.
    • Tüm gölge kökleri içindeki tüm öğelerde benzersiz olan pierce seçiciler.