Ö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ı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 Kısayolları göster. Kısayolları göster'i tıklayın.

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

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

  1. Ayarlar. Ayarlar > Kısayollar'ı açın.
  2. Recorder (Kaydedici) bölümüne gidin.
  3. Kısayolları özelleştirme başlıklı makaledeki adımları uygulayın.

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

Geliştirici Araçları Kaydedici panelinin başlığında, düzenlemek için bir kullanıcı işlemleri akışı seçmenize olanak tanıyan bir açılır menü bulunur.

Kaydedici panelinin üst tarafında şunları yapabilirsiniz:

  1. Yeni kayıt eklemeEkle.. Yeni bir kayıt eklemek için + simgesini tıklayın.
  2. Tüm kayıtları görüntüleyinDaha fazla genişlet.. 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. Tüm kayıtları göster.

  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ı makaleye göz atın.

  4. Kaydı içe aktarınDosya yükleme'yi tıklayın.. Yalnızca JSON biçiminde.

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

Ayrıca kaydın adını, yanındaki düzenleme düğmesini Düzenle'yi tıklayın. 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:

  1. Dışa aktarmak istediğiniz kullanıcı akışını açın.
  2. Kaydedici panelinin üst kısmındaki Dosya indirme. Dışa Aktar'ı tıklayın.Dışa aktarma biçimi seçenekleri.
  3. 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.
  4. 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

    Chrome'da Lighthouse raporu açıldı.

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:

  1. Kaydedici panelinin üst kısmındaki İçe aktarDosya yükleme'yi tıklayın. düğmesini tıklayın.Kaydı içe aktarın.
  2. Kaydedilen kullanıcı işlemleri akışını içeren JSON dosyasını seçin.
  3. İçe aktarılan kullanıcı akışını çalıştırmak için Tekrar oynat.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:

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:

  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

Bir kullanıcı işlemleri akışının kodunu çeşitli biçimlerdeki incelemek için:

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

  1. İmleci, kayıttaki herhangi bir adımın yanındaki Adım. dairesinin üzerine getirin. Daire, Kesme noktası. ayrılma noktası simgesine dönüşüyor.
  2. Kesme noktası. 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 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ıt sırasında ve sonrasında, yanındaki Genişlet. 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:

  1. Bu demo sayfasını açıp yeni bir kayıt başlatın. Fareyle bir öğenin üzerine gelindiğinde açılan bir etkinliği kaydetmek için kayıt başlatın.
  2. Görüntü alanında öğenin üzerine gelin. Bir işlem menüsü açılır. Fareyle öğenin üzerine gelin.
  3. Menüden bir işlem seçip kaydı sona erdirin. Kaydedici, yalnızca tıklama etkinliğini kaydeder. Bir işlemin tıklanması ve kaydın sonlandırılması.
  4. Tekrar oynat. 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. Tekrar oynatılamadı.
  5. Tıklama adımının yanındaki Üç nokta düğmesi. üç nokta düğmesini tıklayın ve Önce adımı ekle'yi seçin. Tıklamadan önceki bir adım ekleme.
  6. Yeni adımı genişletin. Varsayılan olarak waitForElement türündedir. type öğesinin yanındaki değeri tıklayın ve hover öğesini seçin. Fareyle üzerine gelme seçiliyor.
  7. Sonra, yeni adım için uygun bir seçici ayarlayın. Seç'i tıklayı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ı. Seçici ayarlanıyor.
  8. Kaydı tekrar oynatmayı deneyin. Fareyle üzerine gelinen adım eklendiğinde Kaydedici, akışı başarıyla yeniden oynatır. Tekrar oynatma başarılı.

Onaylama ekle

Kayıt sırasında, örneğin HTML özellikleri ve JavaScript özellikleri üzerinde hak iddia edebilirsiniz. Onaylama eklemek için:

  1. Örneğin, bu demo sayfasında bir 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 öğ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.

  5. Kullanıcı akışının geri kalanını kaydetme işlemine devam edin ve ardından kaydı durdurun.

  6. Tekrar oynat. 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:

  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üde Farklı 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 adımı sağ tıklayın veya yanındaki Üç nokta menü. üç nokta simgesini tıklayıp Adımı kaldır'ı seçin.

Bir adımı kaldırma.

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

Ayarlanmış görüntü alanına ve gezinme adımlarına sahip bir kayıt.

  • 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:

  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. type öğesinin altında gerekli özellikleri 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 konusuna bakın.

İsteğe bağlı bir özelliği kaldırmak için yanındaki Kaldır. 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:

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		 Evet. Öğ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 Evet. Nihai değer
keyDown
keyUp		 key Evet. Anahtar adı
scroll x
y		 Piksel cinsinden mutlak x ve y kaydırma konumları, varsayılan 0
navigate url Evet. 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 Evet. Doğru olarak çözümlenen 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ılmadığını belirten Boole işaretleri:
  • Meta etiketi göz önünde bulundurun
  • Dokunma etkinliklerini destekleme
  • Yatay modda göster
    		•

    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:

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

      Tekrar oynatma ayarları&#39;na dokunun.

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

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

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

    1. Adımı genişletin ve Zaman aşımı ekle'yi tıklayın.

      Zaman aşımı ekle&#39;yi tıklayın.

    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 gerçekleştiği adımı görmek için Tekrar oynat.Tekrar oynat'ı tıklayın.

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

    Seçicileri anlama

    Yeni bir kayda başladığı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 ö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:

      • Onay kutusu. CSS. Sözdizimsel seçiciler.
      • Onay kutusu. ARIA. Anlamsal seçiciler.
      • Onay kutusu. Metin. Varsa en kısa benzersiz metne sahip seçiciler.
      • Onay kutusu. XPath olur. XML Yol Dili'ni kullanan seçiciler.
      • Onay kutusu. 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.

    Rastgele adlarla otomatik oluşturulan CSS sınıfları.

    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:

    Test seçicileri tanımlandı.

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

    Algılanan ortak test seçici.

    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.

    Kaydın seçiciyi özelleştirin.

    Bir e-posta adresi girin ve seçici değerine ([data-automate=email-address]) dikkat edin.

    Ö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. CSS seçiciyi özel CSS özelliğinizle birlikte kullanın.
      2. XPath seçiciler.
      3. Bulunursa ARIA seçici.
      4. Bulunursa en kısa benzersiz metni içeren bir seçici.
    • Belirtilmezse:
      1. Bulunursa ARIA seçici.
      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çiciler.
      4. Pierce seçiciler.
      5. 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.