Меню

Інструмент тестування транспортира для наскрізного тестування програм AngularJS

protractor testing tool

Спробуйте Наш Інструмент Для Усунення Проблем

Що таке транспортир?

Транспортер - це засіб автоматичного тестування для тестування веб-додатків; поєднуючи потужні технології, такі як Jasmine, Selenium Webdriver, Node.js тощо.

Засіб тестування транспортира - це наскрізна поведінкова система тестування, розроблена з урахуванням програм Angular JS. Хоча це може здатися, що Protractor не працюватиме з некутовими програмами JS, він працює.

Він однаково добре працює як з Angular, так і з некутовими програмами JS.

Не соромтеся досліджувати всю серію навчальних посібників з AngularJS . У нашому попередньому підручнику різниця між кутовими версіями було детально пояснено.

Підручник з тестування транспортира

Що ви дізнаєтесь:

Кутомір проти селену WebDriver

Що відрізняє транспортир від традиційного Селен WebDriver ?

Знайдіть хвилину, щоб відповісти на ці запитання:

  • Чи важко визначити, коли саме веб-сторінка остаточно завантажена (усі асинхронні елементи готові та оброблені)?
  • Ви втомилися додавати до свого коду очікування та сну?
  • Ви хочете позбутися громіздких зусиль, щоб знайти кутові елементи?
  • Розчаровані розташуванням елементів зі змінними ідентифікаторами?
  • Ви хочете створити власний локатор?
  • Ви пишете довгий код навіть для найпростіших тверджень?
  • Ви любитель / любитель JavaScript?

Якщо ви відповіли 'Так' на ці запитання, Транспортир може допомогти.

Це обгортка, побудована поверх Selenium Webdriver, і, отже, надає всі можливості Selenium разом із багатьма корисними доповненнями. Він пропонує:

Особливості

Він пропонує:

1) WaitForAngular

реалізація сортування c ++

З документації:

' Доручіть WebDriver почекати, поки Angular не закінчить рендеринг і не виконає жодних викликів $ http або $ timeout, перш ніж продовжити. Зауважте, що Protractor автоматично застосовує цю команду перед кожною дією WebDriver. '

Це означає, що немає необхідності вручну додавати очікування до вашого сценарію, і Protractor буде автоматично чекати завантаження веб-елементів і лише тоді виконуватиме наступні кроки.

два) Він має можливість експортувати глобальну функцію елемент , який бере локатор і повертає ElementFinder. Цей ElementFinder має набір методів дій, таких як click (), getText (), sendKeys () тощо. Це основне в тому, як взаємодіяти з елементом та отримати з нього інформацію.

Ця глобальна функція допомагає зменшити синтаксис пошуку елементів. Подивіться на наступне твердження, щоб знайти елемент як у Selenium WebDriver, так і в транспортирі:

Веб-драйвер селену :

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

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

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

Синтаксис виглядає компактно, чи не так?

3) Деякі нові стратегії та функції локатора, що надаються для пошуку місцезнаходжень елементів Angular: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate тощо

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

Погляньте на такі основні особливості:

  • Простий синтаксис для написання тестових кейсів
  • Можливість запускати кілька браузерів одночасно за допомогою Selenium Grid
  • Локатори, специфічні для кутів
  • Підтримка розвитку, керованого поведінкою, такого як Жасмин / Мокка
  • Не потрібно додавати сну / очікування
  • Підтримується інтеграція з Jenkins / Browser Stack / Grunt тощо.
  • Позбудьтеся вирішення проблеми синхронізації на веб-сайтах Angular JS
  • Підтримка декількох браузерів (Firefox, Chrome, Safari, Internet Explorer)
  • Можливість запускати ті самі сценарії в мобільних браузерах також без необхідності зміни коду

Яку структуру використовувати?

Він підтримує дві основи тестування на основі поведінки (BDD) безпосередньо з коробки:

  • Жасмин: Жасмин є тестовою основою за замовчуванням, коли встановлено Protractor. У цій статті ми будемо використовувати жасмин.
  • Мокко: Мокко - це тестовий фреймворк JavaScript, який працює на Node.js. Якщо ви хочете використовувати Mocha як тестовий фреймворк, вам доведеться встановити його за допомогою транспортира, а також потрібно використовувати інтерфейс Behaviour Driven Development та Chai Assertions з 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 файли:

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

Файл конфігурації це той, який повідомляє Protractor, де знайти тестові файли (специфікації) / який браузер вибрати / який фреймворк використовувати (Jasmine / Mocha) / де поговорити з вашим браузером Selenium та іншими конфігураціями. Якщо будь-яка конфігурація не визначена у файлах конфігурації, вона буде використовувати за замовчуванням.

Файл специфікації - це той, в якому ми пишемо власне тестовий код. Усі наші тестові функціональні потоки / твердження будуть у цьому конкретному файлі. Залежно від кількості тестових випадків може бути декілька файлів специфікацій, але лише 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, який повідомляє Protractor натискати певну 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 блок «це», який виконувався з 0 помилками.

Тепер розглянемо наведений нижче специфікаційний файл, де ми виконуємо деякі дії на веб-сторінці, побудованій на AngularJS, щоб ви могли побачити вплив кутоміра на Selenium, коли справа доходить до тестування веб-сайту Angular:

