Меню

Инструмент за тестване на транспортир за цялостно тестване на приложения AngularJS

protractor testing tool

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

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

Протракторът е инструмент за автоматизиране на тестове за тестване на уеб приложения; комбинирайки мощни технологии като Jasmine, Selenium Webdriver, Node.js и др.

Инструментът за тестване на транспортир е цялостна рамка за тестване, насочена към поведение, създадена, като се има предвид Angular JS приложенията Въпреки че това може да звучи така, сякаш Protractor няма да работи с не-ъглови JS приложения, той наистина.

Той работи еднакво добре както с ъглови, така и с ъглови JS приложения.

Чувствайте се свободни да разгледате цяла серия уроци по AngularJS . В предишния ни урок, разликата между ъгловите версии беше обяснено подробно.

Урок за тестване на транспортир

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

Транспортир срещу Селен WebDriver

Какво прави транспортира различен от традиционния Селен WebDriver ?

Отделете минута, за да отговорите на тези въпроси:

  • Трудно ли е да се определи кога точно уеб страницата е най-накрая заредена (Всички асинхронни елементи са готови и обработени)?
  • Омръзна ли ви да добавяте чакания и спящи към вашия код?
  • Искате ли да се отървете от тромавите усилия за локализиране на ъгловите елементи?
  • Разочарован от локализиране на елементи с променящи се идентификатори?
  • Искате ли да създадете свой собствен локатор?
  • Пишете ли дълъг код дори за най-простите твърдения?
  • Вие сте ентусиаст / фен на JavaScript?

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

Това е обвивка, изградена върху Selenium Webdriver и по този начин предоставя всички възможности на Selenium заедно с много полезни допълнения. То предлага:

Характеристика

То предлага:

1) WaitForAngular

въпроси и отговори за интервю за oracle pl sql

От документацията:

' Инструктирайте WebDriver да изчака, докато Angular завърши рендирането и няма неплатени $ http или $ timeout повиквания, преди да продължи. Имайте предвид, че Protractor автоматично прилага тази команда преди всяко действие на WebDriver. '

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

две) Той има способността да експортира глобална функция елемент , който заема локатор и ще върне ElementFinder. Този ElementFinder има набор от методи за действие, като click (), getText (), sendKeys () и т.н. Това е сърцевината на това как да взаимодействаме с елемента и да получаваме информация от него.

Тази глобална функция помага да се намали синтаксиса за локализиране на елементите. Обърнете внимание на следното изявление, за да намерите елемента както в Selenium WebDriver, така и в Protractor:

Селен Webdriver :

driver.findElement(By.cssSelector('css selector'));

Транспортир :

element(by.css('some-css'));

Синтаксисът изглежда компактен, нали?

3) Някои нови стратегии и функции за локатор, предоставени за намиране на ъгловите елементи, са: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate и т.н.

Как може да ми помогне транспортир?

Разгледайте следните забележителни характеристики:

  • Лесен синтаксис за писане на тестови случаи
  • Възможността да стартирате няколко браузъра наведнъж, като използвате Selenium Grid
  • Локатори, специфични за ъгъла
  • Подкрепа за поведенческо развитие като Jasmine / Mocha
  • Няма нужда да добавяте сън / чакане
  • Поддържа се интеграция с Jenkins / Browser Stack / Grunt и др.
  • Отървете се от справянето с проблема със синхронизирането в уеб сайтове на Angular JS
  • Поддръжка на множество браузъри (Firefox, Chrome, Safari, Internet Explorer)
  • Възможност за стартиране на същите скриптове в мобилни браузъри също без необходимост от промяна на кода

Коя рамка да използвам?

Той поддържа две рамки за тестване на поведенческо развитие (BDD) веднага:

  • Жасмин: Жасмин е стандартната тестова рамка, когато е инсталиран Protractor. В тази статия ще използваме жасмин.
  • Мока: Мока е тестова рамка на JavaScript, която работи на Node.js. Ако искате да използвате Mocha като своя тестова рамка, ще трябва да го настроите с вашия транспортир, а също така ще трябва да използвате интерфейса за управление на поведението и Chai твърдения с Chai, както е обещано (вижте тази връзка за повече информация ).

