Урок за IO на уеб драйвер Използване на уеб сайт на живо и примери за работа: 8 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:53

Урок за IO на уеб драйвер, използващ жив уеб сайт и работещи примери

Последна актуализация: 26.07.2015

(Проверявайте често, докато актуализирам тези инструкции с повече подробности и примери)

Заден план

Наскоро ми беше представено интересно предизвикателство. Трябваше да въведа автоматизирано тестване в отдел за Q/A с много малък технически опит и без опит в програмирането.

Това наистина бяха две (2) отделни предизвикателства. Първият беше да се идентифицират технологиите за извършване на автоматизираното тестване. Второто беше да се обучи отдел Q/A.

Статията ще разглежда само използваните технологии и това, което научих в процеса.

Технологиите работеха добре, но наистина трябваше да търся информация и прекарах много часове в решаване на проблеми.

Трудно ми беше да намеря информация в Интернет за всички тези технологии, работещи заедно.

Исках да споделя тази информация, затова написах тази статия заедно с работещи примерни тестови скриптове и тестов уеб сайт, за да стартирам скриптовете.

Всички тестови скриптове могат да бъдат намерени на github, а работният тестов сайт се намира на Web Driver IO Tutorial Test Site

Надявам се да ви е полезен. Ако го направите, моля, уведомете ме.

Използвайте технологии за:

• Тествайте функционалността на уеб сайта
• Тествайте функционалността на JavaScript
• Може да се стартира ръчно
• Може да се стартира автоматично

• Лесен за научаване език за непрограмисти

  В/Персонал с основни познания по HTML и JavaScript

• Използвайте само софтуер с отворен код

Технологии

Списък на технологиите, които избирам:

• mocha - тест бегач - изпълнява тестовите скриптове
• shouldjs - библиотека с твърдения
• webdriverio - връзки за управление на браузъра (езикови обвързвания)
• selenium - абстракция на браузъра и работеща фабрика

• Браузър/мобилни драйвери + браузъри

  • Firefox (само браузър)
  • Chrome (браузър и драйвер)
  • IE (браузър и драйвер)
  • Safari (приставка за браузър и драйвер)

Стъпка 1: Инсталиране на софтуер

За да започнете, трябва да имате инсталиран самостоятелен сървър Node JS, Web Driver IO, Mocha, Should и Selenium.

Ето инструкции за инсталиране на Windows 7.

(Аз съм потребител на Mac/Linux, но трябваше да инсталирам всичко на машини с Windows 7, затова го включих за ваше сведение. Процедурата за инсталиране на Mac/Linux е подобна. Моля, консултирайте се с онлайн препратки за повече информация.)

От браузър:

• Инсталирайте възел, който включва NPM (Node Package Manager)

• отидете на

  • Щракнете върху инсталиране
  • Запазете и стартирайте файла
  • Задайте пътя и променливата (NODE_PATH)

  • Отидете на Контролен панел-> Система и защита-> Система

    • Разширени настройки на системата

    • Настройка на околната среда (потребителски променливи)

      • Добавяне към PATH

        C: / Users {USERNAME} AppData / Roaming / npm;

      • Добавете NODE_PATH (системни променливи)

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

Забележка: Инсталирах целия софтуер по-долу, използвайки глобалната опция npm (-g). Това обикновено не се препоръчва, но за тази инсталация трябваше да инсталирам глобално, тъй като ще се използва в множество проекти.

Отворете командния ред (cmd):

(локален потребителски администратор)

• Инсталирайте селен "уеб драйвер IO"

  • npm инсталирайте webdriverio -g

    Това ще инсталира IO уеб драйвер глобално на вашата машина

• Инсталирайте софтуера за тестване на „mocha“

  • npm инсталирате mocha -g

    Това ще инсталира mocha глобално на вашата машина

• Инсталирайте библиотеката с твърдения „трябва“

  • npm инсталиране трябва -g

    Това ще инсталира „трябва“глобално на вашата машина