як перевірити на ін'єкцію sql - -
// 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 помилка 'У журналах під час запуску коду, що очікується.

Ще кілька цікавих особливостей транспортира

# 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’ і 'Після кожного' . Ці анотації також доступні в TestNG (традиційний селен). Ці анотації гарантують, що певний фрагмент коду буде виконаний до / після відповідного виконання коду, що залишився.

Отже, ось як буде відбуватися виконання коду,

  1. Кутомір сягне всередину beforeEach 'Блокувати першим, і він натисне' 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'); });

b) Перевірте, відображається веб-елемент на сторінці чи ні:

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, щоб зробити ваш фреймворк ще кращим

Цей інструмент хороший сам по собі, але стає непереможним у поєднанні з об'єктною моделлю сторінки (POM). Більшість його недоліків (якщо такі є) подолані за допомогою об'єктної моделі сторінки. Більше того, POM також допомагає підтримувати ваш проект у більш структурованому вигляді.

Якщо ви не знаєте, що таке ПОМ, не турбуйтеся. POM - це спосіб розділити ваш тест на основі сторінок.

Візьмемо цей приклад:

Існує веб-сайт для покупок. Ваш тест - вибрати товар, додати його в кошик, а потім придбати.

Тепер для цього існує два способи управління кодом тестового сценарію:

  1. Напишіть простий тестовий приклад із усіма локаторами на одній сторінці, на якій написана ваша логіка,
  2. Запишіть увесь свій потік тесту, свою логіку у файл специфікації та розділіть локатори та дані тесту в різні файли. Кожна веб-сторінка матиме еквівалентний файл сторінки .js. Таким чином, ваш код буде структурований, і якщо є якийсь інший тестовий випадок, який вимагає того самого локатора, вам не потрібно писати ці локатори знову, просто імпортуйте цей файл локатора та використовуйте його відповідно до ваших потреб.

Ведення тестів може бути справжньою проблемою. Якщо ви використовуєте POM, ваш код буде набагато структурованішим.

створити make-файл c ++

Ось приклад використання об’єктної моделі сторінки:

об

Ось такий потік є у наведеному вище знімку:

  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 - ось деякі з таких інструментів, які додають значну цінність вашим звичайним тестовим сценаріям Protractor. І найкраща частина полягає в тому, що вам не потрібно торкатися файлу специфікацій, щоб інтегрувати ваш транспортир із будь-яким із цих інструментів. Це ваш файл конфігурації, який прийме всі ці речі за вас.

Іди - це дуже потужний інструмент контролю версій. Завжди найкращою практикою є зберігати свій код у Git, якщо залучено кілька розробників.

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

BrowserStack - це інструмент крос-браузерного тестування, який також може бути використаний для тестування ваших програм у різних браузерах. Його також можна інтегрувати з Protractor, додавши облікові дані browserStack у ваш конфігураційний файл.

Земля є програмою виконання завдань JavaScript. Це надає вам можливість виконувати кілька завдань за вас. Його дивовижність полягає в тому, що існує понад 4000 завдань, і ви можете створити ще більше завдань відповідно до ваших вимог. Нижче наведено кілька важливих завдань щоденного використання, для яких ми можемо використовувати Grunt:

  1. Перелічіть усі найкращі практики кодування та негайно повідомте про будь-яке порушення цього.
  2. Для створення декількох файлів специфікацій під час виконання. Наприклад , якщо є якийсь тестовий приклад, який ви хочете запустити кілька разів (від 1 до будь-якого числа). На даний момент це може здатися непотрібним, але подумайте про те, щоб запустити будь-який потік оформлення веб-сайтів для покупок, який буде запущений у кожній доступній країні. Було б нудно створювати кілька специфікацій вручну. Тож, нехай Грунт зробить це за вас.
  3. Особливість годинника. Ви пишете тестовий приклад і кожного разу, як тільки зберігаєте свій код після внесення будь-яких змін у нього, ви хочете, щоб ваш тестовий кейс запускався, Grunt його отримав.
  4. Об'єднання кількох файлів.

Просто спробуйте, і вам сподобається.

Висновок

Ви можете змусити Селен працювати як транспортир, але навіщо заново винаходити колесо? Якщо Google доклав стільки зусиль, щоб «Транспортер» працював як оберіг, дозвольте використовувати його в повній мірі. Принаймні для веб-сайтів AngularJS це значно полегшить вам життя.

Крім того, ця стаття стосується не просто транспортира. Існує великий світ Protractor, і на ринку пропонуються сотні пакетів, пропонованих NPM, щоб додати більше можливостей до вашого тесту на додаток до простих сценаріїв тестування. Не соромтеся користуватися цими пакетами та зробити їх ще кращими.

Про автора: Це гостьовий допис Дешанша. Він працює інженером-розробником програмного забезпечення в тесті з одним з провідних МНК. Він має великий досвід роботи з тестування автоматики селену та транспортера.

Наш майбутній підручник допоможе вам успішно очистити будь-яке інтерв’ю AngularJS.

НАЗАД Підручник | НАСТУПНИЙ підручник

Рекомендована література

^