Статьи

Watir-Webdriver: управление браузером

Watir

Watir-WebDriver (Watir – сокращение от «Тестирование веб-приложений в Ruby») – это драгоценный камень Ruby, который позволяет автоматизировать ваш браузер (сделать так, чтобы он нажимал кнопку, отправлял форму, ждал появления текста, прежде чем продолжить, и т. Д.). С его помощью можно моделировать реального пользователя, что позволяет автоматизировать полное тестирование стека вашего веб-приложения.

Синтаксис Watir-WebDriver очень чистый и вдохновлен аналогичными средами на других языках ( Watij для Java и Watin для C #). Это также хорошо поддерживаемый драгоценный камень с более чем 68 выпусками.

Имейте в виду, что Watir (классический) и Watir-WebDriver (оба отдельных драгоценных камня Ruby) – это не одно и то же! Watir поддерживает только Internet Explorer, а Watir-WebDriver также поддерживает Chrome, Firefox и Safari. Думайте о Watir-WebDriver как о Watir 2.0 или как о Watir (классический) + WebDriver + некоторые дополнительные функции. WebDriver был запущен Google, чтобы позволить инструментам автоматизации браузера приблизиться к моделированию реального поведения пользователя. Более того, все основные фреймворки для автоматизации браузеров реализовали это.

Selenium 2.0, который является основной частью Watir-Webdriver, также описывает себя с помощью этой простой формулы: Selenium 1.0 + WebDriver = Selenium 2.0.

Давайте (автоматически) заполним этот обзор Ruby!

Ваша задача – перейти на эту веб-страницу (вы также можете скачать ее отсюда , разархивировать и заменить аргумент browser.goto локальным путем к файлу form.html.) И автоматически заполнить его Watir-WebDriver ,

Чтобы начать, сначала установите Watir-webdriver с помощью gem install watir-webdriver . Также убедитесь, что у вас установлен Firefox (мы будем использовать его в этом примере).

Сохраните следующее в новый файл watir_script.rb и запустите его:

 require 'watir-webdriver' browser = Watir::Browser.new :firefox # should open a new Firefox window browser.goto 'http://nitrowriters.com/form/form.html' # or type the local path to your downloaded copy browser.text_field(:id => 'my_text_field').set 'Yes!' browser.textarea(:class => 'element textarea medium').set 'It was a long time ago, I do not remember' browser.radio(:name => 'familiar_rails', :value => '1').click # yes, I'm very familiar sleep 2 # puts the entire program to sleep for 2 seconds, so you can see the change browser.radio(:name => 'familiar_rails', :value => '3').click # actually, just a bit... browser.text_field(:name => 'favorite_1').set 'Yukihiro' # the creator of Ruby browser.text_field(:id => 'favorite_2').set 'Matsumoto' # is my favorite Ruby person! browser.checkbox(:index => 1).click # I like the TDD culture browser.checkbox(:index => 2).click # And Matz! sleep 2 # puts the entire program to sleep for 2 seconds, so you can see the change browser.checkbox(:index => 1).click # Oh well, I like only Matz.. browser.select_list(:id => 'usage').select 'Less than a year' browser.select_list(:id => 'usage').select_value '2' # Changed my mind # Here I entered C:/watir.txt because I had such a file inside my C: directory. Please be sure # to enter a valid path to a file, or your script will report 'No such file or directory' error browser.file_field.set 'C:/watir.txt' # Change this path to any path to a local file on your computer puts browser.p(:id => 'my_description').text 

Я настоятельно рекомендую вам не продолжать эту статью, пока вы не запустите этот скрипт успешно . Нет ничего более мотивирующего, чем представить возможности того, как вы можете автоматизировать свой браузер, увидев свой первый скрипт Watir-WebDriver в действии. Читайте дальше, когда вы закончите.

Как реальный пользователь взаимодействует с веб-страницей

Иди и открой эту веб-страницу снова. Заполните это вручную. Положите в него любые значения, которые вы хотите. Законченный? Хорошо. Теперь спросите себя: «Как я взаимодействовал с этой страницей? Что я сделал? ». Если вы внимательно наблюдаете за собой, вы делаете две вещи, пытаясь взаимодействовать с этой или любой другой веб-страницей в Интернете:

a) Визуально идентифицируйте ту часть страницы, с которой вы хотите взаимодействовать (текстовое поле, ссылка, нажатие на заголовок веб-страницы и т. д.).

