DOM nedir? Selenium WebDriver: Yapı, Tam Form

DOM nedir? Selenium Web Sürücüsü?

KARAR in Selenium WebDriver, HTML5 kullanan web geliştirmenin önemli bir bileşenidir ve JavaKomut dosyası. DOM'un tam biçimi Belge Nesne Modeli'dir. DOM bir bilgisayar bilimi kavramı değildir. HTML veya XML'deki belgelere erişmek ve bunları düzenlemek için web geliştiricileri arasında standartlaştırılmış basit bir arayüz kümesidir. JavaSenaryo.

Bu standartlar, geliştiricilerin uygulama ayrıntıları hakkında endişelenmeden bir web sayfası oluşturmasına yardımcı olur. Bu arayüzleri standartlaştırmaya dahil olan kuruluşlardan bazıları Mozilla, Apple, Microsoft, Google, Adobe vb. Ancak, bir standardı resmileştiren ve yayınlayan W3C'dir - buraya bakın (https://dom.spec.whatwg.org/).

Bu eğitim, HTML belge yapısının temel kavramlarını ve bunun nasıl kullanılacağını ele almayı amaçlamaktadır. JavaScript. Bu eğitimde aşağıdaki konuları ele alacağız:

DOM Yapısını Anlamak
DOM'un bileşenleri Selenium
DOM'da hata ayıklama
DOM Olayları
DOM'da sorun giderme

DOM Yapısını Anlamak

Komut dosyası oluşturmayı içeren herhangi bir web sitesi oluşturuyorsanız, DOM yapısını anlamanız gerekecektir. JavaKomut dosyası. Web sitenizde aşağıdaki karmaşık görevlerden herhangi birini veya hepsini yapıyorsanız DOM'u anlamak daha da kritiktir –

Kullanıcı portföyünüzdeki tüm hisse senetlerinin güncel fiyatı gibi, tüm sayfayı yenilemeden sürekli olarak kendini güncelleyen içerik geliştirmek
Portföyünüze daha fazla hisse senedi ekleme yeteneği gibi dinamik olarak içerik ekleme veya değiştirme gibi gelişmiş kullanıcı etkileşimleri geliştirmek
Yatırım fonları portföyünün hisse senedi portföyünden önce görünmesini sağlayacak şekilde düzeni değiştirme yeteneği gibi kullanıcı tarafından özelleştirilebilen içerik geliştirme
Web sitenizde duyarlı içerik geliştirerek web sitenizin iPhone, masaüstü, tablet vb. gibi farklı medya ekranlarına otomatik olarak uyum sağlamasını sağlamak

Temel bir HTML sayfası

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

Bir tarayıcının DOM PARSER'ına nasıl görünüyor?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Body elementine nasıl erişilir?

<script>
    var body = window.document.body;
</script>

“Merhaba Dünya” nasıl denir?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Sonunda HTML dosyasının tamamı şöyle görünecek

Açılış Windows Not defterine gidin ve aşağıdaki içeriği içine yapıştırın. Sonra dosyayı “MyFileNewFile.html” olarak kaydedin (dosya adınızın .html ile bittiğinden emin olun).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Son olarak dosyayı tercih ettiğiniz tarayıcılardan herhangi birini kullanarak açın; “Merhaba Dünya!” göreceksiniz.

DOM'un bileşenleri Selenium

Aşağıda DOM'un ana bileşenleri verilmiştir: Selenium Web Sürücüsü:

Pencere
belge
Eleman

Pencere

Pencere, DOM'daki belge nesnesini içeren nesnedir. Her şeyin üstünde duruyor.

Belirli bir belgeden bir pencere nesnesine ulaşmak için

<script>
      var window = document.defaultView;
</script>

Sekmeli bir ortamda her sekmenin kendi pencere nesnesi vardır. Ancak, window.resizeTo ve window.resizeBy gibi olayları yakalamak ve uygulamak istiyorsanız, bunlar yalnızca sekmeye değil tüm pencereye uygulanır.

