Селекторы и события мыши и клавиатуры Browser Automation Studio


2 557 просмотров.

Краткое описание видео: .здравствуйте олег снова тут и сегодня мы.с вами будем разбирать очень интересную.тему такую как селекторы из события мыши.и клавиатуры.перво-наперво давайте с вами зайдем на.один сайт чтобы на нем мы будем чтобы на.нем практиковаться для этого откроем.браузер загрузить vk.com.vk.com выполните добавить ok.такой момент если вы хотите загружать.какую-то сайту его обязательно нужно.водить через http : слэш слэш и так.далее чтобы не было никаких проблем ну в.данном видеоролике явил просто vk.com.тоже никаких проблем не возникло однако.они могут случае случиться хорошо итак я.сегодня вас хотел познакомить с.событиями ввода.с событиями мыши клавиш тут в принципе.особо не сложно если вы смотрели мои.предыдущие видеоролики то я рассказывал.что левая кнопка мыши по вот этому.статичному браузеру можно кликнуть на.давайте кликнем давайте выберем форму.которая нам требуется и кликнем.посмотрите вот это все это html страница.html страница.если вы когда-нибудь знакомились верстка.это даже если не знакомились с объясню.это такая разметка для сайта где.показано как элементы себя ведут где они.допустим стоят и так далее в данном.случае вы видите немного элементов до на.странице войко.на самом деле их тут может быть тысячи а.может быть несколько десятков тысяч но.видите вы некоторые так вот каждый.элемент html страницы вот это все сайт.страничка который загрузилась это стимул.каждый элемент он содержит определенный.путь состоящий из css кода если для вас.до сих пор это сложно то не волнуйтесь.дальше все пойдет намного проще это у.каждой у каждого элемента есть свой путь.да то есть мы можем узнать его по набору.каких то характеристик.очень просто все то есть допустим мы.хотим вести судана что-то давайте.кликнем левой кнопкой мыши и нам.выводится список действий которые мы.можем сделать с этой формой.мы можем двигать мышь и кликнуть.закончить перетягивание просто двигать.мышь и можем изучить ее мы можем.получить код элемента ввести текст.получить скриншот получить координаты.решить captain тут капчи нет пока.значит все что только нам придет в.голову то есть функционал огромный в.данном случае нам нужно ввести логин.давайте введем логин.жмем ввод текста давайте введем.рандомный логин например так смотрите.вот это поле для ввода мы а и мы все с.вами помним что тут нужно задать.определенное значение expression если мы.используем переменные сложения вычитания.деление так далее либо string.если мы используем просто строку также.здесь мы можем выбрать.давайте у нас string конечно же дамы.суда будем пусть номер телефона но это.string эта строка вот мы ввели какую-то.строку да совершенно случайный номер это.не мой номер не звоните на него вот.здесь есть интервал в миллисекундах то.сент и рвал через которой программа.будет печатать туда символы.если вы не хотите чтобы программа что-то.печатала а сразу моментально вставила то.вам нужно нажать отключить эмуляцию мыши.и клавиатуры.но в чем минусы есть придирчивые сайты.вы к не такой сайт но есть придирчивые.сайты типа инстаграма который.отслеживает кто вводил это вот или.человек поэтому здесь очень гибкую.настройку нужно продумать под себя.например вконтакте не такой.чувствительный но мы для наглядности не.будем отключать эмуляцию пусть он вводит.как будто он человек хорошо вот поля для.ввода да здесь можно брать из переменное.значение да мы с вами уже.тренировались на переменных и помнят что.каждая переменная содержит значение.можем задать сюда переменную.списка существующих у меня тут например.ни одной нет только это вот давайте.все-таки введем текст выполните добавить.ok.и сейчас вы можете видеть на экране как.бот печатает сюда логин.напечатал логин дальше что по логике.действий нам снова вами нужно сделать.нам с вами нужно перейти в поле password.давайте введем сюда какой-нибудь текст.ну давайте изощряемся в этот раз мы.будем вводить текст ни прямо ни.напропалую а из переменная какой-нибудь.для этого давайте создадим переменную.заранее давайте установим переменную мы.с вами это уже делали в предыдущем.видеоуроке.значит логика скрипта установить.переменную давайте ее назовем ps варда.переменную называйте всегда переменный.так чтобы вам было понятно откуда их что.что это вообще за такое что это такая за.вещь чтобы при вызове было все просто.чтобы вы не путались то есть допустим.мне нужно ввести паспорт я вот так и.вожу переменную ps vr доступнее было.понятно давайте введём в тонет рандомно.там головой ударился об клавиатуру.раз значит выполнить добавить и жмем ok.все мы установили переменную password.она у нас равно значению вот этому.которому мы за до которое мы задали.теперь давайте мы с вами.введём в эту форму этот самый текст с.переменной переменная вот оно смотрите.password мы жмем на нее.жмем ok в данном случае это строка.правильно то есть мы никаких действий.не делаем с этой переменной это строка.значит выбираем тип данных string.жмем что отключать давайте на этот раз.отключим эмуляцию мыши и увидите как она.быстро ставит текст нужны и жмем ok.любите доля секунды и там уже вставлен.текст.хорошо то есть сейчас мы с вами.познакомились с тем как вводить но не до.конца давайте сейчас мы попробуем.очистить эти поля по селектору очистить.поле нажмем только выполнить потому что.если я хочу один раз выполнить код и.больше чтобы он никогда не повторялся.мне нужно выбрать вот этот пункт то есть.одноразовое действие смотрите исчезает.все что было в дан что все что было в.данных давайте и поле пароля чистим.выполнить только выполнить ok все мы.очистили поле так работает собственно.клавиатура очень просто с мышкой еще.проще можем нажать левую кнопку мыши.двигать мышь и кликнуть это когда мышь.понятно двигается да и кликает а есть.просто кликнуть да тогда мышь не.двигается она остается на своем месте но.на элемент кликается это самое.неправдоподобное действие поэтому я.всегда советую жать двигать мышь и.кликнуть ну если у вас какой-то сайт не.привередливый древние не требует этого.то можно это все мелочи чуть попозже с.этим еще подробнее разберетесь сейчас мы.с вами мы с вами.вели текст вели текст из перемены все.просто но здесь есть особо важный момент.например мы не заметили еще кое-что хотя.вы может заметили что мы пропустили это.поле и это поле на самом деле самое.главное что это такое в начале я вам уже.говорил что до каждого элемента.существует путь ну как например если бы.вы хотели пойти в магазин да но вы не.знаете где он находитесь вы спрашиваете.дорогу и вам говорят вы можете пойти так.а можете сократить и пойти так а можете.пойти так да то есть у нас есть.множество вариантов как мы к этому пути.путь у пойдем все эти варианты.перечисленные в селекторах элемента.селектор это какая-то какой-то элемент.как эта форма что-то как а вот что есть.на страницу когда мы хотим кликнуть.нажать и так далее смотрим у нас.генерирует.генерирует это все автоматически нам не.нужно заморачиваться с этим то есть нам.сгенерировала сейчас рассмотрим как раз.таки и первую.первый вариант вот нам сгенерировала.очень красиво с.с..но он может нам сгенерировать не очень.красиво с с в духе вот такому посмотрите.in the child.111 17 что-то там непонятное и тогда или.краказябра какая-то короче и поэтому это.не очень эстетично выглядит но с.элементы они задают всегда.про практически всегда не всегда точны.путь к элементу.к сожалению таких элементов может быть.найдено 5 на странице по одному и тому.же пути ведь согласитесь что если вам.укажет путь дойти до магазина до то там.рядом могут стать еще множество.магазинов до если вы на я явно не.скажите куда вы хотите пойти то вам и не.подскажут путь taxis с.элемент он формирует вот такие.некрасивые страницы в чем минусы css.элемента в том что если.дизайнер вконтакте завтра захочет.поместить эту форму не суда от примеру а.вот сюда изменив его название то вот уже.будет в ступоре они не будут знать куда.ему кликнуть очень часто такое случается.очень часто что css элементы они.динамичны и то есть они меняются.меняются меняются с каждым обновлением.сайта и поэтому кликать на них будет уже.не актуально.я вообще никогда не использую css путь.только в крайних случаях.давайте рассмотрим другой или другой.путь вариант как мы можем кликнуть мы.можем кликнуть через все ssd можем.кликнуть через xps посмотрите очень.красивый элемент выдал нам express.яндекс.e-mail но опять же не всегда он такие.красивые элементы задает в тоже.кракозябры в чем преимущество это.наиболее точный селектор он задает путь.к наиболее наиболее точно к селектору но.этот метод к сожалению также не особо.действий когда меняется с с элемент.потому что страничке меняются.следовательно путь до них тоже меняется.поэтому это не действенный метод.я тоже используется крайне редко но.все-таки это предпочтительный чем есть.еще один путь от вы наверняка.пользовались какими-то клики раме до.изучения баз и помните да что если.задать координаты которых находится.какая-то . том кликнет в эту точку но.минус чем есть ли сегодня допустим мы.изменим размер экрана.он будет больше или будет меньше или мы.вообще сдвинем элемент куда-то он на.него не нажмет просто то есть.преимущества очевидны и недостатки.очевидны.если у вас изменится разрешение экрана.то он нажмет не туда допустим 708 17.предположим что эта координата вот тут.находится где мышка да он сюда кликнет а.завтра наш элемент передвинут правее да.и он снова кликни туда на было место то.есть не попадет это основной минус я.вообще никогда его не использую это.потому что это непродуктивно есть еще.один элементом самый лучший самый крутой.самый-самый-самый.это элемент ночь жмем элемент меч.смотрите он нам сгенерировал но опять же.не очень красивый кот какую-то.крякозябру вы можете оставить его таким.то есть меч элемент он тоже берет си эс.эс элементы html элементы но в чему вы.прелесть вы можете оставить его таким но.вы можете его изменить то есть вот эту.часть с элемента вы удаляете и можете.просто ввести название вашего элемента.все просто например вы хотите чтоб он.нашел поле для ввода логина вот она у.меня версия английская тут написано.phone or email.телефон или email давайте так и напишем.то что внутри написаны этой формы.phone or email.и тут он сразу подсветил что он нашел.такой есть загвоздка всегда во всех.типах элементах когда вы пытаетесь.что-то найти вам может указывать что.таких элементов несколько на странице.например в данном случае phone or email.он нашел два элемента к сожалению я не.вижу где второй элемент возможно он.скрыт но мне синеньким подсветил 1 если.вы нажмёте ok.допустим то скорее всего тут ничего не.произойдет давайте поэкспериментируем.нажмем ok и попробуем ввести текст на.одноразовое действие.смотрите будут в ступоре он ничего не.делает он в ступоре потому что не знает.на какой в какой элемент из двух ему.ввести текст он просто в шоке.давайте поможем ему указать если у нас.находит сразу несколько элементов.то мы используем следующую конструкцию.смотрите после того как указанный.элемент сразу же мы жмем больше и больше.и указываем номер элемента если мы не.знаем мы можем поэкспериментировать он.синеньким подсветит то что нам нужно.давайте нажмем нолик вот нолик он где-то.нашел но элемент на странице не виден и.он не посвятил нужный нам элемент дойти.дальше попробуем вот ведь а он посвятил.нужный нам элемент phone or email.то есть мы сейчас с вами указали какой.конкретно по счету элемент нам нужен вот.эта конструкция матч с функцией от она.является очень продуктивной и всегда.универсальные даже если завтра устареет.код даже если завтра.эту форму переместят в другое место.чтобы с ней не случилось да то.практически всегда меч найдет этот.элемент на странице давайте введем текст.окей одноразового действия все велось и.очень легко вот такие вот у нас.существуют формы такие вот у нас.существуют методы работы в бас и давайте.подведем с вами резюме.давайте сделаем резюме и так существуют.события мыши клавиши и так далее с ними.вы разберетесь сами вы можете.поэкспериментировать нажав левую кнопку.мыши и выбрать нужные вам действия с.элементами html-страница это странице.загружаем еда содержит в себе все.лекторы то есть маленькие элементы по.которым мы можем совершить действие.крикнуть ввести текст и так далее каждый.селектор содержит до себя путь как к.нему подобраться и такие селекторы.есть их три вида это вид с.не точный вид это меч один из самых.более.используемых и были универсальных.селекторов это xps самый точный но не.всегда действенный метод.и это id это когда уже никакие методы не.работают как говорится запасной вариант.на сегодня я думаю наш видео урок.истории закончитесь есть вопросы.добавляйтесь вконтакте спрашивать и я с.удовольствием отвечу на них.давайте мы с вами.перейдем к следующему сложному видео.который будет называться циклы.ну моего освоим легко потому что никаких.запредельных возможности от вас сделать.не нужно будет только немножко включить.мозги а я с вами на этом прощаюсь с вами.был олег тут подписывайтесь на мой канал.ставьте лайки до скорого

Селекторы и события мыши и клавиатуры Browser Automation Studio

Как? Вы еще не смотрели? Ну это зря...