Урок за тестване на транспортир: Рамка за инструменти за автоматизация

Съдържание:

Anonim

Какво е тестване на транспортир?

PROTRACTOR е инструмент за тестване, управляван от поведение от край до край, който играе важна роля в тестването на приложения AngularJS и работи като интегратор на решения, съчетаващ мощни технологии като селен, жасмин, уеб драйвер и др. Целта на тестване на транспортир е не само за тестване на приложения AngularJS, но и за писане на автоматизирани тестове за регресия и за нормални уеб приложения.

В този урок за начинаещи ще научите -

  • Защо се нуждаем от рамка за транспортир?
  • Монтаж на транспортир
  • Примерно тестване на приложение AngularJS с помощта на транспортир
  • Изпълнение на кодекса
  • Генерирайте отчети с помощта на Jasmine Reporters

Защо се нуждаем от рамка за транспортир?

JavaScript се използва в почти всички уеб приложения. С нарастването на приложенията JavaScript също се увеличава по размер и сложност. В такъв случай за тестерите става трудна задача да тестват уеб приложението за различни сценарии.

Понякога е трудно да се уловят уеб елементите в приложенията AngularJS с помощта на JUnit или Selenium WebDriver.

Protractor е програма NodeJS, която е написана на JavaScript и работи с Node за идентифициране на уеб елементите в приложенията AngularJS и също използва WebDriver за управление на браузъра с действия на потребителя.

Добре, добре сега да обсъдим какво точно представлява приложението AngularJS?

Приложенията AngularJS са уеб приложения, които използват разширен синтаксис на HTML, за да изразят компонентите на уеб приложенията. Използва се главно за динамични уеб приложения. Тези приложения използват по-малко и гъвкав код в сравнение с нормалните уеб приложения.

Защо не можем да намерим Angular JS уеб елементи с помощта на Normal Selenium Web драйвер?

Ъгловите JS приложения имат някои допълнителни HTML атрибути като ng-повторител, ng-контролер, ng-модел ... и др., Които не са включени в локатори на Selenium. Selenium не е в състояние да идентифицира тези уеб елементи с помощта на Selenium код. Така че, Protractor в горната част на Selenium може да обработва и контролира тези атрибути в уеб приложенията.

Транспортирът е цялостна рамка за тестване на приложения, базирани на Angular JS. Докато повечето рамки се фокусират върху провеждането на модулни тестове за Angular JS приложения, Protractor се фокусира върху тестване на действителната функционалност на приложение.

Преди да стартираме Protractor, трябва да инсталираме следното:

  1. Селен

    Можете да намерите стъпките за инсталиране на Selenium в следните връзки, (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    Инсталиране на NodeJS, трябва да инсталираме NodeJS, за да инсталираме Protractor. Можете да намерите тези стъпки за инсталиране в следната връзка. (https://www.guru99.com/download-install-node-js.html)

Монтаж на транспортир

Стъпка 1) Отворете командния ред и въведете "npm install -g транспортир" и натиснете Enter .

Горната команда ще изтегли необходимите файлове и ще инсталира Protractor на клиентската система.

Стъпка 2) Проверете инсталацията и версията, като използвате „ Транспортир - версия “. Ако успее, ще покаже версията, както е показано на екрана по-долу. Ако не, повторете стъпка 1 отново.

(Стъпки 3 и 4 са незадължителни, но се препоръчват за по-добри практики)

Стъпка 3) Актуализирайте уеб мениджъра на драйвери. Мениджърът на уеб драйвери се използва за провеждане на тестове срещу ъгловото уеб приложение в определен браузър. След инсталирането на Protractor, мениджърът на уеб драйвери трябва да бъде актуализиран до последната версия. Това може да стане чрез изпълнение на следната команда в командния ред.

webdriver-manager update

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

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

webdriver-manager start

Сега, ако отидете на следния URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) във вашия браузър, всъщност ще видите, че мениджърът на уеб драйвери работи във фонов режим.

Примерно тестване на приложение AngularJS с помощта на транспортир

Протракторът се нуждае от два файла, за да стартира, спец файл и конфигурационен файл.

  1. Конфигурационен файл : Този файл помага на транспортира до мястото, където са поставени тестовите файлове (specs.js) и да говори със сървъра на Selenium (адрес на Selenium). Chrome е браузърът по подразбиране за Protractor.
  1. Spec файл: Този файл съдържа логиката и локаторите за взаимодействие с приложението .

Стъпка 1) Трябва да влезем в https://angularjs.org и да въведем текста като "GURU99" в текстовото поле "Въведете име тук".

Стъпка 2) В тази стъпка,

  1. Въведено е името "Guru99"
  2. В изходния текст се вижда "Hello Guru99".

Стъпка 3) Сега трябва да заснемем текста от уеб страницата след въвеждане на името и трябва да проверим с очаквания текст .

Код:

Трябва да подготвим конфигурационен файл (conf.js) и спец файл (spec.js), както беше споменато по-горе.

Логика на spec.js:

describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello GURU99!');});});

