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="/8226057-project-scope-management-pmp-tutorial" title="Proje Kapsam Yönetimi: PMP Eğitimi" rel="bookmark"><img src="https://cdn.css-code.org/8657951/project_scope_management_pmp_tutorial.png.webp" loading="lazy" alt="Proje Kapsam Yönetimi: PMP Eğitimi" title="Proje Kapsam Yönetimi: PMP Eğitimi" 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="/8226057-project-scope-management-pmp-tutorial" title="Proje Kapsam Yönetimi: PMP Eğitimi" rel="bookmark">Proje Kapsam Yönetimi: PMP Eğitimi 2024</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="/8226058-project-cost-estimation-and-budget-management-techniques" title="Proje Maliyet Tahmini & Bütçe Yönetim Teknikleri" rel="bookmark"><img src="https://cdn.css-code.org/4500386/project_cost_estimation_ampamp_budget_management_techniques.jpg.webp" loading="lazy" alt="Proje Maliyet Tahmini & Bütçe Yönetim Teknikleri" title="Proje Maliyet Tahmini & Bütçe Yönetim Teknikleri" 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="/8226058-project-cost-estimation-and-budget-management-techniques" title="Proje Maliyet Tahmini & Bütçe Yönetim Teknikleri" rel="bookmark">Proje Maliyet Tahmini & Bütçe Yönetim Teknikleri 2024</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="/8226059-phases-of-project-management-life-cycle" title="Proje Yönetimi Yaşam Döngüsünün Aşamaları" rel="bookmark"><img src="https://cdn.css-code.org/6170577/phases_of_project_management_life_cycle.png.webp" loading="lazy" alt="Proje Yönetimi Yaşam Döngüsünün Aşamaları" title="Proje Yönetimi Yaşam Döngüsünün Aşamaları" 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="/8226059-phases-of-project-management-life-cycle" title="Proje Yönetimi Yaşam Döngüsünün Aşamaları" rel="bookmark">Proje Yönetimi Yaşam Döngüsünün Aşamaları 2024</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="/8004207-167-sponsored-videos-for-jetpack-and-woocommerce" title="# 167: Jetpack ve WooCommerce için Sponsorlu Videolar - CSS Hileleri" rel="bookmark"># 167: Jetpack ve WooCommerce için Sponsorlu Videolar - 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="/8004208-168-css-in-js" title="# 168: JS içinde CSS - CSS Hileleri" rel="bookmark"># 168: JS içinde CSS - 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="/8004209-164-basic-woocommerce-walkthrough" title="# 164: Temel WooCommerce Çözüm Yolu - CSS Hileleri" rel="bookmark"># 164: Temel WooCommerce Çözüm Yolu - 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="/8004210-162-what-the-heck-is-serverless" title="# 162: Sunucusuz Heck Nedir? - CSS Hileleri" rel="bookmark"># 162: Sunucusuz Heck Nedir? - 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="/8004211-166-learn-to-integrate-visual-testing-with-percy" title="# 166: Görsel Testi Percy ile Entegre Etmeyi Öğrenin - CSS Hileleri" rel="bookmark"># 166: Görsel Testi Percy ile Entegre Etmeyi Öğrenin - 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="/8004212-16-creating-the-photoshop-mockup" title="# 16: Photoshop Maketi Oluşturma - CSS Hileleri" rel="bookmark"># 16: Photoshop Maketi Oluşturma - 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="/8004213-165-building-your-backend-with-serverless-functions" title="# 165: Sunucusuz İşlevlerle Arka Ucunuzu Oluşturma - CSS Hileleri" rel="bookmark"># 165: Sunucusuz İşlevlerle Arka Ucunuzu Oluşturma - 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="/8004214-171-movable-stacked-card-row-in-css" title="# 171: CSS'de Taşınabilir Yığılmış Kart Satırı - CSS Hileleri" rel="bookmark"># 171: CSS'de Taşınabilir Yığılmış Kart Satırı - 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="/8004215-170-watch-an-amateur-spin-up-a-react-babel-webpack-css-modules-project" title="# 170: React'in Amatör Dönmesini İzleyin + Babel + Webpack + CSS Modülleri Projesi - CSS Hileleri" rel="bookmark"># 170: React'in Amatör Dönmesini İzleyin + Babel + Webpack + CSS Modülleri Projesi - 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="/8004216-172-hand-svging-a-curved-line" title="# 172: Eğri Bir Çizgiyi Elle SVG Oluşturma - CSS Hileleri" rel="bookmark"># 172: Eğri Bir Çizgiyi Elle SVG Oluşturma - 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="/8004217-163-first-steps-with-serverless" title="# 163: Sunucusuz ile İlk Adımlar - CSS Hileleri" rel="bookmark"># 163: Sunucusuz ile İlk Adımlar - 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="/8004218-173-ooooops-i-guess-were-full-stack-developers-now" title="# 173: Ooooops Sanırım artık tam yığın geliştiricileriz. - CSS Hileleri" rel="bookmark"># 173: Ooooops Sanırım artık tam yığın geliştiricileriz. - 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="/8004219-175-7-things-to-know-about-webflow" title="# 175: Webflow Hakkında Bilmeniz Gereken 7 Şey - CSS Hileleri" rel="bookmark"># 175: Webflow Hakkında Bilmeniz Gereken 7 Şey - 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="/8004220-174-using-local-overrides-in-devtools" title="# 174: DevTools'ta Yerel Geçersiz Kılmaları Kullanma - CSS Hileleri" rel="bookmark"># 174: DevTools'ta Yerel Geçersiz Kılmaları Kullanma - 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="/8004221-17-sliding-doors-button" title="# 17: Sürgülü Kapılar Düğmesi - CSS Hileleri" rel="bookmark"># 17: Sürgülü Kapılar Düğmesi - 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="/8003555-make-non-password-inputs-use-bullets-or-bullet-alternatives" title="Şifresiz Girişleri Madde İşaretleri (veya Madde İşaretleri Alternatifleri) Kullanın - CSS Hileleri" rel="bookmark"><img src="https://cdn.css-code.org/1470803/make_non-password_inputs_use_bullets_or_bullet_alternatives_css-tricks.png.webp" loading="lazy" alt="Şifresiz Girişleri Madde İşaretleri (veya Madde İşaretleri Alternatifleri) Kullanın - CSS Hileleri" title="Şifresiz Girişleri Madde İşaretleri (veya Madde İşaretleri Alternatifleri) Kullanın - 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="/8003555-make-non-password-inputs-use-bullets-or-bullet-alternatives" title="Şifresiz Girişleri Madde İşaretleri (veya Madde İşaretleri Alternatifleri) Kullanın - CSS Hileleri" rel="bookmark">Şifresiz Girişleri Madde İşaretleri (veya Madde İşaretleri Alternatifleri) Kullanın - CSS Hileleri 2024</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="/8003556-picross-style-buttons" title="Picross Tarzı Düğmeler - CSS Hileleri" rel="bookmark"><img src="https://cdn.css-code.org/1282138/picross_style_buttons_css-tricks.png.webp" loading="lazy" alt="Picross Tarzı Düğmeler - CSS Hileleri" title="Picross Tarzı Düğmeler - 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="/8003556-picross-style-buttons" title="Picross Tarzı Düğmeler - CSS Hileleri" rel="bookmark">Picross Tarzı Düğmeler - CSS Hileleri 2024</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="/8003557-prevent-bounce-scroll-in-lion" title="Lion'da Sıçrayan Kaydırmayı Önleyin - CSS Hileleri" rel="bookmark"><img src="https://cdn.css-code.org/7950623/prevent_bounce_scroll_in_lion_css-tricks.png.webp" loading="lazy" alt="Lion'da Sıçrayan Kaydırmayı Önleyin - CSS Hileleri" title="Lion'da Sıçrayan Kaydırmayı Önleyin - 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="/8003557-prevent-bounce-scroll-in-lion" title="Lion'da Sıçrayan Kaydırmayı Önleyin - CSS Hileleri" rel="bookmark">Lion'da Sıçrayan Kaydırmayı Önleyin - CSS Hileleri 2024</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="/8225713-15-best-iphone-data-recovery-software-2021" title="15 EN İYİ iPhone Veri Kurtarma Yazılımı (2021)" rel="bookmark">15 EN İYİ iPhone Veri Kurtarma Yazılımı (2021)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225714-15-best-crypto-exchanges-to-buy-cryptocurrency-in-2021" title="2021'de Cryptocurrency Satın Almak İçin En İyi 15 Kripto Borsası" rel="bookmark">2021'de Cryptocurrency Satın Almak İçin En İyi 15 Kripto Borsası</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225715-20-best-crypto-wallets-top-bitcoin-wallets-exchange-in-2021" title="20 BEST Kripto Cüzdan - 2021'de En İyi Bitcoin Cüzdanları (Değişim)" rel="bookmark">20 BEST Kripto Cüzdan - 2021'de En İyi Bitcoin Cüzdanları (Değişim)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225716-10-best-monitors-for-dual-setup-reviews-for-2021" title="İkili Kurulum için 10 EN İYİ Monitör (2021 için İncelemeler)" rel="bookmark">İkili Kurulum için 10 EN İYİ Monitör (2021 için İncelemeler)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225717-20-best-bitcoin-mining-software-2021" title="20+ EN İYİ Bitcoin Madencilik Yazılımı (2021)" rel="bookmark">20+ EN İYİ Bitcoin Madencilik Yazılımı (2021)</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="/8223691-sap-background-job-processing-sm36-create-schedule-reschedule" title="SAP Arkaplan İş İşleme SM36: Oluşturun, Planlayın, Yeniden Planlayın" rel="bookmark">SAP Arkaplan İş İşleme SM36: Oluşturun, Planlayın, Yeniden Planlayın</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223692-sap-usr40-how-to-set-password-restrictions" title="SAP USR40: Parola Kısıtlamaları nasıl ayarlanır" rel="bookmark">SAP USR40: Parola Kısıtlamaları nasıl ayarlanır</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223693-sap-rsbtcdel2-how-to-delete-a-background-job" title="SAP RSBTCDEL2: Bir Arka Plan İşini Silme" rel="bookmark">SAP RSBTCDEL2: Bir Arka Plan İşini Silme</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223694-sap-sm37-how-to-monitor-a-background-job" title="SAP SM37: Bir Arka Plan İşi Nasıl İzlenir" rel="bookmark">SAP SM37: Bir Arka Plan İşi Nasıl İzlenir</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223695-sap-tms-transport-management-system-tutorial" title="SAP TMS (Taşıma Yönetim Sistemi) Eğitimi" rel="bookmark">SAP TMS (Taşıma Yönetim Sistemi) Eğitimi</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="/8004049-add-category-name-to-body-class" title="Body_class'a Kategori Adı Ekleyin - CSS Hileleri" rel="bookmark">Body_class'a Kategori Adı Ekleyin - CSS Hileleri</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004050-curved-text-along-a-path" title="Yol Boyunca Eğri Metin - CSS Hileleri" rel="bookmark">Yol Boyunca Eğri Metin - CSS Hileleri</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004051-adobe-illustrator-export-options" title="Adobe Illustrator Dışa Aktarma Seçenekleri - CSS Hileleri" rel="bookmark">Adobe Illustrator Dışa Aktarma Seçenekleri - CSS Hileleri</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004052-addremove-contact-info-fields" title="Kişi bilgisi alanları ekleme / kaldırma - CSS Hileleri" rel="bookmark">Kişi bilgisi alanları ekleme / kaldırma - CSS Hileleri</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004053-add-class-to-links-generated-by-next-posts-link-and-previous-posts-link" title="Next_posts_link ve previous_posts_link tarafından oluşturulan bağlantılara sınıf ekleyin - CSS Hileleri" rel="bookmark">Next_posts_link ve previous_posts_link tarafından oluşturulan bağlantılara sınıf ekleyin - CSS Hileleri</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<p>© Copyright tr.css-code.org, 2024 Aralık |
<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 class="link-block">
<ul class="link-list">
<li>
<a href="https://decortips.org" target="_blank" rel="follow">
decortips.org </a>
</li>
<li>
<a href="https://excel-experts.net" target="_blank" rel="follow">
excel-experts.net </a>
</li>
<li>
<a href="https://faqinterior.com" target="_blank" rel="follow">
faqinterior.com </a>
</li>
<li>
<a href="https://friendly-site.com" target="_blank" rel="follow">
friendly-site.com </a>
</li>
<li>
<a href="https://garden-genius.net" target="_blank" rel="follow">
garden-genius.net </a>
</li>
<li>
<a href="https://education-wiki.com" target="_blank" rel="follow">
education-wiki.com </a>
</li>
<li>
<a href="https://planeta-design.com" target="_blank" rel="follow">
planeta-design.com </a>
</li>
</ul>
</div>
<style>
.link-block {
margin: 20px 0;
padding: 10px;
}
.link-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.link-list li {
margin: 0;
padding: 0;
}
.link-list a {
display: block;
padding: 10px 15px;
text-decoration: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
font-size: 14px;
transition: background-color 0.3s ease;
text-align: center;
}
.link-list a:hover {
background-color: #0056b3;
}
@media (max-width: 768px) {
.link-list a {
font-size: 12px;
padding: 8px 10px;
}
}
</style>
</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>
|