• Инсталирайте Selenium Stand Alone Server

  • Отидете на
  • Изтеглете jar файл и се преместете в директорията „selenium“.

• Инсталирайте браузъри и драйвери на браузъра, с които да тествате

  • От cmd подкана:

    • Създайте директория „selenium“
    • C: / Users {USERNAME} selenium

    • Команди:

      • cd C: / Users {USERNAME}
      • mkdir селен

    • Firefox

      • Инсталирайте браузъра firefox, ако още не е инсталиран.
      • Пътят трябва да бъде зададен, за да стартира Firefox от командния ред (cmd).

      • Контролен панел-> Система и защита-> Система

        • Разширени настройки на системата
        • Настройки на околната среда
        • Добавете (добавете използвайте точка и запетая) към променливата на пътя
        • C: / Program Files (x86) Mozilla Firefox
      • Не е необходим специален уеб драйвер за Firefox.

    • Chrome

      • Инсталирайте браузъра chrome, ако още не е инсталиран.
      • Пътят МОЖЕ да бъде настроен да стартира Chrome от командния ред (cmd).
      • Тествайте първо: chrome.exe от командния ред (cmd)
      • Ако хромът не стартира, тогава:

      • Контролен панел-> Система и защита-> Система

        • Разширени настройки на системата
        • Настройки на околната среда
        • Добавете (добавете използвайте точка и запетая) към променливата на пътя
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • За Chrome е необходим специален уеб драйвер.

        Отидете на chromium.org и разархивирайте 32 -битовия драйвер в директорията „selenium“

    • Internet Explorer (само за Windows - няма да работи на други платформи)

      • За IE е необходим специален уеб драйвер.

        • Отидете на
        • Изтеглете и разархивирайте 64 -битов драйвер в директорията „selenium“.

Стъпка 2: Основен скрипт за тест

Нека започнем с някои основи.

Ето един прост скрипт mocha, който ще отвори уеб сайт и ще провери заглавието.

// tutorial1.js

// // Това е прост скрипт за тестване за отваряне на уебсайт и // валидиране на заглавието. // необходими библиотеки var webdriverio = require ('webdriverio'), should = require ('should'); // тестов скриптов блок или пакет описват ('Test Title for Web Driver IO - Учебен уебсайт на тестовата страница', function () {// задайте таймаут на 10 секунди this.timeout (10000); var driver = {}; // hook за стартиране преди тестовете преди (function (done) {// зарежда драйвера за драйвера на браузъра = webdriverio.remote ({desireCapabilities: {browserName: 'firefox'}}); driver.init (направено);}); // тестова спецификация - "спецификация" тя ("трябва да се зареди правилна страница и заглавие", function () {// зареждане на страница, след това извикайте function () върнете драйвера.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // получаваме заглавие, след което предаваме заглавие на function ().getTitle (). then (function (title) {// проверяваме заглавието (title). "); // разкомментирайте за отстраняване на грешки в конзолата // console.log ('Заглавие на текущата страница:' + заглавие);});}); //" кука ", която да се изпълнява след всички тестове в този блок след (функция (готово) {driver.end (направено);});});

Наблюдения:

• Първо трябва да забележите, че тестовият скрипт е написан на JAVASCRIPT (завършва с.js разширение).

