Selenium IDE'yi Scripts & Komutlar (Onaylama, Doğrulama)

İçindekiler:

Anonim

Mercury Tours web sitesini test edilen web uygulamamız olarak kullanacağız. Bu eğitim için ihtiyacımız olan tüm unsurları içeren bir çevrimiçi uçuş rezervasyon sistemidir. URL'si http://demo.guru99.com/test/newtours/ şeklindedir ve bu bizim Temel URL'miz olacaktır.

Kaydederek Komut Dosyası Oluşturun

Şimdi Selenium IDE'de ilk test komut dosyamızı en yaygın yöntemi kullanarak - kaydederek oluşturalım. Daha sonra betiğimizi oynatma özelliğini kullanarak çalıştıracağız.

Aşama 1

  • Firefox ve Selenium IDE'yi başlatın.
  • Temel URL'mizin değerini yazın: http://demo.guru99.com/test/newtours/.
  • Kayıt düğmesini açın (varsayılan olarak henüz açılmamışsa).
Adım 2

Firefox'ta http://demo.guru99.com/test/newtours/ adresine gidin. Firefox sizi aşağıda gösterilene benzer sayfaya götürmelidir.
Aşama 3
  • Sol üst köşedeki Mercury Tours logosu gibi, sayfadaki herhangi bir boş alana sağ tıklayın. Bu Selenium IDE içerik menüsünü getirecektir. Not: Köprü bağlantılı herhangi bir nesneye veya resme tıklamayın
  • "Mevcut Komutları Göster" seçeneğini seçin.
  • Ardından, "assertTitle exact: Welcome: Mercury Tours" u seçin. Bu, sayfa başlığının doğru olmasını sağlayan bir komuttur.
4. adım
  • Mercury Tours’un "Kullanıcı Adı" metin kutusuna geçersiz bir kullanıcı adı, "geçersizUNN" yazın.
  • "Parola" metin kutusuna geçersiz bir parola, "geçersiz PWD" yazın.
Adım 5
  • "Oturum Aç" düğmesine tıklayın. Firefox sizi bu sayfaya götürmelidir.
6. Adım

Kaydı durdurmak için kayıt düğmesini kapatın. Komut dosyanız şimdi aşağıda gösterilen gibi görünmelidir.
7. Adım

Artık test komut dosyamızla işimiz bittiğine göre, onu bir test senaryosunda kaydedeceğiz. Dosya menüsünde, "Test Durumunu Kaydet" i seçin. Alternatif olarak, Ctrl + S tuşlarına da basabilirsiniz.
8. Adım
  • İstediğiniz konumu seçin ve ardından Test Senaryosunu "Invalid_login" olarak adlandırın.
  • "Kaydet" düğmesini tıklayın.
9. Adım.

Dosyanın HTML olarak kaydedildiğine dikkat edin.

10. adım.

Selenium IDE'ye geri dönün ve tüm betiği yürütmek için Playback düğmesine tıklayın. Selenium IDE her şeyi kusursuz bir şekilde kopyalayabilmelidir.

Selenium Komutlarına Giriş - Selenese

  • Selenese komutları en fazla iki parametreye sahip olabilir: hedef ve değer.
  • Parametreler her zaman gerekli değildir. Komutun kaç kişiye ihtiyaç duyacağına bağlıdır.

3 Tür Komut

Hareketler

Bunlar, doğrudan sayfa öğeleriyle etkileşime giren komutlardır.

Örnek: "tıklama" komutu, tıkladığınız öğeyle doğrudan etkileşimde bulunduğunuz için bir eylemdir.

"Tür" komutu da bir eylemdir çünkü değerleri bir metin kutusuna koyarsınız ve metin kutusu karşılığında bunları size gösterir. Siz ve metin kutusu arasında iki yönlü bir etkileşim vardır.

Erişimciler

Değerleri bir değişkene kaydetmenize izin veren komutlardır.

Örnek: "storeTitle" komutu bir erişimcidir çünkü yalnızca sayfa başlığını "okur" ve onu bir değişkene kaydeder. Sayfadaki herhangi bir öğe ile etkileşime girmez.

İddialar