б) Выполните некоторые действия в этой части страницы. В большинстве случаев вы нажимаете на эту часть, но иногда вы также вводите текст. Эти 2 вещи – то, что вы делаете в 99% случаев: нажмите (с помощью мыши) и наберите текст (с помощью клавиатуры)

Вы не можете сделать б) без а). Если вы визуально не определяете, на каком элементе хотите щелкнуть или что-то ввести, это бессмысленно.

Ранее мы упоминали, что основной задачей Watir-WebDriver является симуляция реального пользователя. Мы знаем, как настоящий веб-пользователь взаимодействует с реальной веб-страницей (наблюдая за тем, как мы заполняем форму вручную), поэтому давайте посмотрим, как работает приведенный выше скрипт Watir-WebDriver.

Чистый и предсказуемый синтаксис

Сделайте быстрый анализ первых двух строк кода:

 require 'watir-webdriver' browser = Watir::Browser.new :firefox 

Запустив только первые 2 строки, откроется новое окно браузера. Вторая строка соответствует реальному пользователю, открывающему окно Firefox.

Строка 3 начинает отдавать приказы этому недавно запущенному окну браузера. Скрипт говорит ему перейти на определенную веб-страницу, которая эквивалентна реальному веб-пользователю, который набирает что-то в адресной строке браузера и нажимает «Enter»:

 browser.goto 'http://nitrowriters.com/form/form.html' 

Вещи должны начать проясняться, начиная с линии 5

 browser.text_field(:id => 'my_text_field').set 'Yes!' 

Помните а) и б) о том, как реальный пользователь взаимодействует с веб-страницей? Вот где сияет синтаксис Watir-WebDriver. Настоящий серфер сначала идентифицирует «часть» определенной страницы для взаимодействия, а затем выполняет некоторые действия с этой «частью». Как мы скажем Watir-WebDriver в компьютерном плане, где эта часть расположена на веб-странице? Некоторые инструменты автоматизации браузера используют экранные координаты (позже мы увидим, почему это очень ненадежный подход). Однако Watir-WebDriver использует элементы HTML , полагаясь на базовый трюизм:

Веб-страница HTML, будь то домашняя страница SitePoint или страница формы, с которой мы работаем, по сути является просто набором элементов HTML.

Любой пользователь, включая Watir-WebDriver, взаимодействует с этими элементами. Нажмите на кнопки (которые являются HTML-элементами), введите текст в текстовое поле (которое также является HTML-элементами), нажмите на ссылки (ссылки также являются HTML-элементами) и так далее. Какое бы действие вы ни выполняли на странице, оно выполняется для некоторого элемента HTML, который является частью коллекции, которую мы называем веб-страницей . Создатели Watir-WebDriver, зная об этом, решили создать довольно интуитивно понятный синтаксис, позволяющий вам симулировать практически все, что настоящий пользователь будет делать на определенной веб-странице. Синтаксическая структура:

 [browser-instance].[html-element-tag-name](with specific attributes).[action] 

Вы можете увидеть это начиная со строки 5:

 browser.text_field(:id => 'my_text_field').set 'Yes!' # Dear Watir, please find the text field HTML element with the ID attribute of 'my_text_field' and type 'Yes!' into it 

browser – это имя переменной экземпляра браузера, созданной в строке 2. Эта переменная может быть названа как угодно:

 happy_browser = Watir::Browser.new :firefox 

пока вы распространяете переименование в каждой последующей строке:

 happy_browser.element_name(attributes).action 

text_field(:id => 'my_text_field') – это синтаксис, который Watir-WebDriver использует для идентификации текстовых полей ( вы можете увидеть синтаксис, который Watir-WebDriver использует для различных элементов HTML, здесь ). Внутри скобок у вас есть пары ключ-значение, где ключ – это определенный атрибут, а значение – это значение этого атрибута.