• Основната структура е почти идентична за всички тестови скриптове.

  • Коментари към заглавката (//)
  • Задължителни библиотеки
  • Задаване на опции (по избор)
  • Кука: Заредете драйвера на браузъра
  • Тестов пакет (опишете)
  • Тестови спецификации (могат да бъдат много спецификации в пакет)
  • Кука: Почистете

• Тестовият пакет започва с функция за описание, която приема два параметъра:

  • Низ - Описание на тестовия пакет

    • „Проверете страницата за правилен език“
    • „Проверете работата на бутоните за избор“

  • function - блок от код за изпълнение

    description (‘Описание на тестовия пакет’, function () {});

• Тестовият пакет ще съдържа 1 или повече спецификации за тест (спецификация)

• Спецификациите започват с функцията it, която приема два параметъра:

  • Низ - Описание на спецификацията на теста

    • „Трябва да е правилен текстът на връзката и URL адресът на връзката“
    • „Трябва да съдържа правилен глагол (копирна тесте)
  • function - блок от код за изпълнение
  • it („Описание на спецификацията на теста“, функция () {});
• Спецификацията съдържа едно или повече очаквания, които тестват състоянието на кода

• Те се наричат твърдения

  Библиотеката „трябва“предоставя твърденията

• В почти всички случаи ще трябва да намерите един или повече елементи с помощта на селектор, след което да извършите някаква операция върху елемента (ите)

  • Примери:

    • Намерете текст на страница и проверете текста
    • Попълнете формуляр и изпратете
    • Проверете CSS на елемент

Нека разгледаме по -отблизо примера с коментари

Заредете необходимите библиотеки: уеб драйвер IO и трябва.

// необходими библиотеки

var webdriverio = require ('webdriverio'), should = require ('should');

Определете тестовия пакет. Този пакет се нарича: „Тест на заглавието за IO на уеб драйвер - уебсайт на страницата с тестове за уроци“

// тестов скриптов блок или пакет

description ('Тест на заглавието за уеб драйвер IO - уебсайт на страницата с тестове за уроци', функция () {…});

Задайте таймаут на 10 секунди, така че скриптът да не изчаква при зареждане на страницата.

// задаваме таймаут на 10 секунди

this.timeout (10000);

Закачете, за да заредите драйвера на браузъра, преди да стартирате спецификациите "specs". Драйверът на Firefox се зарежда в този пример.

// закачане за стартиране преди тестовете

преди (функция (направено) {// зареждане на драйвера за драйвера на браузъра = webdriverio.remote ({желани възможности: {име на браузър: 'firefox'}}); driver.init (направено);});

Определете спецификацията на теста.

// тестова спецификация - "спецификация"

it ('трябва да се зареди правилна страница и заглавие', function () {…});

Заредете страницата на уебсайта

.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Вземете заглавие, след това предайте заглавието на function ()

.getTitle (). then (function (title) {

… });

Проверете заглавието, като използвате библиотеката с твърдения should.

(заглавие).should.be.equal ("IO на уеб драйвер - Страница с уроци за изпитване");

Кука за излизане и почистване на драйвера, когато приключите.

// "кука", която да се изпълнява след всички тестове в този блок

after (функция (направено) {driver.end (направено);});

Стъпка 3: Стартирайте тестовия скрипт

Сега нека видим какво прави тестовият скрипт, когато се изпълнява.

Първо стартирайте Selenium Stand Alone Server:

• За Windows използвайте командния ред (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• За Mac или Linux отворете терминала:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Вижте екранната снимка по -горе

След това стартирайте тестовия скрипт:

• За Windows използвайте командния ред (cmd):

  • мока
  • # mocha tutorial1.js

• За Mac или Linux отворете терминала:

  • мока
  • $ mocha tutorial.js
• Вижте екранната снимка по -горе

И какво стана?

Mocha извиква скрипта "tutorial1.js". Шофьорът стартира браузъра (Firefox), зареди страницата и провери заглавието.

Стъпка 4: Примерен уеб сайт

Всички примери се изпълняват срещу този сайт.

Примерният уеб сайт се намира на: Страница с изпитателни инструкции за IO на уеб драйвер

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

Стъпка 5: Конкретни примери

Целият код е достъпен на github: Учебник за IO на уеб драйвер на github

• Проверете връзката и текста на връзката в неуреден списък - "linkTextURL1.js"

  • Неподреденият списък има и връзката е четвъртият елемент от списъка.
  • URL адресът трябва да бъде „https://tlkeith.com/contact.html“

// Проверете текста на връзката Свържете се с нас

it ('трябва да съдържа текст за връзка с нас', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Връзката е намерена:' + връзка); (връзка).should.equal ("Свържете се с нас");});}); // Потвърдете URL за връзка с нас it ('трябва да съдържа URL за връзка с нас', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (функция (връзка) {(връзка).should.equal ("https://tlkeith.com/contact.html"); console.log ('Намерен URL адрес:' + връзка);});});

• Потвърдете авторския текст - „Copyright1.js“

  • Авторските права са в долния колонтитул Този пример показва 2 различни начина за локализиране на текста на авторските права:

    • чрез селектора на елементи като
    • като използвате xpath като селектор на елементи

// Проверете текста за авторски права, като използвате id като селектор на елементи

it ('трябва да съдържа текст за авторски права', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. равно ("Тони Кийт - tlkeith.com @ 2015 - Всички права запазени.");});}); // Проверете текста за авторски права, като използвате xpath като селектор на елементите („трябва да съдържа текст за авторски права“, function () {return driver.getText ("// footer/center/p"). Then (function (link) {console.log ('Намерено е авторско право:' + връзка); (връзка).should.equal ("Тони Кийт - tlkeith.com @ 2015 - Всички права запазени.");});});

• Попълнете полетата на формуляра и изпратете - "formFillSubmit1.js"

  • Попълнете името, фамилията и изпратете, след което изчакайте резултатите.

  • Този пример показва 3 метода за попълване на полето за въвеждане на име:

    • по id
    • чрез xpath от вход
    • чрез xpath от form-> input
  • Също така показва как да изчистите поле за въвеждане

// Задайте първото име с помощта на id на: Тони

it ('трябва да зададете първо име на Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Тони"); console.log ("Име:" + д);});}); // Изчистете първото име, като го използвате id ('трябва да изчистите първото име', function () {return driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Име:" + e);});}); // Задайте първото име с помощта на xpath от вход на: Tony it ('трябва да зададете първо име на Tony', function () {return driver.setValue ("// input [@name = 'fname']" "," Tony ").getValue ("// input [@name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + д);});}); // Изчистете първото име с помощта на xpath от въведеното от него ('трябва да изчистите първото име', function () {return driver.clearElement ("// вход [@name = 'fname']")).getValue ("// вход [@name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" First Name: " + e);});}); // Задайте първото име с помощта на xpath от формуляр на: Tony it ('трябва да зададете първо име на Tony', function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Тони ").getValue (" // формуляр [@id = 'search-form']/input [1] "). Then (function (e) {(e).should.be.equal ("Тони"); console.log ("Име:" + д);});}); // Задайте фамилията с помощта на id на: Keith it ('трябва да зададете фамилията на Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Then (функция (e) {(e).should.be.equal ("Keith"); console.log ("Фамилия:" + e);});}); // Изпратете формуляр и изчакайте резултатите от търсенето („трябва да изпратите формуляр и да изчакате резултати“, function () {return driver.submitForm ("#search-form"). Изпратете формуляр за търсене ');}).waitForVisible ("#резултати от търсенето", 10000).then (функция (д) {console.log (' Резултатите от търсенето са намерени ');});});

• Щракнете върху бутона Показване/скриване и Проверете текста - „showHideVerify1.js“

  • Текстът е в елемент за показване/скриване. Бутонът контролира състоянието.

  • Този пример показва:

    • Щракнете върху бутона, за да разгънете
    • Изчакайте елементът да бъде видим (разгънат)
    • Проверете текста (копираща колода)

// щракнете върху бутона „Повече информация“и проверете текста в разгънат елемент

it ('трябва да щракнете върху бутона с повече информация и да проверите текста', function () {върнете драйвера.click ("#moreinfo"). then (function () {console.log ('Щракнете върху бутона More Info');}). ("#collapseExample", 5000).getText ("// div [@id = 'crashExample']/div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Всичко хубаво е тук!");});});