Как да изтеглите и настроите транспортир

Тъй като това е програма node.js, трябва да инсталирате node.js, за да я стартирате. Node.js може да бъде изтеглен от този URL адрес, като изберете операционната система: Изтегляне на Node.js

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

След като node.js е инсталиран на вашата машина, отворете командния ред (cmd) и натиснете командата по-долу, за да го инсталирате глобално:

npm install -g protractor

‘-G’ се използва за глобално инсталиране на този инструмент. Премахнете го, ако не искате да го инсталирате глобално. Тази команда също така инсталира API на Protractor заедно със сървъра за селен по подразбиране, което означава, че не е задължително да стартирате самостоятелен сървър.

Сега трябва да инсталираме селеновия сървър и ChromeDriver. Използвайте следната команда (също се доставя с транспортир) в cmd:

webdriver-manager update

Това е всичко, от което се нуждаем, за да започнем с написването на първия тест, използвайки тази рамка. Ако желаете, можете да инсталирате всяка IDE / редактор, за да напишете вашия код. Eclipse IDE е популярният, но има и някои по-готини редактори, които да разгледате. Лично аз предпочитам редактора ‘Atom’ за писането на кода на транспортира.

Готови ли сте да създадете първия си тест?

Необходими са 2 файла за стартиране:

  • Конфигурационен файл
  • Файл със спецификации.

The Конфигурационен файл е този, който казва на Protractor къде да намери тестовите файлове (спецификации) / кой браузър да изберете / коя рамка да използвате (Jasmine / Mocha) / къде да говорите с вашия браузър Selenium и други конфигурации. Ако някоя конфигурация не е дефинирана в конфигурационни файлове, тя ще използва настройки по подразбиране.

Spec файлът е този, в който пишем нашия действителен тестов код. Всички наши тестови функционални потоци / твърдения ще бъдат в този конкретен файл. Възможно е да има няколко файла със спецификации въз основа на броя на тестовите случаи, но само 1 файл със спецификации ще може да изпълнява целия тестов пакет от няколко спецификации.

Пример ТЕСТОВ СЛУЧАЙ:

Сега ще напишем прост тестов случай, където ще отидем до URL и ще проверим заглавието на страницата.

Ето стъпките:

  • Създайте нова папка за вашия тестов пакет.
  • Създайте нов файл с име като ‘ js ’. (Всяко име ще свърши работа) Всички спецификационни / конфигурационни файлове ще бъдат с разширение‘ .js ’.
  • Създайте нов файл с името, посочено като „ js '.
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

Сега всички сме готови да започнем с нашето кодиране. Вижте кода по-долу на файла ‘testCaseNameSpec.js’.

Ето как изглежда конфигурационният файл:

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

Сега нека да разбием тези 2 файла и да видим как работят.

# 1) Spec.js

  • Всички команди на ниво браузър ще се обработват от „ браузър ’, Глобален, създаден от Protractor.
  • Тъй като следваме рамката на Жасмин, „ описвам ' и ' то ’Са синтаксисите на Жасмин. Опишете ще съдържа целия край до край на потока от вашия тестов случай, докато ‘то’ може да съдържа някои от тестовите стъпки / сценарии и т.н. Можете да имате няколко ‘ то Блокове във вашата програма, ако желаете.
  • browser.get е прост синтаксис на Selenium, който казва на транспортира да натисне определен URL адрес в браузъра.
  • Тъй като уебсайтът, който се опитваме да ударим, е уеб сайт, който не е с ъгъл, ние задаваме ignoreSynchronization маркирайте към „ вярно ’, Както е показано на ред № 4. Ако не направите този маркер истина, тестът ви ще се провали с грешка„ Angular не може да бъде намерен на страницата “. Причината за това е, че Protractor очаква да работи с ъглови уебсайтове по подразбиране и ако използваме Protractor за валидиране на не-ъгловия уебсайт, трябва да кажем това изрично на Protractor. Ако обаче работите върху ъглови уебсайтове, няма нужда да използвате това изявление, тъй като Protractor по подразбиране ще счита уеб страницата за ъглова.
  • „Очаквам“ не е нищо друго освен твърдението, при което сравняваме заглавието на уеб страницата с някои предварително дефинирани данни. Ще обсъдим повече твърдения в детайли.