DOM'daki Pencere Nesnesinin Özellikleri

window.localStorage – tarayıcının yerel depolama alanına erişim sağlar. Yerel depolama, bir oturumdan veri depolamak ve almak için kullanılabilir.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

pencere açıcı - bu pencereyi açan pencere nesnesinin referansını alır (ya bir bağlantıya tıklayarak ya da window.open yöntemini kullanarak)

Pencere Nesnesinin Faydalı Yöntemleri

window.alert() – bir mesaj içeren bir uyarı iletişim kutusu görüntüler.

<script>
		window.alert('say hello');
</script>

Pencere nesnesinin ortaya çıkardığı birçok yararlı olay vardır. Bunları İleri Konular başlığı altında “Etkinlikler” bölümünde tartışacağız.

belge

Belge bir DOM ağacının başlangıcını işaret eder. Belge, DOM'daki ilk düğümdür. Kapsamı URL, getElementById, querySelector vb. gibi tüm belgeye uygulanan çeşitli yöntem ve özelliklere sahiptir.

DOM'daki Belge Nesnesinin Özellikleri

Document.documentURI ve Belge.URL – Her ikisi de belgenin geçerli konumunu döndürür. Ancak belge HTML Document.URL türünde değilse çalışmayacaktır.

Document.activeElement – Bu yöntem, odakta olan DOM'daki öğeyi döndürür. Bu, bir kullanıcı bir metin kutusuna yazıyorsa, Document.activeElement'in o metin kutusuna referans döndüreceği anlamına gelir.

Belge başlığı – Bu, belirli bir belgenin başlığını okumak veya ayarlamak için kullanılır.

Belge Nesnesinin Yararlı Yöntemleri

Document.getElementById(Dize kimliği) – bu, DOM manipülasyonunda açık ara en alakalı ve kullanışlı yöntemdir. DOM ağacındaki bir öğeyi benzersiz tanımlayıcısını kullanarak aramak için kullanılır. Arama büyük/küçük harfe duyarlıdır, yani aşağıdaki örnekte “ "öğesi IntroDiv veya introdiv veya iNtrodiv vb. kelimeler kullanılarak aranamaz.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(Dize seçici) – bu, CSS seçici kurallarına dayalı olarak bir öğeyi daha seçmek için yaygın olarak kullanılan başka bir yöntemdir (eğer jQuery'nin $ gösterimine aşina iseniz, o da bu yöntemi kullanır). CSS seçicileri çok fazla araştırmayacağız. CSS seçici, benzer öğelerin bir listesini alabileceğiniz kurallar kümesidir (seçici kuralına göre). Bu yöntemi daha önce “Merhaba Dünya” bölümünde kullanmıştık.

Eleman

Öğe, bir belgenin DOM ağacındaki bir düğüm tarafından temsil edilen herhangi bir nesnedir. Her zaman olduğu gibi, Element nesnesinin kendisi, bir tarayıcı ile bir HTML belgesi arasındaki özellikler, yöntemler ve olaylardan oluşan bir sözleşmedir. HTMLElement, SVGElement, XULElement vb. gibi özel Element türleri vardır. Bu eğitimde yalnızca HTMLElement'e odaklanacağız.

DOM'daki Öğe Nesnesinin Özellikleri

Öğe.kimliği – Bu özellik, bir HTML öğesinin “ID”sini (benzersiz bir tanımlayıcı) ayarlamak veya okumak için kullanılabilir. Kimlik, DOM ağacındaki öğeler arasında benzersiz olmalıdır. Daha önce de belirtildiği gibi ID, Document.getElementById yöntemi tarafından DOM ağacındaki belirli bir Element nesnesini seçmek için de kullanılır.