Обяснение на кода на spec.js:

  1. опишете („Въведете GURU99 име“, функция ()

    Описаният синтаксис е от рамката на Jasmine. Тук "descri" ("Въведете име на GURU99") обикновено дефинира компоненти на приложение, които могат да бъдат клас или функция и т.н. В набора от кодове, наречен "Enter GURU99", това е просто низ, а не код.

  2. it ('трябва да добавите име като GURU99', функция ()
  3. browser.get ('https://angularjs.org')

    Подобно на Selenium Webdriver browser.get ще отвори нов екземпляр на браузъра със споменатия URL адрес.

  4. елемент (by.model ('yourName')). sendKeys ('GURU99')

    Тук намираме уеб елемента, използвайки името на модела като "yourName", което е стойността на "ng-model" на уеб страницата. Проверете снимката на екрана по-долу

  1. var guru = елемент (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))

    Тук намираме уеб елемента с помощта на XPath и съхраняваме стойността му в променлива "guru" .

  2. очаквайте (guru.getText ()). toEqual ('Здравей, GURU99!')

    Накрая проверяваме текста, който получихме от уеб страницата (използвайки gettext ()) с очакван текст.

Логика на conf.js:

exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};

Обяснение на кода на conf.js

  1. seleniumAddress: 'http: // localhost: 4444 / wd / hub'

    Конфигурационният файл казва на транспортира местоположението на Selenium Address, за да разговаря с Selenium WebDriver.

  2. спецификации: ['spec.js']

    Този ред казва на транспортира местоположението на тестовите файлове spec.js

Изпълнение на кодекса

Тук първо ще променим пътя на директорията или ще отидем до папката, където са поставени confi.js и spec.js в нашата система .

Следвайте следната стъпка.

Стъпка 1) Отворете командния ред.

Стъпка 2) Уверете се, че мениджърът на селенов уеб драйвер работи и работи. За това дайте командата като "webdriver-manager start" и натиснете Enter .

(Ако уеб драйверът за селен не работи и не можем да продължим с тест, тъй като Protractor не може да намери уеб драйвера за обработка на уеб приложението)

Стъпка 3) Отворете нов команден ред и дайте командата като "protractor conf.js", за да стартирате конфигурационния файл.

Обяснение:

  • Тук Protractor ще изпълни конфигурационния файл с даден файл със спецификации в него.
  • Можем да видим селеновия сървър, работещ на „ http: // localhost: 4444 / wd / hub “, който сме дали във файла conf.js.
  • Също така, тук можете да видите резултата колко са предадени и грешки, както в горната екранна снимка .

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

Стъпка 1) Отворете и очаквайте промяна, която ще доведе до spec.js до "'Здравейте, променете GURU99", както по-долу.

След промяна в spec.js :

describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello change GURU99!');});});

Стъпка 2) Запазете файла spec.js и повторете горните стъпки от раздела "Изпълнение на кода"

Сега изпълнете горните стъпки.

Резултат:

Можем да видим резултата като неуспешен, посочен с „F“ на екранната снимка с причината като „Очаквано„ Здравейте GURU99! “ да се равнява на „Здравейте, променете GURU99!“. Освен това показва колко грешки се срещат при изпълнение на код.

Можем ли да постигнем същото с уеб драйвера на Selenium?

Понякога можем да идентифицираме уеб елементите на приложенията AngularJS, използвайки селектор XPath или CSS от уеб драйвера на Selenium. Но в приложенията AngularJS елементите ще се генерират и променят динамично. Така че Protractor е по-добрата практика за работа с приложения на AngularJS.

Генерирайте отчети с помощта на Jasmine Reporters

Transtractor подкрепя репортерите на Jasmine да генерират доклади от тестове. В този раздел ще използваме JunitXMLReporter, за да генерираме автоматично отчети за изпълнение на теста в XML формат.

Следвайте стъпките по-долу, за да генерирате отчети в XML формат.

Инсталиране на Jasmine Reporter

Има два начина да направите това, локално или глобално

  1. Отворете командния ред, изпълнете следната команда, за да инсталирате локално
npm install --save-dev jasmine-reporters@^2.0.0

Горната команда ще инсталира жасминови отчети node-modules локално означава от директорията, където изпълняваме командата в командния ред.

  1. Отворете командния ред изпълнете следната команда за глобална инсталация
npm install -g jasmine-reporters@^2.0.0

В този урок ще инсталираме репортерите за жасмин локално .

Стъпка 1) Изпълнете командата.

npm install --save-dev jasmine-reporters@^2.0.0

от командния ред, както по-долу.

Стъпка 2) Проверете инсталационните папки в директорията . "Node_modules" трябва да е на разположение, ако е успешно инсталиран, както в снимката по-долу.

Стъпка 3) Добавете следния цветен код към съществуващ файл conf.js 

exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',capabilities: {'browserName': 'firefox'},specs: ['spec.js'],framework: 'jasmine2' ,onPrepare: function() {var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true));}};

Обяснение на кода:

В код генерираме отчета " JUnitXmlReporter " и даваме пътя, където да съхраняваме отчета.

Стъпка 4) Отворете командния ред и изпълнете транспортир на команди conf.js.

Стъпка 5) Когато изпълните горния код, junitresults.xml ще бъде генериран в споменатия път.

Стъпка 6) Отворете XML и проверете резултата. Съобщението за грешка се показва във файла с резултатите, тъй като нашият тестов случай е неуспешен. Тестовият случай е неуспешен, тъй като поради очаквания резултат от "spec.js" не е съчетан с действителния резултат от уеб страница

Стъпка 7) Използвайте файла junitresult.xml за доказателства или файлове с резултати.

Резюме:

Въпреки че Selenium може да направи някои от нещата, които прави транспортира, транспортирът е индустриалният стандарт и най-добрата практика за тестване на приложенията AngularJS. Протрактор може също да управлява множество възможности в него и да се справя с динамичните промени на уеб елементите, използвайки ng-модел, ng-щракване ... и т.н. ... (Което селен не може да направи).

Тази статия е предоставена от Ранджит Кумар Енишети