Belirli bir koşulun karşılanıp karşılanmadığını doğrulayan komutlardır.

3 Tür İddialar

  • İddia et . Bir "assert" komutu başarısız olduğunda, test hemen durdurulur.
  • Doğrulayın . "Doğrula" komutu başarısız olduğunda, Selenium IDE bu hatayı günlüğe kaydeder ve test yürütmeye devam eder.
  • WaitFor . Bir sonraki komuta geçmeden önce, "waitFor" komutları önce belirli bir koşulun gerçekleşmesini bekleyecektir.
    • Bekleme süresi içerisinde durum gerçekleşirse adım geçilir.
    • Koşul gerçekleşmezse adım başarısız olur. Hata günlüğe kaydedilir ve test yürütmesi bir sonraki komutla devam eder.
    • Varsayılan olarak, zaman aşımı değeri 30 saniyeye ayarlanmıştır. Bunu, Genel sekmesi altındaki Selenium IDE Seçenekleri iletişim kutusunda değiştirebilirsiniz.

Onaylama ve Doğrulama

Ortak Komutlar

Komut Parametre Sayısı Açıklama
açık 0-2

URL kullanarak bir sayfa açar.
click / clickAndWait 1

Belirli bir öğeye tıklar.
type / typeKeys 2

Bir dizi karakter yazar.
validTitle / assertTitle 1

Gerçek sayfa başlığını beklenen bir değerle karşılaştırır.
validTextPresent 1

Sayfada belirli bir metnin bulunup bulunmadığını kontrol eder.
validElementPresent 1

Belirli bir elementin varlığını kontrol eder.
validTable 2

Bir tablonun içeriğini beklenen değerlerle karşılaştırır.
waitForPageToLoad 1

Sayfa tamamen yüklenene kadar yürütmeyi duraklatır.
waitForElementPresent 1

Belirtilen öğe mevcut olana kadar yürütmeyi duraklatır.

Firebug ile Manuel Olarak Komut Dosyası Oluşturun

Şimdi, komutları yazarak aynı test senaryosunu manuel olarak yeniden oluşturacağız. Bu sefer Firebug kullanmamız gerekecek.

Aşama 1
  • Firefox ve Selenium IDE'yi açın.
  • Temel URL'yi yazın (http://demo.guru99.com/test/newtours/).
  • Kayıt düğmesi KAPALI olmalıdır.
Adım 2: Editör'de en üstteki boş satıra tıklayın.

Komut metin kutusuna "aç" yazın ve Enter tuşuna basın.
Aşama 3
  • Firefox'u temel URL'mize gidin ve Firebug'ı etkinleştirin
  • Selenium IDE Editor bölmesinde, ikinci satırı ("aç" komutunun altındaki satır) seçin ve Komut kutusuna "assertTitle" yazarak ikinci komutu oluşturun.
  • Otomatik tamamlama özelliğini kullanmaktan çekinmeyin.