HTMLElement.contentDüzenlenebilir – Bir öğenin contentEditable özelliği, o öğenin içeriğinin düzenlenebilir/değiştirilebilir olup olmadığını belirler. Bu özellik aşağıdaki betikte gösterildiği gibi ayarlanabilir. Bu özellik ayrıca belirli bir öğenin düzenlenebilir olup olmadığını belirlemek için de kullanılabilir. Aşağıdaki betiği herhangi bir HTML gövdesinin içinde deneyin ve gövdenin herhangi bir içeriğini düzenleyebileceğinizi fark edeceksiniz.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML, bir öğenin içindeki HTML içeriğine erişmek için kullandığımız bir diğer önemli özelliktir. Ayrıca öğenin yeni HTML içeriğini ayarlamak için de kullanılır. Veri alanlarının içeriğini ayarlamak/değiştirmek için yaygın olarak kullanılır. Örneğin web sayfanızın Mumbai Şehri sıcaklığını her saat güncellemesini istiyorsanız, aşağıdaki örnekteki betiği her saat çalıştırabilirsiniz.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Element Nesnesinin Faydalı Yöntemleri

HTMLElement.blur() & HTMLElement.focus() – blur ve focus yöntemleri sırasıyla bir HTML öğesinden odağı kaldırmak veya ona odak vermek için kullanılır. Bu yöntemler en yaygın olarak bir veri girişi web sayfasındaki metin kutuları arasında bir imlecin odağını hareket ettirmek için kullanılır.

Element.querySelectorAll – Bu yöntem, belge nesnesi için daha önce tartışılan querySelector yöntemine benzer. Ancak bu yöntem, aramayı öğenin kendisinin soyundan gelenler içinde sınırlayacaktır.

DOM'da hata ayıklama

Geliştirici araçları Google Chrome, Mozilla Firefox, Internet Explorer (10 veya üstü) veya Safari, doğrudan tarayıcının içinde kolayca hata ayıklamaya olanak tanır. Bazen farklı tarayıcılar aynı HTML işaretlemesini farklı yorumlar ve bu, hata ayıklamanın, DOM'u söz konusu tarayıcının DOM motoru tarafından yorumlandığı şekliyle incelemenize yardımcı olduğu zamandır.

Şimdi sıcaklık değerini 26'dan değiştirmek istediğinizi varsayalım.^oC'den 32'a^oSon örneğinizde C. Bunu yapmak için birkaç basit adım atacağız. Burada gösterilen ekran görüntüleri Mozilla'nın Firefox– ancak adımlar diğer tüm tarayıcılarda aynıdır.

Tarayıcınızı kullanarak MyFileNewFile.html'yi (veya yukarıdaki eğitimlerde HTML dosyanıza verdiğiniz adı) açın.
Farenizi kullanın ve sıcaklık değeri 26'ya sağ tıklayın^oC'ye gidin ve “Elementi İncele”ye tıklayın
Tarayıcınızda "Öğeyi Denetle" seçeneğini seçtiğiniz öğenin vurgulanmış olarak gösterildiğine dikkat edin (hata ayıklayıcı penceresi genellikle ekranın altında görünür)
Yanındaki eğik üçgeni tıklayarak öğeyi açın
Düzenlemek istediğinizi seçin ve üzerine çift tıklayın. Metni değiştirme seçeneği elde edeceksiniz. Aşağıdaki animasyonlu resimde belirtildiği gibi yapın.
HTML sayfanızın içeriğindeki değişikliğe dikkat edin. Artık hata ayıklama penceresini kapatabilirsiniz.

Değişikliklerinizin yalnızca bu oturum için kalıcı olacağını unutmayın. Sayfayı yeniden yüklediğinizde veya yenilediğinizde (F5 tuşuna bastığınızda) değişiklikler geri alınacaktır. Bu, gerçek HTML kaynağını değil, yalnızca tarayıcınızın yerel yorumunu değiştirdiğinizi gösterir.

