В какво е DOM Selenium Структура и пълна форма на WebDriver?

Тези стандарти помагат на разработчиците да изградят уеб страница, без да се притесняват за подробностите за внедряването. Някои от организациите, участващи в стандартизирането на тези интерфейси, са като Mozilla, Apple, Microsoft, Google, Adobe и др. Въпреки това, именно W3C формализира стандарта и го публикува – вижте тук (https://dom.spec.whatwg.org/).

Разделите по-долу обхващат структурата на документа, обектите, които DOM предоставя, и как да ги проверите. Mozilla запазва текущата API справка на Страници на MDN Document Object Model.

Всяко Selenium локаторът се разпознава спрямо същото дърво, така че структурата по-долу е това, което findElement() търсения.

Разбиране на DOM структурата

Ще трябва да разберете структурата на DOM, ако създавате уебсайт, който включва използване на скриптове JavaСкрипт. Разбирането на DOM е още по-критично, ако изпълнявате някоя или всички от следните сложни задачи във вашия уебсайт –

1. Развиванеping съдържание, което се актуализира непрекъснато, без да се обновява цялата страница – например текущата цена на всички акции в портфолиото на вашия потребител
2. Развиванеping разширени потребителски взаимодействия, като например динамично добавяне или промяна на съдържание – например възможността за добавяне на повече акции към портфолиото ви
3. Развиванеping съдържание, което може да се персонализира от потребителя – например възможността за промяна на оформлението, така че портфолиото от взаимни фондове да се показва преди портфолиото от акции
4. Развиванеping адаптивно съдържание във вашия уебсайт, като по този начин той автоматично се адаптира към различни медийни екрани, а именно iPhone, настолен компютър, таблет и др.

Основна HTML страница

<!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>

Как изглежда на DOM PARSER на браузъра?

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

Как получавате достъп до елемента body?

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

Как се казва „Здравей свят“?

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

Накрая целият HTML файл ще изглежда така

отворено Windows Notepad и поставете следното съдържание вътре в него. След това запазете файла като „MyFileNewFile.html“ (уверете се, че името на вашия файл завършва с .html).

<!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>

Накрая просто отворете файла с някой от предпочитаните от вас браузъри и ще видите „Здравей свят!“

Всеки компонент се намира на различно ниво на дървото, започвайки от най-външния.

Прозорец

Window е обектът, който съдържа обекта документ в DOM. Стои отгоре на всичко.

За да стигнете до обект прозорец от даден документ

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

В среда с раздели всеки раздел има свой собствен обект прозорец. Въпреки това, ако някой иска да улови и внедри събития като window.resizeTo и window.resizeBy, те се прилагат за целия прозорец, а не само за раздела.

Свойства на обект Window в DOM

window.localStorage – дава достъп до локалното хранилище на браузъра. Локалното хранилище може да се използва за съхраняване и извличане на данни от сесия.

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

прозорец.отварачка - получава препратката към обекта прозорец, който е отворил този прозорец (чрез щракване върху връзка или чрез метод window.open)

Полезни методи на Window Object

window.alert() – показва предупредителен диалог със съобщение.

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

Има много полезни събития, които обектът на прозореца показва. Ще ги обсъдим в раздела „Събития“ под Предварителни теми

Документ

Документът маркира началото на DOM дърво. Документът е първият възел в DOM. Той има няколко метода и свойства, чийто обхват се прилага за целия документ, като например URL, getElementById, querySelector и др.

Свойства на документен обект в DOM

Document.documentURI намлява Документ.URL – И двете връщат текущото местоположение на документа. Ако обаче документът не е от тип HTML документ.URL няма да работи.

Document.activeElement – Този метод връща елемента в DOM, който е във фокус. Това означава, че ако потребителят е typing В текстово поле, Document.activeElement ще върне препратка към това текстово поле.

Документ.заглавие – Това се използва за четене или задаване на заглавие на даден документ.

Полезни методи на обект на документ

Document.getElementById(идентификатор на низ) – това е най-подходящият и полезен метод за манипулиране на DOM. Използва се за търсене на елемент в DOM дървото използвайки неговия уникален идентификаторТърсенето е чувствително към главни и малки букви, т.е. в следващия пример „ „елементът ” не може да бъде търсин с думи като IntroDiv, introdiv или iNtrodiv и т.н.

<!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(Селектор на низ) – това е друг широко използван метод за избор на още един елемент въз основа на правилата на CSS селектора (ако сте запознати с нотацията $ на jQuery, тя самата използва този метод). Няма да се задълбочаваме много в CSS селекторите. CSS селекторът е набор от правила, чрез които можете да получите списък с подобни елементи (базирани на правилото за селектор). Вече използвахме този метод в раздела „Здравей, свят“.

Element

Диаграмата по-долу показва как обект Element се намира в DOM дървото, под възела document.

Елемент Обект в DOM

Елементът е всеки обект, представен от възел в DOM дърво на документ. Както винаги, самият обект Element е просто възел.tracна свойства, методи и събития между браузър и HTML документ. Съществуват специални видове елементи като HTMLElement, SVGElement, XULElement и др. В този урок ще се съсредоточим само върху HTMLElement.

Свойства на елементен обект в DOM

Element.id – Това свойство може да се използва за задаване или четене на „ID“ (уникален идентификатор) за HTML елемент. ID трябва да бъде уникален сред елементите в DOM дърво. Както бе споменато по-горе, ID се използва и от метода Document.getElementById за избор на конкретен обект Element в DOM дърво.

HTMLElement.contentEditable – свойство contentEditable на елемент определя дали съдържанието на този елемент може да се редактира/променя. Това свойство може да бъде зададено, както е показано в скрипта по-долу. Това свойство може да се използва и за определяне дали даден елемент може да се редактира или не. Опитайте следния скрипт във всяко HTML тяло и ще забележите, че можете да редактирате всяко съдържание на тялото.

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

Element.innerHTML – innerHTML е друго важно свойство, което използваме за достъп до HTML съдържание вътре в елемент. Използва се и за задаване на ново HTML съдържание на елемента. Той се използва широко за задаване/промяна на съдържанието на полетата с данни. Кажете например, че искате вашата уеб страница да актуализира температурата на град Мумбай на всеки час, можете да стартирате скрипта в следния пример на всеки час.

<!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>

Полезни методи на елементен обект

HTMLElement.blur() & HTMLElement.focus() – методите за замъгляване и фокусиране се използват съответно за премахване на фокуса от или придаване на фокус на HTML елемент. Тези методи се използват най-широко за преместване на фокуса на курсора между текстовите полета в уеб страница за въвеждане на данни.

Element.querySelectorAll – Този метод е подобен на вече обсъдения метод querySelector за обекта документ. Този метод обаче ще ограничи търсенето в наследниците на самия елемент.

Забележка за точност: Блокът по-горе е възпроизведен както е публикуван. Работният код използва документ с малка буква „d“ и innerHTML свойство, а не setInnerHTML().

Отстраняване на грешки в DOM

Инструменти за разработчици на Google Chrome, Mozilla Firefox, Internet Explorer (10 или по-нова) или Safari позволяват лесно отстраняване на грешки направо в браузъра. Понякога различните браузъри интерпретират едно и също HTML маркиране по различен начин и това е, когато отстраняването на грешки ви помага да проверите DOM, както е интерпретиран от DOM двигателя на този конкретен браузър.

Бележка за браузъра: Internet Explorer се пенсионира през 2022 г., така че неговите DevTools вече са налични в Microsoft EdgeСтъпките по-долу са непроменени; DevTools се отваря с F12.

Сега, да кажем, че искате да промените стойността на температурата от 26^oC до 32^oC в последния ви пример. Ще предприемем няколко прости стъпки, за да направим това. Екранните снимки, показани тук, са от Mozilla Firefox– но стъпките са същите във всички други браузъри.

1. Отворете MyFileNewFile.html (или каквото и да е име, което сте дали на вашия HTML файл в уроците по-горе) с вашия браузър
2. Използвайте мишката и щракнете с десния бутон върху стойността на температурата 26^oC и щракнете върху „Проверете елемента“

   

3. Обърнете внимание, че елементът, където сте избрали да „Проверите елемента“, се показва маркиран във вашия браузър (прозорецът на програмата за отстраняване на грешки обикновено се появява в долната част на екрана)

   

4. Отворете елемента, като щракнете върху наклонения триъгълник до него

   

5. Изберете какво искате да редактирате и щракнете два пъти върху него. Ще получите опция за промяна на текста. Направете както е указано в анимираното изображение по-долу.

   

6. Забележете промяната в съдържанието на вашата HTML страница. Можете да затворите прозореца за отстраняване на грешки сега.

   Имайте предвид, че вашите промени ще бъдат запазени само за тази сесия. Веднага след като презаредите или опресните (натиснете F5) страницата, промените ще бъдат върнати обратно. Това означава, че не сте променили действителния източник на HTML, а само локалната интерпретация на вашия браузър.

   Като забавно упражнение опитайте да направите следното. Отворете www.facebook.com във вашия браузър и използвайте инструмента за отстраняване на грешки, за да следвате резултата – забележете как пише „Хакнах Facebook“.

Резултатът от това упражнение изглежда като екранната снимка по-долу.

Четенето и редактирането на възли обхваща статични страници. Интерактивните страници също реагират на действията на потребителя.

DOM събития

Какво представляват събитията в DOM?

Събитията са модел на програмиране, при който задействани от потребителя (или задействани от жизнения цикъл на страницата на браузъра) инциденти се излъчват като съобщения. Например, когато една страница приключи със зареждането, тя задейства събитие window.load и по подобен начин, когато потребителят щракне върху бутон, който се задейства събитие за кликване на елемент.

Тези съобщения могат да бъдат прихванати от всеки JavaСценарий код и след това a действие, дефинирано от разработчика може да се вземе. Да речем например, че искате числата на уеб страницата ви да се актуализират само когато потребителят кликне върху бутон. Можете да го постигнете по някой от следните начини –

1. Задайте действие на събитието onclick на HTML елемента
2. Задайте действие на събитието за щракване, като използвате метода addEventListener

Метод 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>

Метод 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

Бележка за стария API: Два отговора по-долу използват document.write(). Той все още работи, но извикване след зареждане на страницата изтрива документа. Предпочитайте console.log() или innerHTML.

В. Как да разбера дали даден елемент съществува или не?

A. Опитайте да потърсите елемента, като използвате някой от селектора и проверете дали върнатият елемент е нула. Вижте примера по-долу –

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

В. Получавам TypeError: document.getElementByID не е функция...

A. Уверете се, че името на метода съвпада точно с API метода. Както във въпроса по-горе – това е getElementById, а не getElementByID.

В. Каква е разликата между деца и childNodes?

A. Децата на метода ни дават колекцията от всички елементи в рамките на извикващия елемент. Върнатата колекция е от тип HTMLCollection. Въпреки това, методът childNodes ни дава колекцията от всички възли в рамките на извикващия елемент. Добавете следните скриптове към нашия пример и вижте разликата –

Методът childNodes връща 14 елемента

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);

Докато методът на децата връща само 7 елемента

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);

В. Получавам Uncaught TypeError: Cannot read property 'innerHTML' of undefined...

A. Уверете се, че екземплярът на HTMLElement, на който извиквате свойството innerHTML, е зададен след първоначалната декларация. Тази грешка обикновено се случва в следния сценарий. Вижте как грешката може да бъде избегната в следващия блок от код...

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';
}

Въпроси и Отговори