Вы можете указать более 1 пары ключ-значение:

 browser.radio(:name => 'familiar_rails', :value => '1').click 

Наконец, set – это действие, которое нужно выполнить с этим элементом HTML. В случае text_field set означает установить текст на «Да!».

Ваш новый лучший друг: щелкните правой кнопкой мыши Inspect

Для того, чтобы в общих чертах понять, как работает сценарий, это хорошее упражнение, чтобы пройти мысленный процесс о том, как он был сделан в первую очередь.

Теперь вы должны понимать, что делают первые 4 строки: откройте новое окно браузера, готовое принять наши команды!

Следующая строка:

 browser.text_field(:id => 'my_text_field').set 'Yes!' 

browser – это просто имя переменной, представляющей браузер. Как насчет второго бита .text_field ?

Я щелкнул правой кнопкой мыши по элементу, с которым я хотел взаимодействовать (текстовое поле под заголовком «Вы большой поклонник Ruby?»), А затем щелкнул «Проверить» (в зависимости от браузера это можно назвать «Проверить элемент» или просто «Проверить»). «). Полученное окно проверки показывает:

 <input id="my_text_field" name="my_text_field" class="element text medium" maxlength="255" value="" type="text"> 

 <input type="text"/> 

можно найти в этой таблице, сопоставленной с методом text_field в Watir-WebDriver. Круто, но что, если на странице было более 1 элемента text_field ? Если вы только что написали browser.text_field.set 'Yes!' и было 3 текстовых элемента, тогда Watir-WebDriver автоматически выбрал первый такой элемент . Часто это не то, что мы хотим. Нам нужен способ различать HTML-теги, чтобы Watir-WebDriver всегда мог выбрать правильный. Это где атрибуты HTML входят.

Если элемент, с которым вы хотите работать, имеет атрибут ID, вам повезло! Согласно W3C, значение идентификатора элемента должно быть уникальным в документе HTML. В нашем случае

 <input type="text"/> 

тег имеет идентификатор, поэтому я использовал это. Наконец, я вызываю метод set для этого элемента, который выполняет с ним некоторое действие, например, вводит в него текст (подробнее о действиях мы поговорим позже).

Ваша последняя задача – найти уникальный способ идентифицировать определенный элемент HTML на определенной странице . Вы не хотите, чтобы Watir-WebDriver выбирал неправильный элемент или вообще не находил этот элемент (в этом случае вся ваша программа потерпела бы крах).

Давайте перейдем к следующей строке:

 browser.textarea(:class => 'element textarea medium').set 'It was a long time ago, I do not remember' 

Та же концепция. Разница между

 <input type="text"/> 

и

 <textarea></textarea> 

является то, что последний поддерживает несколько строк. Вы можете заменить textarea на text_field в этой строке, и код будет работать, но Watir-WebDriver выдаст следующее предупреждение: "Locating textareas with '#text_field' is deprecated. Please, use '#textarea' method instead.".

Радио-кнопки

 browser.radio(:name => 'familiar_rails', :value => '1').click sleep 2 browser.radio(:name => 'familiar_rails', :value => '3').click 

Здесь я использовал 2 атрибута, чтобы различать переключатели. Вместо использования click в качестве метода действия, вы также можете заменить щелчок на set который звучит более удобным для пользователя, но делает то же самое. Вы могли бы также использовать set? метод, который возвращает true или false в зависимости от того, был ли выбран этот переключатель:

 browser.radio(:name => 'familiar_rails', :value => '1').click browser.radio(:name => 'familiar_rails', :value => '1').set? #=> true browser.radio(:name => 'familiar_rails', :value => '3').set # same as click browser.radio(:name => 'familiar_rails', :value => '1').set? #=> false 

Флажки

Здесь скрипт взаимодействует с некоторыми флажками:

 browser.checkbox(:index => 1).click browser.checkbox(:index => 2).click sleep 2 # puts the entire program to sleep for 2 seconds browser.checkbox(:index => 1).click 

