#automatyzacjaNightwatch.js01-Pobranie, instalacja, konfiguracja oraz pierwszy projekt z prostymi przykładami

Opublikowano przez grzegorz1

Siemanko wtorkowy prawie, że poranku !

Kolejny wpis, kolejny framework. Tym razem Nightwatch.js.
Czym jest ten ten framework ?
Jest to JavaScriptowe wsparcie do testów end to end, czyli właściwie to testy UI, nie zastanawiając się zbytnio nad warstwą pod spodem. Testy UI czyli takie testy użytkownika końcowego, a więc większość testów automatycznych czyli najbardziej powszechny i pożądany typ testów automatycznych. P.s. testy e2e, to nie pojęcie wyłącznie zarezerwowane dla automatów, ale również dla testów manualnych.

Każdy kto czyta tego bloga, wie, że jestem osobą bardziej techniczną niżeli teoretyczną, zatem zaczynamy ! 😀

Przypominam, że dobra muza to podstawa sukcesu !

Czego będziemy potrzebować, jak to z większością frameworków JS bywa, są dystrybuowane za pomocą npm.
NPM czyli manager pakietów środowiska Node.js.
Intrukcja pobierania, instalacji i konfiguracji była w tym wpisie – > https://gregkaqa.pl/index.php/2020/01/13/automatyzacjapuppeteer01-zapoznanie-sie-z-narzedziem-puppeteer-pobieranie-konfiguracja-prosty-test

Okej, czas na stworzenie pierwszego projektu. Będziemy do niego potrzebować cmd oraz z wpisu wyżej Visual Code.

Taka wtyczka nam się przyda pod nasze testy.

Tworzymy gdzieś folder naszego projektu ja zrobiłem to na pulpicie.

Stworzenie pierwszego projektu

Na początek wykorzystując CMD inicjalizujemy nasz folder z projektem.
Polecenie aby to zrobić to : npm init -y

Utworzył nam się domyślny plik package.json

Teraz w tym projekcie muszą się znaleźć moduły noda.

Po poprawnym pobraniu modułów, nasz projekt powoli się rozrasta.

Nasz plik package.json wygląda następująco
Zmieniamy w nim linijke z automatycznie wygenerowaną nazwą testu na :
"test": "nightwatch"

Konfiguracja projektu

Łapcie całość kodu : 

{
  "name": "nightwatchproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "nightwatch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nightwatch": "^1.3.2"
  }

}

Można śmiało uruchomić test i sprawdzić co się stanie, w tym celu w terminalu w visual code wpisujemy : npm test
Jeśli nie macie terminala widok menu view – > terminal.

Odpalenie testu się powiodło, został stworzony plik nightwatch.conf
Ale dostaliśmy jasną informację, że brakuje GeckoDriver czyli przeglądarki Firefoxa, co z tym faktem robimy ?

npm install geckodriver --save-dev

Instalujemy driver przeglądarki firefox, jak najbardziej możemy to uczynić z poziomu Visual Coda.

Chwila pogadanki, nasz framework podczas uruchamiania testów, stworzył nam domyślny plik nightwatch.conf.js.
Jest to nic innego jak konfiguracja dotycząca m.in driverów przeglądarek lub tego gdzie znajdują się nasze pliki .js z testami.

Właściwie, wszystko co potrzebne w konfiguracji znajdującej się w pliku nightwatch.conf.js jest, kiedy jakiś czas temu to sprawdzałem, wszystko trzeba było przepisywać z dokumentacji, więc tutaj wielki plus za ‘zero config’.

Wpisując ponownie npm test jest już dużo lepiej

Test nie robi nic poza odpaleniem binarki webdrivera przeglądarki firefox, a następnie jego zamknięcia. Widzimy wersję oraz platformę na której odpalamy nasz test.

Piszemy pierwszy prosty test

module.exports = {
    'Nightwatch pierwszy test'(browser){
        browser
        .url('https://www.bing.com')
        .waitForElementVisible('.hp_body')
        .assert.containsText('.msft', '© 2020 Microsoft')
        }
}

Pierwszy test puszczony wszystko działa jak należy !

Zmieniam z bing na duckduck, ponieważ na bingu są słabe selektory, a ja kiedyś spać muszę 😀

module.exports = {
'Nightwatch pierwszy test'(browser){
    browser
        .url('https://duckduckgo.com/')
        .waitForElementVisible('#search_form_input_homepage','Weryfikacja czy pole input text jest widoczne.')
        .setValue('#search_form_input_homepage','pogoda lublin')
        .click("#search_button_homepage")
        .assert.containsText('#links', 'twojapogoda.pl',)
    }
}

Tak to się prezentuje, na koniec zróbmy jakieś zrzut ekranu co ?

W tym celu stworzyłem dodatkowy folder i dopisałem następującą linijkę do kodu : .saveScreenshot('./reports/pogoda.png')

No i się udało mamy screenshota testy nam hulają 🙂

W tym wpisie to by było na tyle, dzięki za przeczytanie, likowanie i udostępnianie 🙂
Widzimy się w następnym, piona !!!
p.s. opracuje jakiegoś githuba, w którym te projekty będę wam udostępniać, oczywiście wrzucę też historyczne.

Napisz komentarz