{"id":760,"date":"2022-01-29T19:33:43","date_gmt":"2022-01-29T19:33:43","guid":{"rendered":"https:\/\/testeroprogramowania.pl\/?p=760"},"modified":"2022-01-29T19:33:45","modified_gmt":"2022-01-29T19:33:45","slug":"pierwszy-test-automatyczny-lokalizowanie-elementow-i-wykonywanie-akcji","status":"publish","type":"post","link":"https:\/\/testeroprogramowania.pl\/index.php\/2022\/01\/29\/pierwszy-test-automatyczny-lokalizowanie-elementow-i-wykonywanie-akcji\/","title":{"rendered":"Pierwszy test automatyczny – lokalizowanie element\u00f3w i wykonywanie akcji"},"content":{"rendered":"\n

Z tego wpisu dowiesz si\u0119 jak zlokalizowa\u0107 element na stronie i wykona\u0107 na Nim jak\u0105\u015b akcj\u0119. Celem naszego testu jest otwarcie nowego okna przegl\u0105darki, pobranie wyszukiwarki\u00a0bing.com<\/em>, wyszukanie frazy „kotek”
i przej\u015bcie do zak\u0142adki obrazki.<\/p>\n\n\n\n

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

W jaki spos\u00f3b lokalizowa\u0107 elementy na stronie?<\/h2>\n\n\n\n

W celu zlokalizowania elementu na stronie b\u0119dziemy musieli prze\u015bledzi\u0107 jej struktur\u0119 HTML. Selenium dostarcza nam szereg technik, kt\u00f3re pozwalaj\u0105 nam znale\u017a\u0107 jaki\u015b element korzystaj\u0105c z pewnych w\u0142a\u015bciwo\u015bci HTML tego elementu. Do technik lokalizowania element\u00f3w na stronie nale\u017c\u0105 mi\u0119dzy innymi warto\u015b\u0107 id, nazwa klasy, nazwa tagu, tekst linku czy bardziej skomplikowane techniki jak xpath i css. W naszym przypadku elementy b\u0119dzie mo\u017cna zlokalizowa\u0107 za pomoc\u0105 warto\u015bci id, kt\u00f3ra jest najlepsz\u0105 z technik w przypadku, gdy warto\u015b\u0107 tego atrybutu jest unikalna.<\/p>\n\n\n\n

Jak podejrze\u0107 kod HTML danego elementu?<\/h2>\n\n\n\n

W celu podejrzenia strukrury HTML musimy skorzysta\u0107 z narz\u0119dzi deweloperskich w przegl\u0105darce internetowej. Otwieramy przegl\u0105dark\u0119, przechodzimy na stron\u0119, kt\u00f3rej struktur\u0119 chcemy sprawdzi\u0107 i naciskamy na przycisk F12.
Spowoduje to otwarcie tzw. narz\u0119dzi deweloperskich, kt\u00f3re pozwalaj\u0105 Nam mi\u0119dzy innymi na podgl\u0105danie struktury HTML, ruchu sieciowego czy te\u017c korzystanie z konsoli. W celu podejrzenia struktury HTML powinni\u015bmy przej\u015b\u0107 do zak\u0142adki Elements, a naszym oczom powinna ukaza\u0107 si\u0119 struktura ca\u0142ej strony. <\/p>\n\n\n\n

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

\n\nMo\u017cemy r\u0119cznie szuka\u0107 konkretnego elemetu w ca\u0142ej strukturze. Pole tekstowe to tag „input”, ale takich tag\u00f3w mo\u017ce by\u0107 wiele na danej stronie. Je\u017celi szukamy konkretnego elementu na danej stronie warto skorzysta\u0107 z inspektora (ikona oznaczona na czerwono).\n\n<\/p>\n\n\n\n

Znalezienie pola tekstowego
i wpisanie szukanej warto\u015bci<\/h2>\n\n\n\n

Aby znale\u017a\u0107 konkretny element na stronie za pomoc\u0105 inspektora wybieramy jego ikonk\u0119 w lewym g\u00f3rnym rogu narz\u0119dzi deweloperskich ( ikona oznaczona na czerwono) . Nast\u0119pnie naje\u017cdzamy kursorem na interesuj\u0105cy nas element i w niego klikamy. Powoduje to pod\u015bwietlenie konkretnego fragmentu kodu HTML odpowiedzialnego za dany element na stronie. Pozwala nam to znale\u017a\u0107 charakterystyczn\u0105 warto\u015b\u0107 id, klasy czy atrybytu name dla danego elementu na stronie.<\/p>\n\n\n\n

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

\n\nW naszym przypadku pole wyszukiwania posiada atrybut id o warto\u015bci „sb_form_q”. Wykorzystamy t\u0119 warto\u015b\u0107 w kodzie, aby znale\u017a\u0107 ten element i na niego klikn\u0105\u0107. Jak znale\u017a\u0107 element na stronie korzystaj\u0105c z Selenium? Mamy do tego celu dedykowan\u0105 metod\u0119, kt\u00f3ra pozwala Nam r\u00f3wnie\u017c okre\u015bli\u0107 technik\u0119 lokalizowania elementu. Metoda ta dost\u0119pna jest w obiekcie typu WebDriver i nazywa si\u0119 findElementBy()<\/em>. Do tej metody musimy przekaza\u0107 technik\u0119 lokalizowania elementu. W naszym przypadku b\u0119dzie to id, a konkretnie rzecz ujmuj\u0105c: By.id(„sb_form_q”)<\/em>. W po\u0142\u0105czeniu z metod\u0105 findElementBy()<\/em> otrzymamy zapis:
driver.findElement(By.id(\"sb_form_q\"));<\/code>
Je\u017celi wszystko zrobili\u015bmy dobrze to nasz kod powinien dzia\u0142a\u0107 i znajdowa\u0107 element na stronie. Ale to, \u017ce znale\u017cli\u015bmy jaki\u015b element na stronie nic nam nie daje. \u017beby zobaczacy\u0107 efekt musimy wykona\u0107 na znalezionym elemencie jak\u0105\u015b akcj\u0119. Spr\u00f3bujmy klikn\u0105\u0107 na ten element wywo\u0142uj\u0105c na nim metod\u0119 click().
driver.findElement(By.id(\"sb_form_q\")).click();<\/code>
W kolejnej linijce spr\u00f3bujemy wprowadzi\u0107 jak\u0105\u015b fraz\u0119 w pole wyszukiwania. Aby to zrobi\u0107 powinni\u015bmy skorzysta\u0107 z metody sendkeys(„Kotek”). Ca\u0142a linijka w naszym kodzie b\u0119dzie wygl\u0105da\u0142a nast\u0119puj\u0105co:
driver.findElement(By.id(\"sb_form_q\")).sendKeys(\"Kotek\");<\/code><\/p>\n\n\n\n

Zasymulowanie naci\u015bni\u0119cie przycisku Enter<\/h2>\n\n\n\n

Po wpisaniu frazy w pole wyszukiwania musimy w jaki\u015b spos\u00f3b rozpocz\u0105\u0107 wyszukiwanie. Mamy na to dwa sposoby. Albo klikniemy na znaczek „lupki”, albo zasymulujemy naci\u015bni\u0119cie przycisku Enter. W celu naci\u015bni\u0119cie „lupki” powinni\u015bmy otworzy\u0107 narz\u0119dzia deweloperskie i za pomoc\u0105 inspektora odnale\u017a\u0107 na ekranie kod HTML odpowiedzialny za lup\u0119. Nast\u0119pnie wyszukujemy w strukturze HTML warto\u015b\u0107 id dla tego elementu i w kodzie pr\u00f3bujemy na niego klikn\u0105\u0107. Druga opcja to zasymulowanie naci\u015bni\u0119cia przycisku Enter. Ca\u0142a procedura polega na „wys\u0142aniu” przycisku enter do pola tekstowego. Jak to zrobi\u0107? Podobnie do wpisywania warto\u015bci „kotek”, ale zamiast tekstu do metody przekazujemy Keys.Enter. Ca\u0142y zapis wygl\u0105da nast\u0119puj\u0105co:
driver.findElement(By.id(\"sb_form_q\")).sendKeys(Keys.ENTER);<\/code> <\/p>\n\n\n\n

Przej\u015bcie do zak\u0142adki obrazki<\/h2>\n\n\n\n

Po wykonaniu poprzedniej akcji powinni\u015bmy znale\u017a\u0107 si\u0119 na stronie z wynikami. Tak jak w przegl\u0105darce od Google mamy tutaj r\u00f3wnie\u017c r\u00f3\u017cne zak\u0142adki. Druga z nich to obrazki i w\u0142a\u015bnie do tej zak\u0142adki chcieliby\u015bmy przej\u015b\u0107. Aby to zrobi\u0107 musimy znale\u017a\u0107 id tego elementu. Przechodzimy na stron\u0119 z wynikami i otwieramy narz\u0119dzia deweloperskie, a nast\u0119pnie za pomoc\u0105 inspektora znajdujemy zak\u0142adk\u0119 obrazki i kopiujemy warto\u015b\u0107 id dla tego elementu. W naszym kodzie lokalizacja elementu i klikni\u0119cie na niego b\u0119dzie realizowane za pomoc\u0105 nast\u0119puj\u0105cej linijki \\:
driver.findElement(By.id(\"b-scopeListItem-images\")).click();<\/code> <\/p>\n\n\n\n

Pobranie tytu\u0142u i jego weryfikacja<\/h2>\n\n\n\n

\n\nTeraz spr\u00f3bujemy zweryfikowa\u0107 czy uda\u0142o nam si\u0119 przej\u015b\u0107 do odpowiedniej zak\u0142adki. Mo\u017cemy to zrobi\u0107 sprawdzaj\u0105c tytu\u0142 naszej strony. Po przej\u015bciu do zak\u0142adki obrazki tytu\u0142 naszej strony powinien by\u0107 podobny do:”Kotek – Bing images”. \u017beby zapisa\u0107 weryfikacj\u0119 w kodzie musimy najpierw pobra\u0107 tytu\u0142 strony korzystaj\u0105c z metody driver.getTitle(), a nast\u0119pnie za pomoc\u0105 asercji z biblioteki TestNG sprawdzimy czy ma on odpowiedni\u0105 warto\u015b\u0107.
Asercja to specjalna metoda kt\u00f3ra por\u00f3wnuje dla Nas dwie warto\u015bci. Je\u017celi warto\u015bci s\u0105 r\u00f3\u017cne to test zako\u0144czy si\u0119 niepowodzeniem. Je\u017celi wszystko b\u0119dzie dobrze to test zako\u0144czy si\u0119 sukcesem. Nasza asercja mo\u017ce wygl\u0105da\u0107 nast\u0119puj\u0105co:
Assert.assertEquals(driver.getTitle(),\"Kotek - Bing images\");<\/code><\/p>\n\n\n\n

Zamkni\u0119cie przegl\u0105darki<\/h2>\n\n\n\n

Gdy wszystko posz\u0142o dobrze i posiadasz poprawny kod to Tw\u00f3j test powininen \u015bwieci\u0107 si\u0119 na zielono. Zauwa\u017cysz jednak, \u017ce po wykonaniu wszystkich akcji okno przegl\u0105darki pozostaje otwarte. Na ko\u0144cu testu nale\u017cy zamkn\u0105\u0107 okno przegl\u0105darki i oczywi\u015bcie mo\u017cna to zrobi\u0107 w bardzo \u0142atwy spos\u00f3b korzystaj\u0105c z metody quit(). 
driver.quit();<\/code><\/p>\n\n\n\n

Warto te\u017c doda\u0107 linijk\u0119 kodu, kt\u00f3ra zabezpieczy Nas przed sytuacj\u0105 w kt\u00f3rej strona b\u0119dzie d\u0142u\u017cej si\u0119 \u0142adowa\u0142a. Ca\u0142o\u015b\u0107 kodu naszego testu b\u0119dzie wygl\u0105da\u0142a nast\u0119puj\u0105co:
@Test
public void openGooglePage() {
\u00a0System.setProperty(\"webdriver.chrome.driver\",\"C:\\\\Users\\\\downloads\\\\chrome\u00a0 driver.exe\");
\u00a0 WebDriver driver = new ChromeDriver();
\u00a0 driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
\u00a0 driver.get(\"https:\/\/www.bing.com\");
\u00a0 driver.findElement(By.id(\"sb_form_q\")).click();
\u00a0 driver.findElement(By.id(\"sb_form_q\")).sendKeys(\"Kotek\");
\u00a0 driver.findElement(By.id(\"sb_form_q\")).sendKeys(Keys.ENTER);
\u00a0 driver.findElement(By.id(\"b-scopeListItem-images\")).click();
\u00a0 Assert.assertEquals(driver.getTitle(),\"Kotek - Bing images\");
\u00a0 driver.quit();
}<\/code><\/p>\n\n\n\n

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

W tej wiadomo\u015bci poruszy\u0142em bardzo du\u017co temat\u00f3w. Dowiedzia\u0142e\u015b\/a\u015b si\u0119 jak zlokalizowa\u0107 element na stronie i jak wykona\u0107 na Nim jak\u0105\u015b akcj\u0119. Powiedzieli\u015bmy sobie jak sprawdzi\u0107 struktur\u0119 HTML na dowolnej stronie za pomoc\u0105 narz\u0119dzi deweloperskich i jak zlokalizowa\u0107 interesuj\u0105cy nas element za pomoc\u0105 inspektora.Na ko\u0144cu dodali\u015bmy asercj\u0119 i uda\u0142o si\u0119 nam zamkn\u0105\u0107 przegl\u0105dark\u0119 po wykonanym te\u015bcie. W zwi\u0105zku z du\u017c\u0105 ilo\u015bci\u0105 wiedzy mo\u017cesz natrafi\u0107 na pewne problemy, kt\u00f3re z ch\u0119ci\u0105 pomog\u0119 Ci rozwi\u0105za\u0107 \ud83d\ude42\u00a0 <\/p>\n","protected":false},"excerpt":{"rendered":"

Z tego wpisu dowiesz si\u0119 jak zlokalizowa\u0107 element na stronie i wykona\u0107 na Nim jak\u0105\u015b akcj\u0119. Celem naszego testu jest otwarcie nowego okna przegl\u0105darki, pobranie wyszukiwarki\u00a0bing.com, wyszukanie frazy „kotek” i przej\u015bcie do zak\u0142adki obrazki. W jaki spos\u00f3b lokalizowa\u0107 elementy na stronie? W celu zlokalizowania elementu na stronie b\u0119dziemy musieli prze\u015bledzi\u0107 […]<\/p>\n","protected":false},"author":1,"featured_media":761,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-760","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\/760","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=760"}],"version-history":[{"count":2,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/posts\/760\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/posts\/760\/revisions\/765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/media\/761"}],"wp:attachment":[{"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/media?parent=760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/categories?post=760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testeroprogramowania.pl\/index.php\/wp-json\/wp\/v2\/tags?post=760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}