Если, скажем, на странице есть 10 элементов- my_checkbox с одинаковыми атрибутами класса my_checkbox , при выполнении чего-то вроде browser.checkbox(:class => 'my_checkbox').click выберет первый встреченный browser.checkbox(:class => 'my_checkbox').click .

Что если мы хотим выбрать второй? Используйте атрибут :index .

Первая строка в приведенном выше фрагменте browser.checkbox(:index => 1).click по второму элементу флажка на странице. Атрибут :index принимает целые числа, где 0 – первый элемент. Например, во второй строке приведенного выше фрагмента будет щелкнуть третий элемент флажка, который он найдет.

Что делает четвертая строка? Он снимает флажок со второго элемента (помните, в первой строке мы щелкнули по тому же элементу, что означает, что мы «проверили» его). Есть более понятный способ сделать это в Watir-WebDriver:

 browser.checkbox(:index => 1).set browser.checkbox(:index => 2).set sleep 2 # puts the entire program to sleep for 2 seconds browser.checkbox(:index => 1).clear 

Как и в случае с переключателями, set делает то же самое, что и click . clear снимает флажок, если флажок «установлен», снимая флажок при необходимости.

Кроме того, вы можете использовать set? чтобы увидеть, если флажок уже установлен.

Выберите списки и файлы

Давайте посмотрим на следующую часть нашего кода:

 browser.select_list(:id => 'usage').select 'Less than a year' browser.select_list(:id => 'usage').select_value '2' 

select_list соответствует

 <select></select> 

тег и его «действия» немного отличаются от переключателей или флажков. Каждый тег select имеет теги option внутри, которые являются параметрами в списке. Каждый тег option обычно имеет атрибут «value» и текст, содержащий названия опций. В приведенном выше коде перечислены 2 способа выбора конкретной опции: либо по атрибуту «value», либо по фактическому названию опции.

В нашей форме также есть поле для загрузки файлов. HTML-код для этого:

 <input id="give_me_a_file" name="give_me_a_file" class="element file" type="file"/> 

Работать с полями загрузки очень просто с Watir-WebDriver. Все, что вы делаете, это:

 browser.file_field.set 'C:/watir.txt' 

Предупреждение : введите правильный путь в аргументе set иначе ваша программа потерпит крах.

действия

Как упоминалось ранее, реальные пользователи в основном выполняют 2 действия на веб-странице: нажатие и ввод текста.

Здесь очень помогает здравый смысл. Например, вы не можете печатать текст на элементе кнопки, но вы можете щелкнуть его. Мы видели, как вы можете использовать set и clear с флажками и переключателями. Если вы хотите просто нажать на текстовую область, вы можете сделать:

 browser.textarea(:class => 'element textarea medium').click 

Но более удобный способ:

 browser.textarea(:class => 'element textarea medium').focus 

Совет: при использовании только 1 атрибута для выбора элемента вы часто будете видеть это при анализе кода других людей:

 browser.textarea(:class, 'element textarea medium').focus 

Однако не используйте его, поскольку один из сопровождающих Watir-WebDriver объявил, что может удалить его в ближайшее время.

Типы действий

Выполнение действий с элементами HTML – это не только взаимодействие с элементом. В объектно-ориентированном программировании у вас есть сеттеры и геттеры . Получатели получают что-то от объекта, а установщики меняют объект.

Представьте каждый HTML-элемент как объект и каждое действие, которое вы можете выполнить над этим HTML-элементом, как метод получения или получения. Например, вы можете установить текст для элемента текстового поля. Вы также можете получить значение атрибута class для этого объекта.

Последняя строка в нашем коде формы использует метод «getter» .text :

 puts browser.p(:id => 'my_description').text 

В отличие от предыдущих примеров, здесь мы говорим браузеру, чтобы мы получили текст внутри тега p с идентификатором «мое описание». В этом случае выводится «Только для демонстрационных целей Watir».

Вы можете получить любой атрибут для конкретного элемента. , Синтаксис:

 [browser-instance].[HTML-element](:with-some => attributes).[the attribute name of the element] #=> the attribute value 