# две) conf.js

  • Както беше обсъдено по-рано, конфигурационният файл е този, който съобщава на транспортира основните детайли. Както е показано в кода, рамката е „Жасмин“.
  • Вътре в раздела за възможности са зададени конфигурации на браузъра. Можете да дефинирате името на браузъра като Firefox / chrome и т.н. Можете също така да зададете максималните екземпляри на браузърите, така че едновременно да можете да стартирате множество тестови случаи на различни налични прозорци на браузъра.
  • В „ спецификации ’, Ние даваме пътя на спецификационния файл, т.е. точно къде се намира спецификационният файл по отношение на конфигурационния файл.
  • Има и много други страхотни функции, които можете да прикачите към вашия конфигурационен файл, като например функция за отчитане / onPrepare / време за изчакване и т.н. Ние ще разгледаме няколко от тях в този урок.

Как да стартирате вашите тестови случаи?

Написахме кода и сега ни трябва само малко натискане, за да стартираме кода си. Натиснете следната команда в cmd, за да стартирате програмата си:

protractor conf.js

Тази команда ще започне да изпълнява селеновия сървър, последван от стартиране на вашия тестов скрипт. Можете да видите дневниците в самия cmd или ако желаете, те могат да бъдат заснети и в .txt файл (само добавете >> textFileName.txt след горната команда и регистрационните файлове ще бъдат записани в текстовия файл, намиращ се в същата директория като конфигурационния файл).

Ще се отвори хромиран прозорец, къде SoftwareTestingHelp.com уебсайтът трябва да бъде отворен. Резултатът ще бъде „1 спецификация, 0 грешка“, когато стартирате кода. Това означава, че имахме 1 ‘it’ блока, които се изпълниха с 0 неуспеха.

Сега помислете за спецификационния файл по-долу, където изпълняваме някои действия върху изграждане на уеб страница на AngularJS, така че да можете да видите как транспортира селенът, когато става въпрос за тестване на уебсайта на Angular:

най-добрата безплатна система за почистване на Windows 10
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

Можете да използвате същия conf.js и за стартиране на тази спецификация. Просто не забравяйте да актуализирате името на файла със спецификацията.

Сега, в този спец файл, ние си играем с ъглови JS уебсайтове, за да можете да видите на какво точно е способен Protractor.

Ако стартирате този файл точно както направихме по-рано, ще се отвори уеб страница с 2 текстови полета, падащо меню, бутон и няколко други уеб елемента. Както вече се досещате, това е страница на калкулатора. Даваме 2 цели числа като вход и извършваме операция за умножение.

Както вече обсъдихме, едно от най-големите предимства на използването на този инструмент са неговите уникални техники за локализиране на ъгловите елементи. ‘By.model’ е един такъв начин за намиране на елементи. ‘.SendKeys ()’ е обичайният синтаксис на Selenium за изпращане на стойности в текстови полета и ‘.Click ()’ се използва за щракване върху бутони.

Както беше обсъдено по-рано, 'очаквам' е твърдение, което изисква транспортир да улови резултата от умножението на числата и да го сравни последователно с „10“ и „25“. Простата математика ни казва, че изходът трябва да бъде „25“ и следователно първото твърдение се проваля, а второто преминава.

В резултат на това ще получите ‘ 1 спецификация, 1 неуспех ’В дневниците, когато стартирате кода, което се очаква.

Още някои страхотни функции на Protractor

# 1) Твърдения и пояснения

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

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

Помислете за примера по-долу:

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

В горния пример използваме 2 анотации, ‘BeforeEach’ и ‘AfterEach’ . Тези пояснения са налични и в TestNG (традиционен селен). Тези анотации гарантират, че определена част от кода ще бъде изпълнена преди / след съответното изпълнение на останалия код.

