狠狠撸

Jak to zrobi? w JavaScript
Mini 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
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
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.
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');
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

狠狠撸

AADays 2015 - Jak to zrobic w JavaScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to AADays 2015 - Jak to zrobic w JavaScript (20)

AADays 2015 - Jak to zrobic w JavaScript