Возьмите тот же элемент p сверху и на этот раз получите значение атрибута id:

 puts browser.p(:text => 'For Watir demonstration purposes only.').id #=> output: 'my_description' 

До сих пор мы исследовали «методы получения». Что касается «установочных» действий, давайте рассмотрим немного здравого смысла: что такое универсальное «действие», которое вы можете выполнять с каждым отдельным элементом HTML?

Это клик . Вы можете сделать browser.textarea.click , browser.div.click , в основном browser.[every-HTML-element](:with => every attribute).click .

Каждый элемент HTML также имеет свои специфические действия. Перейдите сюда и введите любое имя элемента HTML, например «radio». Нажмите на него, и в разделе «Сводка метода экземпляра» вы увидите конкретные методы или действия, которые он может выполнить. В этом примере они set и .set? , click также находится ниже в списке, унаследованном от класса Element , подтверждая возможность использования click на любом HTML-элементе.

Другие браузеры

В отличие от Firefox, если вы хотите использовать Watir-WebDriver с Chrome , Internet Explorer или Safari , вам придется загружать версии этих браузеров «WebDriver» (а также иметь установленные на вашем компьютере браузеры). «Версия WebDriver» браузера – это отдельный файл, который необходимо поместить в путь загрузки операционной системы. Я поместил файл в папку [ruby-installation-folder] / bin , которая уже находится в пути к операционной системе. Я рекомендую вам запустить наш пример формы в начале этой статьи с Chrome и IE / Safari, если вы работаете на Windows / Mac.

Если вы не уверены, как этот файл «веб-драйвера» вписывается в общую картину, подумайте об этом следующим образом: на вашем компьютере установлено все виды аппаратного обеспечения. Возьми свою видеокарту. Ваша видеокарта будет бесполезна, если у вас не будет способа «подключиться» к ней, установив драйвер. Браузер воспринимается как графическая карта, а файл веб-драйвера – как файл драйвера, позволяющий Watir-WebDriver подключаться к реальному браузеру и «управлять им».

Против записи и воспроизведения инструментов

Существует множество инструментов тестирования «Запись и воспроизведение», в которых вы в основном «записываете» свои действия на веб-странице и сохраняете свои действия. Позже эти инструменты будут «воспроизводить» то, что вы сделали. Проблема с этим типом программного обеспечения состоит в том, что оно часто зависит от экранных координат и правильности, ограниченных языков сценариев. Если в дизайне страницы есть даже небольшие изменения, воспроизведение, скорее всего, перестанет работать, и вам придется перезаписывать все заново.

Watir-WebDriver не работает таким образом. Он использует Selenium-WebDriver на своем сервере и, как и в случае с Selenium, это не экранные координаты, а элементы HTML . Прежде чем принять решение что-либо сделать, вы должны указать Watir-WebDriver точный элемент HTML, с которым хотите работать.

Что касается Watir-WebDriver и Selenium WebDriver, вы заметите, что Watir-WebDriver имеет более объектно-согласованный и согласованный синтаксис, чем Selenium. Вам нужно знать Selenium, чтобы полностью освоить Watir-WebDriver. В конце концов, Selenium-WebDriver – это то, что поддерживает Watir-WebDriver в фоновом режиме. Если вы знаете Selenium, вы также можете выполнить некоторые дополнительные настройки.

Только начало! Разве это не захватывающе?

Как только вы поймете основы Watir-WebDriver, вы легко сможете продолжить его изучение. Такие вещи, как взаимодействие с элементами AJAX, не должны быть сложными для понимания, если вы поймете основной синтаксис и философию Watir-WebDriver.

Если вы ищете больше материала, две замечательные книги, которые помогли мне,

Также есть тестирование веб-приложений на Ruby (бесплатно) одним из основных участников Watir-WebDriver, содержащее отличную информацию, например, о настройке версий веб-драйверов для каждого браузера и т. Д. Чем больше вы узнаете о Watir-WebDriver, тем больше вас искушает » Я буду исследовать его красивый синтаксис и элегантность.