• Потвърдете грешките в полето на формуляр - "formFieldValidation.js"

  • Използвайте тестови скриптове за проверка на правилните съобщения за грешка.

  • Този пример показва:

    Проверете текстовите съобщения за грешка и потвърдете местоположението (неподредена позиция на списъка)

it ('трябва да съдържа 5 грешки: first/last/address/city/state', function () {

return driver.getText ("// ul [@class = 'alert alert-hazard']/li [1]"). then (function (e) {console.log ('Грешка е намерена:' + e); (e).should.be.equal ('Моля, въведете собствено име');}).getText ("// ul [@class = 'alert alert-hazard']/li [2]"). then (function (e) {console.log ('Намерена грешка:' + e); (e).should.be.equal ('Моля, въведете фамилия');}).getText ("// ul [@class = 'alert alert-hazard „]/li [3]"). getText ("// ul [@class = 'alert alert-hazard']/li [4]"). then (function (e) {console.log ('Грешка е намерена:' + e); (e).should.be.equal ('Моля, въведете град');}).getText ("// ul [@class = 'alert alert-hazard']/li [5]"). then (function (e) {console.log ('Открита грешка:' + e); (e).should.be.equal ('Моля, въведете състояние');}); });

• Циклични данни за валидиране на URL връзка/текст/страница - "LoopDataExample1.js"

  • Този пример показва: Използвайте масив от JSON данни за съхраняване на връзката и името, след което повторете

    • Проверете всеки URL адрес и връзка
    • Щракнете върху връзката и заредете страницата