И така, ето как ще се осъществи изпълнението на кода,

  1. Транспортир ще достигне вътре в предиВсеки ‘Блокира първо и ще удари‘ http://juliemr.github.io/protractor-demo/ ’URL в браузъра.
  2. Сега потокът ще се премести в блока ‘it’ и ще функционира ‘ multiplyNumbers ’ ще бъде извикан, който от своя страна ще извърши посочените действия в него, изпращайки контролата обратно до мястото, където е била извикана функцията.
  3. Най-накрая твърдението ще си свърши работата. Сега, ако искаме да се справим с няколко елемента едновременно, можете да използвате ‘element.all’ характеристика на този инструмент. Той ще идентифицира всички налични елементи с посочения локатор (в този случай by.repeater). От вас зависи какво искате да направите с идентифицираните елементи. В този случай сравняваме историята на изчисленията с дадено число.
  4. Тъй като при първото твърдение сравняваме броя на историята на изчисленията с „2“, въпреки че сме извършили изчислението само веднъж, твърдението ще се провали. Второто твърдение обаче ще премине, тъй като след второто изчисление броят на историята ще бъде „2“.

Има много повече налични видове твърдения. Някои от които са дадени по-долу:

а) Вземете текст от уеб елемент и го сравнете с определена стойност:

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

б) Проверете дали на страницата се показва уеб елемент или не:

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

# 2) Работа с множество браузъри / прозорци / раздели

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

а) Отваря се нов раздел, като щракнете върху която и да е връзка

Понякога, когато щракнете върху която и да е връзка, се отваря нов раздел и останалите действия трябва да се извършат в новоотворения прозорец. В този случай, когато пишете кода до точката, в която се отваря нов раздел, трябва да внедрите Window Handler, като използвате следния начин:

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

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

б) Отваряне на изцяло нов браузър с нова сесия

Когато трябва да извършите някои действия в браузър и трябва да извършите допълнителни действия в различна сесия на браузъра, трябва да използваме forkNewDriverInstance . В този случай създаваме нов екземпляр на браузъра със свежо име на браузъра по следния начин:

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

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

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

Веднага след като стартирате този конфигурационен файл, ще видите тестове, изпълняващи се едновременно както във Firefox, така и в Chrome, а дневниците за стартиране ще се показват отделно в командния ред.

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

# 3) Използвайте Page Objects, за да направите вашата рамка още по-добра

Този инструмент е добър сам по себе си, но става непобедим, когато се комбинира с Page Object Model (POM). Повечето от недостатъците му (ако има такива) се преодоляват с обектния модел на страницата. Освен това POM също помага да поддържате проекта си по по-структуриран начин.

Ако не знаете какво е POM, не се притеснявайте. POM е начин за разделяне на тестовия случай на базата на страниците.

Вземете този пример:

Има уебсайт за пазаруване. Вашият тест е да изберете продукт, да го добавите в количката и след това да го закупите.

Сега има два начина за управление на кода на тестовия скрипт за това:

  1. Напишете обикновен тестов случай с всички локатори на една и съща страница, в която е написана вашата логика,
  2. Напишете целия си поток от тестови случаи, вашата логика във вашия файл със спецификации и отделете вашите локатори и тестови данни в различни файлове. Всяка уеб страница ще има еквивалентен файл .js страница. По този начин вашият код ще бъде структуриран и ако има някакъв друг тестов случай, който изисква същия локатор, не е нужно да пишете тези локатори отново, просто импортирайте този файл на локатора и го използвайте според вашите нужди.

Поддържането на вашите тестови случаи може да бъде истинска болка. Ако използвате POM, вашият код ще бъде по-структуриран.

как да направя общ масив в java -

Ето пример за използване на обектния модел на страницата:

обектен модел на страница

