Jak to zrobić w JavaScriptMini warsztat automatyzacji testów

Podziękowania

Chciałbym na wstępie podziękować Łukaszowi Łukasikowi i Wojtkowi Łuczakowi za inspiracje i pomoc w zmaganiach z JavaScript.

Wstęp

Materiał mini warsztatu zakłada, że uczestnik posiada podstawową wiedzę o testowanie aplikacji web podstawową wiedzę z zakresu programowania w dowolnym języku podstawową wiedzę o css i xpath

Materiał nie ma za zadanie nauczyć programowania w JavaScript Materiał dostarcza i opisuje wzorce, dzięki którym można stworzyć testy nie znając

dokładnie JavaScript Repozytorium z przykładami znajduje się pod adresem

https://github.com/jacekokrojek/jak-to-zrobic-w-js

node.js

Środowisko pozwalające wykonywać kod JavaScript Podstawowe komendy:

node – uruchamia kod JavaScript• node – uruchamia interpreter• node <plik> - uruchamia kod z pliku

npm – zarządza pakietami• npm install [nazwa_modułu][@wersja] [- g] • npm ls• npm uninstall

Zadanie

Uruchom powłokę JavaScript, zdefiniuj poniższe zmienne i wykorzystaj polecenie console.log() do wyświetlenia ich wartości.

var manuTitle = "Strona główna";var pageTitle = "Agile & Automation Days " + "| Konferencja i Warsztaty";var year = 2015;var pageTitleWithYear = pageTitle + " " + year;

Zadanie

Uruchom powłokę JavaScript, zdefiniuj poniższe zmienne i wykorzystaj polecenie console.log() do wyświetlenia ich wartości.

var menuTitle0 = "Strona główna";var menuTitle1 = "O wydarzeniu";var menuTitles = [menuTitle0, menuTitle1]

Czy umiesz wyświetlić każdy z elementów tablicy menuTitles osobno ?

Zadanie

Uruchom powłokę JavaScript, zdefiniuj poniższe zmienne i wykorzystaj polecenie console.log() do wyświetlenia ich wartości.

var menuItem0 = { index: 0, title: "Strona główna"};var menuItem1 = { index: 1, title: "O wydarzeniu "};var menuItems = [ menuItem0, menuItem1 ];

Czy umiesz wyświetlić tytuł każdego z elementów tablicy osobno?

Protractor

Pracuje w środowisku node.js Umożliwia testowanie zachowania aplikacji w przeglądarce Bazujące na funkcjach Selenium Webdriver

Dostęp do funkcji WebDriver poprzez obiekt browser lub browser.driver Rozszerza i ułatwia korzystanie funkcji WebDriver Do uruchomienia testu wymagane są dwa elementy

Plik konfiguracyjny Kod testu

Jasmine

Narzędzie organizujące testy w JavaScript Dostarcza szablon testu Dostarcza bogaty zestaw asercje (ang.machers) np.

expect(true).toEqual(true) expect(true).not.toEqual(false)

Przykładowy test

Przykładowy kod łączący funkcje Protractor i Jasmine

