Меню

Как да намерим елементи в браузърите Chrome и IE за изграждане на скриптове за селен - Урок № 7 за селен

how locate elements chrome

Опитайте Нашия Инструмент За Премахване На Проблемите

Това е урок № 7 в нашата серия за онлайн обучение на Selenium. Ако искате да проверите всички уроци по Selenium от тази серия, моля, проверете тази страница .

В предишния урок се опитахме да хвърлим светлина върху различни видове локатори в Selenium и техните механизми за локализиране за изграждане на тестови скриптове. Урокът основно се състои от кратко въвеждане на различни типове локатори като ID, класове, Xpaths, текстове на връзки , CSS селектори и т.н. и тяхната идентификация.

Продължавайки напред със следващия урок, бихме се възползвали от възможността да ви запознаем с разширение на стратегиите за локализиране. По този начин в следващ урок, ще проучим механизма за намиране на уеб елементи в Google Chrome и Internet Explorer.

Намерете елементи в браузърите Chrome и IE

Тъй като всички ние добре осъзнаваме факта, че има бърз растеж в потребителската база в интернет, по този начин заинтересованите страни и програмистите създават уеб приложения, които вероятно ще работят в повечето браузъри.

По този начин си представете ситуация, при която вашето уеб приложение не поддържа Firefox, но работи добре за Chrome и Internet Explorer.

Сега как ще автоматизирате такова приложение, използвайки Selenium? Или да бъдем конкретни как ще намирате уеб елементи в Chrome и Internet Explorer. По този начин отговорът предстои в този урок.

как да отворите разширението на JSON файл

Какво ще научите:

Намиране на уеб елементи в Google Chrome

Нека започнем с разбирането на стратегиите за локализиране в Google Chrome.

Подобно на Firebug във Firefox, Google Chrome има своите собствен инструмент за разработчици които могат да се използват за идентифициране и намиране на уеб елементи на уеб страницата. За разлика от firebug, от потребителя не се изисква да изтегля или инсталира отделен плъгин; инструментът за разработчици се предлага в комплект с Google Chrome.

Следвайте стъпките по-долу, за да намерите уеб елементи с помощта на инструмента за разработчици на Chrome:

Етап 1: Основната стъпка е стартирането на инструмента за разработчици на Google Chrome. Натиснете F12, за да стартирате инструмента. Потребителят ще може да види нещо като екрана по-долу.

Селенов сценарий 1

Обърнете внимание, че раздел „Елемент“ е подчертан на горната екранна снимка. По този начин раздела елемент е този, който показва всички HTML свойства, принадлежащи към текущата уеб страница. Придвижете се до раздела „Елемент“, ако той не е отворен по подразбиране при стартирането.

Можете също така да стартирате инструмента за разработчици, като щракнете с десния бутон на мишката навсякъде в уеб страницата и като изберете „Inspect element“, който е много подобен на този при проверката на firebug.

Стъпка 2: Следващата стъпка е да намерите желания обект в уеб страницата. Един от начините да направите същото е да щракнете с десния бутон върху желания уеб елемент и да проверите. Свойството HTML, принадлежащо на този уеб елемент, ще бъде подчертано в инструмента за разработчици. Друг начин е да задържите курсора на мишката върху свойствата на HTML и съответстващият уеб елемент ще бъде подчертан. По този начин, по този начин потребителят може да намери идентификатори, клас, връзки и т.н.

Селенов сценарий 2

Създаване на Xpath в Developer Tool

Вече обсъдихме Xpaths в последния урок. Обсъдихме и стратегията за създаването му. Тук бихме основали дискусията си, за да проверим валидността на създадения XPath в инструмента за разработчици на Chrome.

Етап 1: За създаване на XPath в инструмента за разработчици отворете раздела на конзолата.

Стъпка 2: Въведете създадения Xpath и го затворете в $ x („// input (@ id =’ Email ’)“)

Селенов сценарий 3

Стъпка # 3: Натиснете клавиша enter, за да видите всички съвпадащи HTML елементи с посочения Xpath. В нашия случай има само един съвпадащ HTML елемент. Задръжте курсора на мишката върху този HTML елемент и съответният уеб елемент ще бъде маркиран на уеб страницата.

Селенов сценарий 4

По този начин всички Xpaths могат да бъдат създадени и проверени за валидност в конзолата.

Информация, свързана с CSS, съответстваща на уеб елемента, може да бъде намерена в инструмента за разработчици на Chrome. Вижте екранната снимка по-долу:

Селенов сценарий 5

Намиране на уеб елементи в Internet Explorer

Подобно на Google Chrome, Internet Explorer също има свой собствен инструмент за разработчици които могат да се използват за идентифициране на уеб елементи въз основа на техните свойства в уеб страницата. Потребителят не е длъжен да изтегля или инсталира отделен плъгин, инструментът за разработчици се предлага лесно в комплект с Internet Explorer.

Следвайте стъпките по-долу, за да намерите уеб елементи с помощта на инструмента IE Developer:

Етап 1: Основната стъпка е стартирането на инструмента IE Developer. Натиснете F12, за да стартирате инструмента. Потребителят ще може да види нещо като екрана по-долу.

Селен сценарий 6

Обърнете внимание, че раздела „HTML“ е подчертан на горната екранна снимка. По този начин раздела HTML е този, който показва всички свойства на HTML, принадлежащи към текущата уеб страница. Разгънете раздела HTML, за да видите свойствата на всички уеб елементи, принадлежащи към текущата уеб страница.

Стъпка 2: Следващата стъпка е да намерите желания обект в уеб страницата. Един от начините за това е да изберете HTML елемента и съответстващият уеб елемент ще бъде подчертан. По този начин, по този начин потребителят може да открие идентификатори, клас, връзки и т.н. Проверете на скрийншота по-долу, в който Email Textbox ще бъде маркиран веднага щом изберем съответното свойство HTML.

Селенов сценарий 7

Друг начин за намиране на уеб елемента е да щракнете върху бутона „Намери“ в горното меню и като щракнете върху желания уеб елемент в уеб страницата. В резултат на това ще бъдат подчертани съответните HTML свойства.

Селенов сценарий 8

По този начин, използвайки инструмента за разработчици, потребителят може да намери идентификатори, класове, имена на маркери и може да създаде Xpaths за намиране на уеб елементи.

Подобно на инструмента за разработчици на Chrome, инструментът за разработчици на IE има отделен раздел, който показва информация, свързана с CSS. Вижте екранната снимка по-долу.

Селенов сценарий 9

Заключение

В този урок ние хвърляме светлина върху основните стратегии за намиране на елементи, като използваме инструмента за разработчици за Google Chrome и Internet Explorer.

Следващ урок # 8 : Продължавайки напред със следващия урок, с удоволствие ще ви запознаем с по-усъвършенстван инструмент, наречен WebDriver. WebDriver е един от най-завладяващите инструменти за тестване на автоматизацията. Така че следващият ни урок нататък бихме насочили и основали дискусиите си около WebDriver и всички негови глупави.

Препоръчително четене

^