4. adım
  • Firebug'da, etiketini görüntülemek için <head> etiketini genişletin.</li> <li><title> etiketinin ("Hoş Geldiniz: Mercury Turları") değerine tıklayın ve bunu Editör'deki Hedef alanına yapıştırın.</li> </ul> </td> </tr> <tr> <td><strong>Adım 5</strong> <ul> <li>Üçüncü komutu oluşturmak için, Editör'deki üçüncü boş satıra tıklayın ve Komut metin kutusuna "yazın" yazın.</li> <li>Firebug'da "İncele" düğmesini tıklayın.</li> </ul> </td> </tr> <tr> <td>Kullanıcı Adı metin kutusuna tıklayın. Firebug'ın size o öğenin HTML kodunu otomatik olarak gösterdiğine dikkat edin.</td> </tr> <tr> <td><strong>6. Adım</strong> <p>Kullanıcı Adı metin kutusunun bir kimliği olmadığına, ancak bir NAME özelliğine sahip olduğuna dikkat edin. Bu nedenle, İSMİNİ yer belirleyici olarak kullanacağız. NAME değerini kopyalayın ve Selenium IDE'deki Hedef alanına yapıştırın.</p> <p>Yine Hedef metin kutusunda, Selenium IDE'nin NAME özniteliği "userName" olan bir öğeyi hedeflemesi gerektiğini belirten "name =" ile "userName" ön eki.</p> <p>Selenium IDE'nin Değer metin kutusuna "geçersiz UN" yazın. Test komut dosyanız şimdi aşağıdaki resim gibi görünmelidir. Üçüncü emirle işimiz bitti. Not: invalidUN yerine, herhangi başka bir metin dizesi girebilirsiniz. Ancak Selenium IDE büyük / küçük harfe duyarlıdır ve değerleri / nitelikleri aynen uygulamadaki gibi yazarsınız.</p> </td> </tr> <tr> <td><strong>7. Adım</strong> <ul> <li>Dördüncü komutu oluşturmak için, Komut metin kutusuna "yazın" yazın.</li> <li>Yine, "Şifre" metin kutusu için yer bulucuyu almak için Firebug'ın "İncele" düğmesini kullanın.</li> </ul> <ul> <li> <p>NAME özelliğini ("şifre") Hedef alana yapıştırın ve önüne "name =" ekleyin</p> </li> <li> <p>Selenium IDE'deki Değer alanına "geçersizPW" yazın. Test komut dosyanızın şimdi aşağıdaki resimdeki gibi görünmesi gerekir.</p> </li> </ul> </td> </tr> <tr> <td><strong>8. Adım</strong> <ul> <li>Beşinci komut için, Selenium IDE'deki Komut metin kutusuna "clickAndWait" yazın.</li> <li>"Oturum Aç" düğmesinin yerini bulmak için Firebug'ın "İncele" düğmesini kullanın.</li> </ul> <ul> <li>NAME özniteliğinin değerini ("login") Hedef metin kutusuna yapıştırın ve önüne "name =" ekleyin.</li> <li>Test komut dosyanızın şimdi aşağıdaki resimdeki gibi görünmesi gerekir.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Adım 9:</strong> Test olayını önceki bölümde yaptığımız gibi kaydedin.</p> <a id="menu-6"></a> <h2>Bul Düğmesini Kullanma</h2> <p><strong>Selenium IDE'deki Bul düğmesi, Hedef metin kutusuna koyduğumuz şeyin gerçekten doğru UI öğesi olup olmadığını doğrulamak için kullanılır.</strong></p> <p>Önceki bölümlerde oluşturduğumuz Invalid_login test durumunu kullanalım. Hedef girişi olan herhangi bir komuta, örneğin üçüncü komuta tıklayın.</p> <p>Bul düğmesine tıklayın. Mercury Tours sayfasındaki Kullanıcı Adı metin kutusunun bir saniyeliğine vurgulandığına dikkat edin.</p> <p>Bu, Selenium IDE'nin beklenen öğeyi doğru bir şekilde algılayıp erişebildiğini gösterir. Bul düğmesi farklı bir öğeyi vurguladıysa veya hiçbir öğeyi vurgulamıyorsa, komut dosyanızda bir sorun olması gerekir.</p> <a id="menu-7"></a> <h2>Komutu çalıştır</h2> <p><strong>Bu, tüm test senaryosunu çalıştırmadan herhangi bir tek komutu yürütmenize olanak tanır</strong> . Yürütmek istediğiniz satıra tıklayın ve ardından menü çubuğundan "Eylemler> Bu komutu çalıştır" seçeneğine tıklayın veya klavyenizdeki "X" tuşuna basın.</p> <p><strong>Adım 1.</strong> Tarayıcınızın Mercury Tours ana sayfasında olduğundan emin olun. Yürütmek istediğiniz komuta tıklayın. Bu örnekte, "type | userName | geçersizUN" satırına tıklayın.</p> <p><strong>Adım 2.</strong> Klavyenizdeki "X" tuşuna basın.</p> <p><strong>3. Adım.</strong> Kullanıcı adı metin kutusunun "geçersizUN" metniyle doldurulduğunu gözlemleyin.</p> <p><strong>Komutların bu şekilde yürütülmesi, Firefox'un şu anda görüntülediği sayfaya büyük ölçüde bağlıdır</strong> . Bu, yukarıdaki örneği Mercury Tours yerine Google ana sayfasının görüntülendiği şekilde denerseniz, Google'ın ana sayfasında "userName" özelliğine sahip bir metin kutusu olmadığı için adımınızın başarısız olacağı anlamına gelir.</p> <a id="menu-8"></a> <h2>Başlangıç ​​noktası</h2> <p><strong>Başlangıç ​​noktası, Selenium IDE'ye yürütmenin hangi satırlarda başlayacağını söyleyen bir göstergedir</strong> . <strong>Kısayol tuşu "S" dir.</strong></p> <p>Yukarıdaki örnekte, oynatma üçüncü satırda başlayacaktır (yazın | şifre | geçersizPW). <strong>Tek bir test komut dosyasında yalnızca bir başlangıç ​​noktanız olabilir.</strong></p> <p>Başlangıç ​​noktası, o anda görüntülenen sayfaya bağlı olmaları bakımından Execute Command'a benzer. Yanlış sayfadaysanız başlangıç ​​noktası başarısız olur.</p> <a id="menu-9"></a> <h2>Kesme noktaları</h2> <p>Kesme noktaları, Selenium IDE'ye testi otomatik olarak nerede duraklatacağını söyleyen göstergelerdir. <strong>Kısayol tuşu "B" dir.</strong></p> <p>Sarı vurgu, geçerli adımın beklemede olduğu anlamına gelir. Bu, Selenium IDE'nin bu adımda yürütmeyi duraklattığını kanıtlıyor. <strong>Tek bir test senaryosunda birden fazla kesme noktasına sahip olabilirsiniz.</strong></p> <a id="menu-10"></a> <h2>Adım</h2> <p>Test durumunu duraklattıktan sonra sonraki komutları birer birer yürütmenize olanak tanır. Önceki "Kesme Noktaları" bölümündeki senaryoyu kullanalım.</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>"Adım" ı tıklamadan önce.</strong></p> <p>Test senaryosu "clickAndWait | oturum aç" satırında durur.</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>"Adım" ı tıkladıktan sonra.</strong></p> <p>"ClickAndWait | oturum açma" satırı çalıştırılır ve bir sonraki komuta (doğrulamaTitle | Sign-on: Mercury Tours) kadar duraklar.</p> <p>Burada kesme noktası olmamasına rağmen sonraki satırın duraklatıldığına dikkat edin. Bu, Adım özelliğinin ana amacıdır - her adımdan sonra sonucu incelemek için size daha fazla zaman vermek için sonraki komutları birer birer yürütür.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Kaynak Görünümünde Diğer Biçimleri Kullanırken Dikkat Edilmesi Gereken Önemli Noktalar</h2> <p><strong>Selenium IDE yalnızca HTML ile iyi çalışır - diğer formatlar hala deneysel moddadır</strong> . Öyle <strong>tavsiye DEĞİL</strong> oluşturmak veya kararlı hale getirmek için gerekli bir sürü iş hala var çünkü düzenleme testleri kaynak görünümlerinde diğer biçimleri kullanarak. 1.9.1 sürümünden itibaren bilinen hatalar aşağıdadır.</p> <ul> <li>HTML'ye dönmediğiniz sürece kayıttan yürütme gerçekleştiremez veya Tablo Görünümüne geri dönemezsiniz.</li> <li>Kaynak koda güvenli bir şekilde komut eklemenin tek yolu onları kaydetmektir.</li> <li>Kaynak kodunu manuel olarak değiştirdiğinizde, başka bir biçime geçtiğinizde tümü kaybolacaktır.</li> <li>Kaynak Görünümü'ndeyken test durumunuzu kaydedebilmenize rağmen, Selenium IDE onu açamayacaktır.</li> </ul> <p><strong>Selenese testlerini dönüştürmenin önerilen yolu, Kaynak Görünümü yerine Dosya menüsü altındaki "Test Durumunu Farklı Aktar…" seçeneğini kullanmaktır.</strong></p> <a id="menu-12"></a> <h2>Özet</h2> <ul> <li>Test komut dosyaları, komutları ve parametreleri manuel olarak kaydederek veya yazarak oluşturulabilir.</li> <li>Manuel olarak komut dosyaları oluştururken, bulucuyu almak için Firebug kullanılır.</li> <li>Bul düğmesi, komutun doğru öğeye erişip erişemediğini kontrol etmek için kullanılır.</li> <li>Tablo Görünümü bir test komut dosyasını tablo biçiminde görüntülerken Kaynak Görünümü bunu HTML biçiminde görüntüler.</li> <li>Kaynak Görünümünü HTML olmayan bir biçime değiştirmek hâlâ deneyseldir.</li> <li>Diğer formatlarda testler oluştururken Kaynak Görünümünü kullanmayın. Bunun yerine Dışa aktarma özelliklerini kullanın.</li> <li>Parametreler her zaman gerekli değildir. Komuta bağlıdır.</li> <li>Üç tür komut vardır:</li> <ul> <li>Eylemler - doğrudan sayfa öğeleriyle etkileşim kurar</li> <li>Erişimciler - bir öğe özelliğini "okur" ve bir değişkende saklar</li> <li>İddialar - gerçek bir değeri beklenen bir değerle karşılaştırır</li> </ul> <li>İddiaların üç türü vardır:</li> <ul> <li>İddia - başarısızlık durumunda, sonraki adımlar artık yürütülmez</li> <li>Doğrula - başarısızlık durumunda, sonraki adımlar hala yürütülür.</li> <li>WaitFor - belirtilen koşul, zaman aşımı süresi içinde gerçekleşirse geçer; aksi takdirde başarısız olur</li> </ul> <li>En yaygın komutlar şunlardır:</li> <ul> <li>açık</li> <li>click / clickAndWait</li> <li>type / typeKeys</li> <li>validTitle / assertTitle</li> <li>validTextPresent</li> <li>validElementPresent</li> <li>validTable</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Popüler Mesajlar</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224613-how-to-send-email-using-codeigniter" title="CodeIgniter kullanarak nasıl e-posta gönderilir" rel="bookmark"><img src="https://cdn.css-code.org/1154375/how_to_send_email_using_codeigniter.png.webp" loading="lazy" alt="CodeIgniter kullanarak nasıl e-posta gönderilir" title="CodeIgniter kullanarak nasıl e-posta gönderilir" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224613-how-to-send-email-using-codeigniter" title="CodeIgniter kullanarak nasıl e-posta gönderilir" rel="bookmark">CodeIgniter kullanarak nasıl e-posta gönderilir 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224614-difference-between-cookie-and-session" title="Çerez ve Oturum Arasındaki Fark" rel="bookmark"><img src="https://cdn.css-code.org/4804872/difference_between_cookie_and_session.jpg.webp" loading="lazy" alt="Çerez ve Oturum Arasındaki Fark" title="Çerez ve Oturum Arasındaki Fark" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224614-difference-between-cookie-and-session" title="Çerez ve Oturum Arasındaki Fark" rel="bookmark">Çerez ve Oturum Arasındaki Fark 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224615-laravel-vs-codeigniter-which-is-better" title="Laravel vs CodeIgniter: Hangisi Daha İyi?" rel="bookmark"><img src="https://cdn.css-code.org/3399576/laravel_vs_codeigniter_which_is_better_.png.webp" loading="lazy" alt="Laravel vs CodeIgniter: Hangisi Daha İyi?" title="Laravel vs CodeIgniter: Hangisi Daha İyi?" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224615-laravel-vs-codeigniter-which-is-better" title="Laravel vs CodeIgniter: Hangisi Daha İyi?" rel="bookmark">Laravel vs CodeIgniter: Hangisi Daha İyi? 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Ayın En iyi yorumlar</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003659-iphone-calling-and-texting-links" title="IPhone Arama ve Mesaj Gönderme Bağlantıları - CSS Hileleri" rel="bookmark">IPhone Arama ve Mesaj Gönderme Bağlantıları - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003660-html5-page-structure" title="HTML5 Sayfa Yapısı - CSS Hileleri" rel="bookmark">HTML5 Sayfa Yapısı - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003661-keep-flash-behind-other-elements" title="Flash'ı Diğer Öğelerin Gerisinde Tutun - CSS Hileleri" rel="bookmark">Flash'ı Diğer Öğelerin Gerisinde Tutun - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003662-lorem-ipsum-paragraph" title="Lorem Ipsum Paragrafı - CSS Hileleri" rel="bookmark">Lorem Ipsum Paragrafı - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003663-left-and-right-halves-layout" title="Sol ve Sağ Yarı Düzeni - CSS Hileleri" rel="bookmark">Sol ve Sağ Yarı Düzeni - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003664-make-ie-6-crash" title="IE 6'yı Kilitleyin - CSS Hileleri" rel="bookmark">IE 6'yı Kilitleyin - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003665-mailto-links" title="Mailto Bağlantıları - CSS Hileleri" rel="bookmark">Mailto Bağlantıları - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003666-html5-article-structure-with-hnews" title="HNews ile HTML5 Makale Yapısı - CSS Hileleri" rel="bookmark">HNews ile HTML5 Makale Yapısı - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003668-meta-refresh" title="Meta Yenileme - CSS Hileleri" rel="bookmark">Meta Yenileme - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003669-meta-tag-for-forcing-ie-8-to-behave-like-ie-7" title="IE 8'i IE 7 Gibi Davranmaya Zorlayan Meta Etiket - CSS Hileleri" rel="bookmark">IE 8'i IE 7 Gibi Davranmaya Zorlayan Meta Etiket - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003670-meta-tag-to-prevent-search-engine-bots" title="Arama Motoru Botlarını Önlemek İçin Meta Etiket - CSS Hileleri" rel="bookmark">Arama Motoru Botlarını Önlemek İçin Meta Etiket - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003671-meta-tags-for-instructing-search-bots" title="Arama Robotlarına Yönelik Meta Etiketleri - CSS Hileleri" rel="bookmark">Arama Robotlarına Yönelik Meta Etiketleri - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003672-multiple-file-input" title="Çoklu Dosya Girişi - CSS Hileleri" rel="bookmark">Çoklu Dosya Girişi - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003673-proper-tags-for-displaying-content-edits" title="İçerik Düzenlemelerini Görüntülemek İçin Uygun Etiketler - CSS Hileleri" rel="bookmark">İçerik Düzenlemelerini Görüntülemek İçin Uygun Etiketler - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003674-post-data-to-an-iframe" title="Verileri bir Iframe'e Gönderin - CSS Hileleri" rel="bookmark">Verileri bir Iframe'e Gönderin - CSS Hileleri</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">En Makaleler</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003051-text-combine-upright" title="Dik metin birleştirme - CSS Hileleri" rel="bookmark"><img src="https://cdn.css-code.org/7425163/text-combine-upright_css-tricks.png.webp" loading="lazy" alt="Dik metin birleştirme - CSS Hileleri" title="Dik metin birleştirme - CSS Hileleri" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003051-text-combine-upright" title="Dik metin birleştirme - CSS Hileleri" rel="bookmark">Dik metin birleştirme - CSS Hileleri 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003052-text-indent" title="Metin girintisi - CSS Hileleri" rel="bookmark"><img src="https://cdn.css-code.org/1168268/text-indent_css-tricks.png.webp" loading="lazy" alt="Metin girintisi - CSS Hileleri" title="Metin girintisi - CSS Hileleri" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003052-text-indent" title="Metin girintisi - CSS Hileleri" rel="bookmark">Metin girintisi - CSS Hileleri 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003053-text-decoration-skip-ink" title="Metin dekorasyon-atlama mürekkebi - CSS Hileleri" rel="bookmark"><img src="https://cdn.css-code.org/4511046/text-decoration-skip-ink_css-tricks.png.webp" loading="lazy" alt="Metin dekorasyon-atlama mürekkebi - CSS Hileleri" title="Metin dekorasyon-atlama mürekkebi - CSS Hileleri" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003053-text-decoration-skip-ink" title="Metin dekorasyon-atlama mürekkebi - CSS Hileleri" rel="bookmark">Metin dekorasyon-atlama mürekkebi - CSS Hileleri 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Popüler Mesajlar</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223921-how-to-maintain-exchange-rates-in-sap" title="SAP'de Döviz Kurları Nasıl Korunur?" rel="bookmark">SAP'de Döviz Kurları Nasıl Korunur?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223922-sap-correspondence-tutorial-configuration-generation-printing-and-email" title="SAP Yazışma Eğitimi: Konfigürasyon, Üretim, Baskı ve amp; E-posta adresi" rel="bookmark">SAP Yazışma Eğitimi: Konfigürasyon, Üretim, Baskı ve amp; E-posta adresi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223923-top-50-sap-fico-interview-questions-and-answers" title="İlk 50 SAP FICO Mülakat Sorusu & Yanıtlar" rel="bookmark">İlk 50 SAP FICO Mülakat Sorusu & Yanıtlar</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223925-sap-fico-pdf-fi-module-material-download" title="SAP FICO PDF: FI Modülü Malzemesi İndir" rel="bookmark">SAP FICO PDF: FI Modülü Malzemesi İndir</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223926-sap-hana-sql-learn-in-10-minutes" title="SAP HANA SQL: 10 Dakikada Öğrenin" rel="bookmark">SAP HANA SQL: 10 Dakikada Öğrenin</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Editörün Seçimi</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225746-25-best-landing-page-builder-tools-in-2021-freepaid" title="2021'in EN İYİ 25 Açılış Sayfası Oluşturucu Aracı (Ücretsiz / Ücretli)" rel="bookmark">2021'in EN İYİ 25 Açılış Sayfası Oluşturucu Aracı (Ücretsiz / Ücretli)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225747-25-best-grammar-checker-tools-in-2021-free-and-paid" title="2021'de En İyi 25 Dilbilgisi Denetleyicisi Aracı (Ücretsiz ve Ücretli)" rel="bookmark">2021'de En İyi 25 Dilbilgisi Denetleyicisi Aracı (Ücretsiz ve Ücretli)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225748-10-best-grammarly-alternatives-in-2021-free-and-paid" title="2021'de En İyi 10 Dilbilgisi Alternatifi (Ücretsiz ve Ücretli)" rel="bookmark">2021'de En İyi 10 Dilbilgisi Alternatifi (Ücretsiz ve Ücretli)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225749-10-best-free-plagiarism-checker-2021-reviews" title="10+ En İyi ÜCRETSİZ İntihal Denetleyicisi (2021 İnceleme)" rel="bookmark">10+ En İyi ÜCRETSİZ İntihal Denetleyicisi (2021 İnceleme)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225751-how-to-setup-a-professional-email-address-with-bluehost" title="BlueHost ile Profesyonel E-posta Adresi Nasıl Kurulur" rel="bookmark">BlueHost ile Profesyonel E-posta Adresi Nasıl Kurulur</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">En Makaleler</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004229-186-notion-for-web-development-teams" title="# 186: Web Geliştirme Ekipleri için Fikir - CSS Hileleri" rel="bookmark"># 186: Web Geliştirme Ekipleri için Fikir - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004230-183-art-directing-images-the-picture-element-and-image-cdns" title="# 183: Sanat Yönetmenliği Görüntüleri, Resim Öğesi ve Görüntü CDN'leri - CSS Hileleri" rel="bookmark"># 183: Sanat Yönetmenliği Görüntüleri, Resim Öğesi ve Görüntü CDN'leri - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004231-185-playing-with-css-masks" title="# 185: CSS Maskeleriyle Oynamak - CSS Hileleri" rel="bookmark"># 185: CSS Maskeleriyle Oynamak - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004232-18-introduction-to-the-band-website-template" title="# 18: Grup Web Sitesi Şablonuna Giriş - CSS Hileleri" rel="bookmark"># 18: Grup Web Sitesi Şablonuna Giriş - CSS Hileleri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004233-184-inside-and-aligned-lists" title="# 184: İçi ve Hizalanmış Listeler - CSS Hileleri" rel="bookmark"># 184: İçi ve Hizalanmış Listeler - CSS Hileleri</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright tr.css-code.org, 2025 Temmuz | <a href="https://tr.css-code.org/about-site" title="Site Hakkında">Site Hakkında</a> | <a href="https://tr.css-code.org/contacts" title="Temas">Temas</a> | <a href="https://tr.css-code.org/privacy-policy" title="Gizlilik Politikası">Gizlilik Politikası</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>