describe('Agile & Automation Days homepage', function() {it('should have Agile & Automation Days …'), function(){

var expectedTitle = "Agile & Automation Days " +" "| Konferencja

i Warsztaty";browser.driver.get('http://aadays.pl/');

var pageTitle = browser.driver.getTitle();expect(pageTitle).toEqual(expectedTitle);

});

Gulp

Narzędzie budujące i automatyzujące zadania Konwencja code over configuration

function runSpec(confName, suiteName) { return gulp.src([]) .pipe(protractor ( { configFile: confName, args: ['--suite', suiteName] } ) ) .on('end', function() {

console.log('Test completed.'); }) .on('error', function (e) { throw e });}

Zadanie

Uruchom przykładowy test poleceniem:gulp test-minimal

JasmineReporter

Dla Jasmin zostało napisanych kilka modułów poprawiających sposób raportowania wyników. jasmine-reporters – zapisuje wyniki w formacie JUnitXML jasmine-spec-reporter – Wyświetla wyniki wykorzystując nazwy specyfikacji oraz

testów protractor-html-screenshot-reporter – zapisuje wyniki testów w formacie HTML

wraz z screenshot'ami tworzonymi na zakończenie testu

Zadanie

Uruchom przykładowy test poleceniem:gulp test-test-with-reporter

Porównaj sposób raportowanie wyników.

element

Funkcja element pozwala na odnajdywanie elementu na stronie

element(by.css('p.copyright'));element(by.xpath('//h3[contains(text(),"Agenda")]'));element(by.tagName ('a'));

Na elemencie możemy wykonywać operacje

element(by.css('p.copyright')).isPresent();element(by.css('p.copyright')).getText();element(by.css('p.copyright')).getInnerHtml();element(by.css('a.btn-big')).click();

Zadanie

Uzupełnij kod 2 kolejnych specyfikacji

element.all

Funkcja element.all pozwala na odnajdywanie wielu elementów na stronie i tworzenie z nich tablicy

element.all(by.css('div.frontpage-block-wrap > h3'));element.all(by.css('figcaption'));

Do elementów w tablicy mamy dostęp poprzez funkcje

element.all(by.css('div.frontpage-block-wrap > h3')).first();element.all(by.css('div.frontpage-block-wrap > h3')).last();element.all(by.css('div.frontpage-block-wrap > h3')).get(1);

Zadanie

Uzupełnij kod 2 kolejnych specyfikacji * Wykonaj zadanie korzystając z funkcji map oraz filter

require and export

Funkcja require wczytuje moduł JavaScript

var homePage = require("home.js"); // var homePage = require("home");var homePage = require("data.json"); // var homePage = require("data");

Funcja export pozwala wyeksportować obiekt

module.exports = {config: {db_host:"localhost", db_port: "3303" }}module.exports = new HomePage();

Page object pattern w JavaScript

W JavaScript istnieje kilka możliwości tworzenia obiektu, jedna z nich to

var HomePage = function() {

this.registerButton = element(by.css('a.btn-big'));

this.get = function() { browser.driver.get('http://aadays.pl/'); }; this.clickRegisterButton = function() { this.registerButton.click(); };

};var homePage = new HomePage(); // module.exports = new HomePage();

Zadanie

Zmodyfikuj kod obiektu home.js o funkcję pozwalającą na sprawdzanie tekstów linków w stopce strony. Następnie zmodyfikuj specyfikację home.spec.js tak aby sprawdzała poprawność linków w stopce.

Zmodyfikuj specyfikacje smoke.spec.js tak aby zawierała test sprawdzający czy użytkownik jest przeniesiony do strony 'O wydarzeniu' po naciśnięciu odpowiedniego link'a ze stopki.

Importowanie modułów

Możemy tworzyć moduły nie tylko dla stron ale również dla ich powtarzających się fragmentów a następnie importować je do wybranych stron.

var HomePage = function() {

this.footer = require('../modules/footer');…

}module.exports = new HomePage();

Zadanie

Wyodrębnij moduł stopki i zaimportuj go do modułu home.js

Dziedziczenie w JavaScript

Klasa bazowa i jej funkcje powinna być zdefiniowana jak poniżej

var Page = function () {};Page.prototype.load = function (url) {

browser.get('http://aadays.pl/' + url);};Page.prototype.getTitle = function() { return browser.driver.getTitle();};module.exports = Page;

Dziedziczenie w JavaScript

Obiekt dziedziczący powinien należy zdefiniować w następujący sposób:

var Page = require('page');var HomePage = function() {

Page.call(this);this.registerButton = element(by.css('a.btn-big'));this.clickRegisterButton = function() {

this.registerButton.click();};

};HomePage.prototype = Object.create(Page.prototype);HomePage.prototype.constructor = HomePage;

Zadanie

Bazując na pliku page.example.js stwórz obiekt paga.js, który będzie funkcją bazową dla obiektu homePage. Dodaj do obiektu page.js moduł stopki.Zmodyfikuj pliki event.js oraz home.js tak aby zdefiniowane w nich obiekty dziedziczyły funkcje z obiektu page.

Co jeszcze

Repozytorium zawiera przykłady Przesuwania elementów strony Logowania Pobierania informacji o czasie ładowania strony Screenshot'y