{"id":688,"date":"2021-11-05T12:30:14","date_gmt":"2021-11-05T12:30:14","guid":{"rendered":"https:\/\/testeroprogramowania.pl\/?p=688"},"modified":"2021-11-05T12:30:55","modified_gmt":"2021-11-05T12:30:55","slug":"testy-interfejsu-uzytkownika","status":"publish","type":"post","link":"https:\/\/testeroprogramowania.pl\/index.php\/2021\/11\/05\/testy-interfejsu-uzytkownika\/","title":{"rendered":"Testy interfejsu u\u017cytkownika"},"content":{"rendered":"\n

Ten wpis jest kontynuacj\u0105 serii dotycz\u0105cej r\u00f3\u017cnych poziom\u00f3w test\u00f3w. Przed przyst\u0105pieniem do czytania zach\u0119cam Ci\u0119 do zapoznania si\u0119 z poprzednimi postami o testach jednostkowych<\/a> i testach integracyjnych<\/a>. W tym wpisie postaram si\u0119 przybli\u017cy\u0107 testy na poziomie interfejsu u\u017cytkownika.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Aplikacja <\/h2>\n\n\n\n

Nasza aplikacja nie zmienia si\u0119 pod wzgl\u0119dem funkcjonalno\u015bci, kt\u00f3r\u0105 dostarcza. Nie b\u0119dzie to ju\u017c zwyk\u0142y kalkulator, a aplikacja kt\u00f3ra liczy ile wybranej waluty mo\u017cemy otrzyma\u0107, gdy posiadamy konkretn\u0105 ilo\u015b\u0107 polskich z\u0142otych. W tym wpisie Nasza aplikacja zyskuje interfejs graficzny i jest gotowa do interakcji z realnymi u\u017cytkownikami. <\/p>\n\n\n\n

Testowana funkcjonalno\u015b\u0107<\/h2>\n\n\n\n

Nasza aplikacja posiada interfejs u\u017cytkownika dost\u0119pny pod adresem: https:\/\/testeroprogramowania.github.io\/selenium\/CurrencyCalculator.html  Interfejs graficzny sk\u0142ada si\u0119 z 3 element\u00f3w – dw\u00f3ch p\u00f3l tekstowych oraz przycisku. W pierwszym polu tekstowym wprowadzamy ilo\u015b\u0107 z\u0142ot\u00f3wek, kt\u00f3re chcemy wymieni\u0107, a w drugim polu podajemy nazw\u0119 waluty. Po wprowadzeniu danych wybieramy przycisk „Przelicz” co zwraca Nam ilo\u015b\u0107 waluty jak\u0105 otrzymamy za konkretn\u0105 ilo\u015b\u0107 z\u0142ot\u00f3wek. <\/p>\n\n\n\n

Jak przeprowadzi\u0107 test?<\/h2>\n\n\n\n

W celu przeprowadzenie testu nale\u017cy wykona\u0107 nast\u0119puj\u0105ce kroki:
1. Przej\u015b\u0107 na stron\u0119 https:\/\/testeroprogramowania.github.io\/selenium\/CurrencyCalculator.html 
2. Wprowadzi\u0107 warto\u015b\u0107 w pole ilo\u015b\u0107 z\u0142 
3. Wprowadzi\u0107 warto\u015b\u0107 w pole nazwa waluty.
4. Klikn\u0105\u0107 na przycisk „Przelicz”
5. Zweryfikowa\u0107 czy przeliczona warto\u015b\u0107 jest zgodna z oczekiwan\u0105 <\/p>\n\n\n\n

Jak dzia\u0142a aplikacja?<\/h2>\n\n\n\n

U\u017cytkownik wprowadza wymagane warto\u015bci do p\u00f3l na stronie internetowej. Po klikni\u0119ciu przycisku Przelicz, dane z pola ilo\u015b\u0107 z\u0142ot\u00f3wek i waluta s\u0105 wysy\u0142ane do metody kt\u00f3ra by\u0142a testowana podczas test\u00f3w integracyjnych ( calculate()). Nast\u0119pnie metoda calculate() \u0142\u0105czy si\u0119 z serwisem NBP i pobiera aktualny kurs wybranej waluty, a nast\u0119pnie wykorzystuje go w metodzie div() kalkultora. Wynik dzia\u0142ania jest pobierany i przedstawiany u\u017cytkownikowi w postaci alertu.<\/p>\n\n\n\n

Pierwszy test – happy path<\/h2>\n\n\n\n

Pierwszy test b\u0119dzie tzw. happy pathem, czyli sytuacj\u0105 w kt\u00f3rej podajemy bardzo proste dane wej\u015bciowe, kt\u00f3re nie powinny zepsu\u0107 naszej aplikacji. Za\u0142\u00f3\u017cmy, \u017ce wprowadzamy warto\u015b\u0107 1000 z\u0142 oraz nazw\u0119 waluty jako USD. Po naci\u015bni\u0119ciu przycisku przelicz powinien pojawi\u0107 si\u0119 alert z wynikiem dzielenia warto\u015bci 1000 z\u0142 przez warto\u015b\u0107 kursu dolara na dany dzie\u0144 dost\u0119pnego w serwisie NBP. W naszym przypadku dla kursu dolara (4 z\u0142) oczekiwany rezultat to 250 USD. Opisany test zako\u0144czy\u0142 si\u0119 sukcesem. Wynik jest zgodny z oczekiwanym. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Drugi test<\/h2>\n\n\n\n

Drugi test b\u0119dzie zak\u0142ada\u0142, \u017ce u\u017cytkownik przez pomy\u0142k\u0119 lub celowo wprowadzi nieodpowiednie warto\u015bci. Pami\u0119tamy, \u017ce w przypadku, gdy wprowadzimy nieodpowiednie warto\u015bci to nasza aplikacja powinna zwr\u00f3ci\u0107 warto\u015b\u0107 0 jako wynik dzia\u0142ania. Spr\u00f3bujemy przetestowa\u0107 dzia\u0142anie naszej aplikacji dla r\u00f3\u017cnych walut i r\u00f3\u017cnych ilo\u015bci polskich z\u0142otych. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nasza aplikacja nie zachowuje si\u0119 poprawnie. Dostajemy komunikat o tre\u015bci „Error” co nie jest zgodne z oczekiwanym zachowaniem programu. Mo\u017cemy zg\u0142osi\u0107 b\u0142\u0105d i oczekiwa\u0107 na odpowied\u017a od programisty. Posiadaj\u0105c w projekcie testy jednostkowe i integracyjne jeste\u015bmy w stanie w \u0142atwy spos\u00f3b okre\u015bli\u0107, \u017ce problem jest powi\u0105zany z komunikacj\u0105 mi\u0119dzy interfejsem u\u017cytkownika i warstw\u0105 logiki biznesowej. <\/p>\n\n\n\n

Podsumowanie<\/h2>\n\n\n\n

W tym wpisie na prostym przyk\u0142adzie przedstawi\u0142em ide\u0119 test\u00f3w UI . Jest to poziom test\u00f3w naj\u0142atwiejszy do zrozumienia, poniewa\u017c ka\u017cdy z Nas by\u0142 kiedy\u015b u\u017cytkownikiem jakiej\u015b aplikacji i weryfikowa\u0142 jej dzia\u0142anie poprzez interakcj\u0119 z przygotowanym interfejsem u\u017cytkownika. Testy UI nie wymagaj\u0105 umiej\u0119tno\u015bci programowania i zag\u0142\u0119biana si\u0119 w kod \u017ar\u00f3d\u0142owy. Oczywi\u015bcie warto wiedzie\u0107 jak powinna dzia\u0142a\u0107 aplikacja, aby poprawnie weryfikowa\u0107 wyniki test\u00f3w <\/p>\n","protected":false},"excerpt":{"rendered":"

Ten wpis jest kontynuacj\u0105 serii dotycz\u0105cej r\u00f3\u017cnych poziom\u00f3w test\u00f3w. Przed przyst\u0105pieniem do czytania zach\u0119cam Ci\u0119 do zapoznania si\u0119 z poprzednimi postami o testach jednostkowych i testach integracyjnych. W tym wpisie postaram si\u0119 przybli\u017cy\u0107 testy na poziomie interfejsu u\u017cytkownika. Aplikacja Nasza aplikacja nie zmienia si\u0119 pod wzgl\u0119dem funkcjonalno\u015bci, kt\u00f3r\u0105 dostarcza. Nie […]<\/p>\n","protected":false},"author":1,"featured_media":689,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-688","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/posts\/688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/comments?post=688"}],"version-history":[{"count":5,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/posts\/688\/revisions"}],"predecessor-version":[{"id":696,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/posts\/688\/revisions\/696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/media\/689"}],"wp:attachment":[{"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/media?parent=688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/categories?post=688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/tags?post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}