Eğlenceli bir egzersiz olarak aşağıdakileri yapmayı deneyin. Açık www.facebook.com tarayıcınızda hata ayıklama aracını kullanın ve aşağıdaki sonucu alın – “Facebook'u hackledim” demesine dikkat edin.

DOM'da hata ayıklama işlemi

DOM Olayları

DOM'daki Olaylar Nelerdir?

Olaylar, kullanıcı tarafından tetiklenen (veya tarayıcı sayfasının yaşam döngüsü tarafından tetiklenen) olayların mesaj olarak yayınlandığı bir programlama modelidir. Örneğin, bir sayfanın yüklenmesi bittiğinde window.load olayını tetikler ve benzer şekilde kullanıcı bir düğmeye tıkladığında öğesinin tıklama olayı tetiklenir.

Bu mesajlar herhangi bir kişi tarafından ele geçirilebilir. JavaSenaryo kod ve ardından geliştirici tarafından tanımlanan bir eylem gerçekleştirilebilir. Örneğin, web sayfanızdaki sayıların yalnızca kullanıcı bir düğmeye tıkladığında güncellenmesini istediğinizi varsayalım. Bunu aşağıdaki yöntemlerden herhangi biriyle başarabilirsiniz –

HTML öğesinin onclick olayına eylem atayın
addEventListener yöntemini kullanarak click olayına eylem atayın

Yöntem 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Yöntem 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

DOM'da sorun giderme

S. Bir öğenin var olup olmadığını nasıl bilebilirim?

A. Seçicilerden herhangi birini kullanarak öğeyi aramayı deneyin ve döndürülen öğenin boş olup olmadığını kontrol edin. Aşağıdaki örneğe bakın –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

S. TypeError alıyorum: document.getElementByID bir işlev değil…

A. Yöntem adının API yöntemiyle tam olarak eşleştiğinden emin olun. Yukarıdaki soruda olduğu gibi - getElementById'dir ve getElementByID değildir.

S. Çocuklar ve childNode'lar arasındaki fark nedir?

A. children metodu bize çağıran öğenin içindeki tüm öğelerin koleksiyonunu getirir. Döndürülen koleksiyon HTMLCollection türündedir. Ancak, childNodes metodu bize çağıran öğenin içindeki tüm düğümlerin koleksiyonunu getirir. Örneğimize aşağıdaki betikleri ekleyin ve farkı görün –

ChildNodes yöntemi 14 öğe döndürür

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Çocuk yöntemi yalnızca 7 öğe döndürürken

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

S. Yakalanmamış TypeError alıyorum: Tanımlanmamış öğenin 'innerHTML' özelliği okunamıyor…

A. innerHTML özelliğini çağırdığınız HTMLElement örneğinin ilk bildirimden sonra ayarlandığından emin olun. Bu hata genellikle aşağıdaki senaryoda gerçekleşir. Hatanın bir sonraki kod bloğunda nasıl önlenebileceğini görün…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

ÖZET

Bu eğitimde DOM'un ne olduğunu ve dinamik web sayfaları oluşturmak için anlaşılması gereken önemli kavramı öğrendik.
Ayrıca Pencere, Belge ve Öğe gibi DOM öğesi türlerine de değindik.
Her türde mevcut olan bazı yararlı DOM yöntemlerini ve özelliklerini öğrendik.
Çoğu tarayıcının, İnternet'teki herhangi bir web sayfasında oynamak için geliştirici araçları sunduğunu gördük; böylece kendi web sitemizdeki sorunları ayıklamayı ve çözmeyi öğrendik.
DOM Event mekanizmalarına da kısaca değindik.
Son olarak DOM'da birkaç sorun giderme öğesini ele aldık.
İnternet DOM'daki kaynaklarla doludur. En iyi ve güncel referans materyallerinden biri Mozilla'nın geliştirici ağında mevcuttur. Görmek - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model