// Данни за връзка - връзка и текст

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," name ":" linkTextURL1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js "," name ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," name ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," name ":" dynamicBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js "," name ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," име ": "дебу gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // цикъл през всеки linkArray linkArray.forEach (function (d) {it ('трябва да съдържа текст/връзка след това отидете на страница -' + d.name, function () {return driver // уверете се, че сте на началната страница.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// проверете заглавието (title).should.be.equal ("Вход за уеб драйвер - Учебна тестова страница ");}) // намери URL адреса.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('Намерен URL адрес:' + d.link);}) // отидете на страницата URL и проверете дали съществува.click ('a =' + d.name).waitForVisible ("#js-repo-pjax- контейнер ", 10000).then (function () {console.log ('Страница на Github е намерена');});});});

• Циклични статични данни за попълване на полета на формуляр - "loopDataExample2.js"

  • Този пример показва: Използвайте масив от JSON данни за съхраняване на име/фамилия

    • Прегледайте данните, за да попълните полетата на формуляра, след което изпратете формуляра
    • Изчакайте страницата с резултати
    • Проверете името / фамилията на страницата с резултати

// масив от данни - firstName и lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Дон "," lastName ":" Джонсън "}]; … // преминава през всеки dataArray dataArray.forEach (function (d) {it ('трябва да попълва полета, сумитна страница', function () {return driver // уверете се, че сте на началната страница.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// проверете заглавието (title).should.be.equal ("IO на уеб драйвер - Учебна тестова страница");}).setValue ("#fname", d.firstName).getValue ("#fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("First Име: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Then (function (e) {(e).should.be.equal (d.lastName); console.log ("Фамилия:" + e);}).submitForm ("#форма за търсене"). then (function () {console.log ('Изпращане на формуляр за търсене');}).waitForVisible ("#search-results", 10000).then (function () {console.log ('Резултатната страница е намерена');}).getText ("// h1"). then (function (link) {console.log ('Текстът е намерен:' + връзка); (връзка).should.equal ("Добре дошли" + d.firstName + "" + d.lastName + ".");});});});

• Проверете свойствата на CSS - "cssValidation1.js"

  • Този пример показва как:

    • Потвърдете следните CSS свойства:

      • цвят
      • подложка (отгоре, отдолу, отдясно, отляво)
      • Цвят на фона