Това е потокът в горната снимка:

  1. Има тест, който купува лаптоп. Кодът за потока и логиката ще бъде в purchaseLaptopSpec.js.
  2. Всички страници, които се срещат при закупуване на лаптопа, ще имат 1 ‘.js’ файл с подходящо заглавие. Всички елементи, необходими за закупуване на лаптопа, техните локатори ще бъдат вътре в съответния файл на страницата.
  3. Данните, необходими за този тестов случай, могат да бъдат запазени в папката TestData или във формат .json, или във формат excel.
  4. След като приключите със страниците и локаторите, просто импортирайте тези файлове във вашия файл със спецификации, за да използвате данните за локатор / тест и всички сте готови с вашия тестов случай.

# 4) Отчитане

NPM (Node Package Manager) предоставя различни пакети за отчитане, с които може да бъде заснета екранна снимка на всяка тестова стъпка, а също така, след като тестовото изпълнение завърши, ще генерира HTML отчет за вас. Всичко, което трябва да направите, е да инсталирате тези пакети, като отворите командния ред и натиснете командите по-долу:

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

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

# 5) Интегрирайте се с други мощни инструменти като Git / Jenkins / Browserstack / Grunt

На пазара се предлагат множество инструменти, които помагат да направите вашите тестови случаи още по-добри. Git / Jenkins / BrowserStack / Grunt са някои такива инструменти, които добавят значителна стойност към вашите нормални скриптове за тестване на транспортир. И най-добрата част е, че не е нужно да докосвате вашия спецификационен файл, за да интегрирате своя транспортир с някой от тези инструменти. Това е вашият конфигурационен файл, който ще вземе всички тези неща вместо вас.

Отивам е много мощен инструмент за контрол на версиите. Винаги е най-добрата практика да запазите кода си в Git, ако участват множество разработчици.

Дженкинс е инструмент за непрекъсната интеграция, с който можете да планирате вашите тестови случаи и да го стартирате според вашите нужди. Скрипторите за транспортир също могат да бъдат конфигурирани с Jenkins. Най-доброто използване на вашите тестови случаи на Jenkins е, че е много бързо, а също така можете да стартирате няколко тестови случая наведнъж.

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

Земя е бегач на задачи на JavaScript. Той ви предоставя възможността да изпълнявате няколко задачи вместо вас. Страхотността му е, че има повече от 4000 задачи и можете да създадете още повече задачи според вашите изисквания. Следват няколко важни задачи за ежедневна употреба, за които можем да използваме Grunt:

  1. Избройте всички най-добри практики за кодиране и информирайте незабавно, когато нарушите някоя от тях.
  2. За да създадете множество спецификационни файлове по време на изпълнение. Например , ако има някакъв тест, който искате да стартирате няколко пъти (вариращ от 1 до произволен брой). В този момент това може да изглежда ненужно, но помислете за пускане на който и да е поток за проверка на уебсайтове за пазаруване, който да се изпълнява във всяка отделна налична държава. Би било досадно да създавате няколко спецификации ръчно. Така че, оставете Grunt да направи това вместо вас.
  3. Функцията на часовника. Пишете тестов случай и всеки път, щом запишете кода си, след като направите каквато и да е промяна в него, искате вашият тестов случай да се стартира, Grunt го има.
  4. Обединяване на множество файлове.

Просто опитайте и ще ви хареса.

Заключение

Можете да накарате Селен да работи като транспортир, но защо да преоткривате колелото? Ако Google е положил толкова много усилия, за да накара Protractor да работи като чар, нека го използваме максимално. Поне за уебсайтовете на AngularJS това ще улесни живота ви много.

Освен това тази статия не е само за транспортир. Има голям свят на Protractor и на пазара се предлагат стотици пакети, предлагани от NPM, за да добавите повече функции към вашия тест в допълнение към прости тестови сценарии. Чувствайте се свободни да използвате тези пакети и да ги направите още по-добри.

За автора: Това е пост за гост от Дешанш. Той работи като инженер по разработване на софтуер в тест с един от водещите MNC. Той има богат опит в работата по тестване за автоматизация на селен и транспортир.

Нашият предстоящ урок ще ви помогне да изчистите успешно всяко интервю с AngularJS.

PREV Урок | СЛЕДВАЩ урок

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

^