#automatyzacjaWebdriverIO01-Krótka informacja o frameworku, pobranie, konfiguracja, pierwszy projekt – pierwsze testy

Opublikowano przez grzegorz1

Witajcie moi drodzy we wpisie dotyczącym frameworkiem typu node.js o nazwie Webdriver.io.
Strona domowa projektu – > https://webdriver.io/

Jest to kolejny framework co większość nodowych do testów end to end.
Jego cechy to minimalna konfiguracja, integracja z applitools.
Halo halo halo !!! co to jest applitools? – > https://applitools.com/

Otóż w wielkim skrócie applitools to framework / narzędzie do tego by wizualnie porównać apke / stronę na zasadzie regresywnego porównania UI za pomocą zrzutów ekranu, obraz do obrazu.
W applitools dostępny jest darmowy plan, co jest fajną sprawą do prostych testów i sprawdzenia możliwości narzędzia.
Ale ten wpis będzie o WebdriverIO czyli frameworku od node.js, więc do dzieła.

Potrzeba node.js jeśli nie masz go i nie wiesz jak zainstalować poszukaj na moim blogu, w którymś wpisie już to omawiałem, więc na pewno znajdziesz!
Do tego trzebujemy też bash for windows lub np. basha z gita :P.
https://sourceforge.net/projects/mingw-w64/
To jest bash z gita.

Aby przetestować czy mamy działającego sprawnnego nodejs.
W cmd lub bashu wpisujemy node.

To oznacza, że jest git.

Teraz tu na jakimś poziome folderu jesteśmy wklejamy komendę:

mkdir webdriverio-test && cd webdriverio-test

Oznacza to tyle że tworzymy folder o dowolnej nazwie i przechodzimy do niego 😛

Następnie będąc w ów folderze wklejamy to :

npm init -y

Wklejamy teraz to w sumie :
npm i --save-dev @wdio/cli

I tu koniec cmd dalsze komendy, musimy robić w BASHu.

Ja już na tamtym kroku odpaliłem basha i jestem w folderze projektu.

Wklejamy teraz ./node_modules/.bin/wdio config -y

Wywołanie skryptu z parametrem, mniejsza o to.

Po chwili jest git.

mkdir -p ./test/specs
touch ./test/specs/basic.js

Robimy se folder a w nim plik js z testem

mozemy se nano ./test/specs/basic.js

A jak nie lubimy nano to w exploratorze windows przechodzimy tak :
C:\Users\gregk\iotesty\test\specs

I możemy to normalnie notatnikiem czy czymś innym.

const assert = require('assert')

describe('webdriver.io page', () => {
    it('should have the right title', async () => {
        await browser.url('https://www.google.pl')
        const title = await browser.getTitle()
        assert.strictEqual(title, 'Google')
    })
})

Tak przykładowo może wyglądać nasz test.

./node_modules/.bin/wdio wdio.conf.js

Po puszczeniu 1 passed, a więc testy działają poprawnie.

describe('DuckDuckGo search', () => {
    it('searches for WebdriverIO', () => {
        browser.url('https://duckduckgo.com/')

        $('#search_form_input_homepage').setValue('Pogoda lublin')
        $('#search_button_homepage').click()

        const title = browser.getTitle()
        console.log('Tytul strony to : ' + title)
        // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
    })
})

Zapisujesz to sobie jako .js o dowolnej nazwie w folderze <folderprojektu>/test/specs i tutaj

Możemy sobie dodać do folderu test->specs inne testy .js

To tyle do następnego.

Napisz komentarz