it ('трябва да съдържа правилния цвят на текста на грешката', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-hazard']/li [1]", "color"). then (function (result) {console.log ('Цвят е намерен:' + result.parsed.hex + "или" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('трябва да съдържа правилна подложка в клетката на таблицата', function () {

връщане драйвер // padding: горе вдясно долу вляво.getCssProperty ("// таблица [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). then (function (резултат) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// таблица [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). then (function (result) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// таблица [@id = 'filelist']/thead/tr [1]/td [1]", "padding- вдясно "). then (function (result) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). then (function (result) {console.log ('padding-left found: ' + result.value); (result.value).should.be.equal (' 5px ');}); });

it ('трябва да съдържа правилен цвят на фона в заглавката на таблицата', function () {

връщане на драйвера.getCssProperty ("// таблица [@id = 'filelist']/thead", "background-color"). then (function (result) {console.log ('background color found:' + result.parsed. hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

Стъпка 6: Съвети и трикове

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

  • Включете регистрирането на ниво драйвер за повече отстраняване на грешки и за създаване на регистрационни файлове.

    • Задайте logLevel на 'подробно'
    • Задайте logOutput на име на директория ('logs')

драйвер = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {желаниCapabilities: {browserName: 'firefox'}});

• Използвайте console.log (), debug (), getText () за отстраняване на грешки.

  • console.log () - Използва се за показване на информация за определяне на състоянието.
  • debug () - Използвайте пауза на браузъра/скрипта, докато enter не бъде натиснат в командния ред.

  • getText () - Използвайте, за да потвърдите, че взаимодействате с правилния елемент.

    Особено полезно с изрази на xpath

// Щракнете върху елемент 3 от списъка

it ('трябва да щракнете върху елемент 3 от списъка', function () {// използвайте getText (), за да проверите дали xpath е правилен за драйвера за връщане на елемента.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). ("Позиция 3");}) // използвайте debug (), за да спрете действието, за да видите какво се случва в браузъра.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Връзката е щракната');}) // изчакайте да се появи формулярът за търсене в Google. д) {console.log ('Резултати от търсенето са намерени');});});

• Използвайте променлива на околната среда за динамична промяна на браузъра:

  • Използвайте променлива на средата SELENIUM_BROWSER, за да извикате различен браузър, без да променяте скрипта за тест всеки път.
  • Изисква лека промяна в кодирането, за да поддържа.

Промени в кода:

// зареждаме драйвера за браузъра

драйвер = webdriverio.remote ({желани възможности: {Име на браузъра: process.env. SELENIUM_BROWSER || 'хром'}});

Поддържани браузъри:

• Internet Explorer - IE 8+ (само за Windows)

  SELENIUM_BROWSER = т.е. мока

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = хром мока

• Opera 12+

  SELENIUM_BROWSER = оперна мока

• Сафари

  SELENIUM_BROWSER = сафари мока

Тестване:

• За Windows използвайте git bash shell:

  • SELENIUM_BROWSER = хром мока
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• За Mac или Linux отворете терминала:

  • SELENIUM_BROWSER = хром мока
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Отзивчиви тестове:

  • Определете точки на прекъсване въз основа на проект или рамка (т.е. начално зареждане).

  • Определете променливите на средата за всяка точка на прекъсване:

    • БЮРОТОК - 1200 px
    • ТАБЛЕТ - 992 px
    • МОБИЛЕН - 768 px

  • Разработете команда за многократна употреба, за да прочетете променливата на средата и да зададете размера на браузъра.

    Вижте примера по -долу

  • Извикайте командата за многократна употреба в тестовия скрипт.

// код за многократна употреба - библиотека // кодов фрагмент if (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } иначе ако (bp == "МОБИЛЕН") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Тестов скрипт

преди (функция (направено) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (драйвер));} // задайте размера на прозореца ((трябва да зададете размера на прозореца), function (done) {// само ширината има значение driver.setWindowSize (winsize.width, winsize.height, function () {}). call (направено);});

• Команди за многократна употреба (персонализирани команди):

  • Web Driver IO е лесно разширяем.
  • Обичам да поставям всички команди за многократна употреба в библиотека. (може би това е старо училище, но работи!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Описание: // Проверява съобщението за грешка при валидиране на формата на фамилията // // Въвеждане: // номер - индекс на грешка (1-5) // Изход: // няма // var verifyLastNameCheckError = function () { var idx = аргументи [0], извикване = аргументи [аргументи.дължина - 1]; this.getText ("// ul [@class = 'alert alert-hazard']/li [" + idx + "]", function (err, e) {console.log ('Открита грешка:' + e); (e).should.be.equal ('Моля, въведете фамилия');}).call (обратно повикване); }; // експортиране на функционалния модул.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Ето конкретните промени, необходими за извикване на функция за многократна употреба

Вижте formFieldValidation.js за пълен работен пример

// изискват командата за многократна употреба - CommonLib

common = require ('./ Common/CommonLib'); … // свързване на командите driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', общ.verifyLastNameCheckError.bind (драйвер)); it ('трябва да съдържа 2 грешки: име/фамилия', function () {// извикваме драйвера на функцията за многократна употреба.verifyFirstNameError (1);.verifyLastNameError (2);});

• Структура на проектния файл/директория:

  • Ето типичната структура на проекта:

    • "Проект" - основна директория на проекта

      • README.md - readme за глобален проект

      • "Common" - директория за глобални функции, общи за всички проекти

        • common -lib.js - глобална библиотека с функции
        • README.md - readme за глобални функции

      • "Продукт1" - директория за продукт 1

        • test-script1.js
        • test-script2.js

        • "Обща" - директория за локални функции за проект 1

          • prod1 -lib.js - локална библиотека с функции за проект 1
          • README.md - readme за локални функции към проект 1

      • "Product2"-директория за продукт 2test-script1.jstest-script2.js

        • "Обща" - директория за локални функции към проект 2

          • prod2 -lib.js - локална библиотека с функции за проект 2
          • README.md - readme за локални функции към проект 2

• Разбийте тестови скриптове на няколко файла:

  • Ето пример за използване на множество файлове:

    • Sanity Check - основен скрипт за тест, за да проверите дали всичко работи
    • Валидиране на статични елементи и текст - проверете всички елементи и текст
    • Валидиране на грешка във формуляр/страница - валидиране на грешка
    • Резултати от търсенето - тествайте динамично съдържание

• Обратни обаждания VS. Обещания:

  • Версия 3 на Web Driver IO поддържа обаждания и обещания.

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

Обратни обаждания

// Задайте/проверете име/фамилия с помощта на функцията за обратно повикване

it ('трябва да зададете/проверите име/фамилия, използвайки обратни извиквания', функция (направено) {driver.setValue ("#fname", "Tony", функция (e) {driver.getValue ("#fname", функция (грешка, e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e); driver.setValue ("#lname", "Keith", функция (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Фамилия:" + e); направено ();});});});});});

Обещания

// Задайте/проверете име/фамилия с помощта на Обещания

it ('трябва да зададете/проверите име/фамилия с помощта на Promises', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(д).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). then (function (e) {(e).should.be.equal ("Keith"); console.log ("Фамилия:" + e);});});

Стъпка 7: Повече ресурси

Ето някои допълнителни ресурси за ваша справка:

• Дискусионни групи (Gitter)

  • Дискусионна група за IO на уеб драйвер
  • Дискусионна група Mocha

• Други интересни проекти

  • Супертест - HTTP твърдения
  • Чай - твърдения

Стъпка 8: Заключение

Прекарах известно време в проучване на технологиите, които да използвам за моя проект. Първоначално започнах със Selenium Web Driver, но преминах към IO Web Driver. Web Driver IO изглеждаше по -лесен за използване и много по -лесен за разширяване (поне документацията за разширяване - командите за многократна употреба бяха по -добри).

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

Технологиите работят много по -добре, отколкото очаквах, но имаше и крива на обучение. След като разбрах как всички компоненти работят заедно, успях да напиша сложни тестови скриптове за много кратко време. Най -трудните скриптове бяха компоненти, базирани на JavaScript, като инструмент за избор на дата и модални селектори.

Никога не съм се определял като разработчик на JavaScript, нито пък съм искал да съм експерт по JavaScript, но използването на тези технологии определено ме мотивира да изостря уменията си за JS.

Надявам се, че тази статия е полезна и примерите са ясни и информативни.

Моля, уведомете ме, ако имате въпроси или коментари.

Благодаря ти, Тони Кийт