Tuesday, August 1, 2017

Selenium WebDriver (03 කොටස)

අද පාඩම...


හරි අද අපි කරන්න යන්නේ Selenium WebDriver එක Use කරලා අපේ පලවෙනි Selenium WebDriver Script එක එහෙමත් නැත්තම් Automation Script එක ලියන්න.මන් හිතනවා කලින් පොස්ට් එකෙන් කිව්වා දේවල් තම තමන්ගේ Computer වල Install කරගෙන ඇති කියලා.හරියට Intelij IDE එක කරගත්තනම් කිසි අව්ලක් නැතිව වැඩේ කරන්න පුළුවන් අද කස්ටියට .
මේ අපේ පලවෙනි  Automation Script එක නිසා මන් මෙතැනදී කිසිම Automation Framework එකක් Use කරන්නේ නෑ. ඒවා පස්සට බලමු.

ඔන්න මුලින්ම දෙයියනේ කියලා Intelij IDE  එක Open කරගන්න.ජිවිතේ පලවෙනි වතාවට Intelij IDE  එක Open කරගත්ත පින්වතෙක් හෝ පින්වතියක් නම් ඔයාලට මෙන්න මෙහෙම කොට්ටක් දිස් වෙයි.


මේකේ Create New Project Click කරාම එන්නේ පහල තියෙන Window එක


මතක තියාගන්න මේ Window එකේ  Project SDK: කියල තියෙන තැන ඔයාලගේ Java version එක පෙන්නන්න ඕන එහෙම පෙන්නුවේ නැත්තම් මොන ඉටි ගෙඩියක් වත් කරන්න වෙන්නේ නෑ.

පෙන්නන්න කිව්වට ඒක ඉබේම වෙන දෙයක් නෙවෙයි ඒක අපි කරන්න ඕන දෙයක් මෙන්න මෙහෙමයි එක කරන්නේ Project SDK:  ඉස්සරහ තියෙන New Button එක click කරාම 


මෙන්න මෙහෙම මොන SDK එකද Configure කරන්න ඕන කියලා අහයි.අන්න එකෙන් JDK කියන එක තෝරලා දුන්නම


ඔන්න ඔහොම Screen එකක් එයි.අන්න එකෙන් ඔයාගේ Computer එකේ JAVA Install උන තැනින් JDK එක තෝරලා දෙන්න තියෙන්නේ. Local Disk C වල Program Files වල Java එක ඇතුලේ ඔයාල Install කරගත්ත JDK එක ඇති අන්න එක තෝරලා දුන්නම වැඩේ ගොඩ එතකොට Project SDK: කියන තැන මෙන්න මේ විදිහට පෙන්නයි.



හරි දැන් වත් වැඩේ පටන් ගමු. 😀

මන් මුලින්ම කිව්වා වගේ අපි මේ Project එක හදන්න යන්නේ Maven Project එකක් විදිහට නිසා අපි මේ Window එකෙන් තෝරාගන්න ඕන Maven කියන Project Type එක.



හරි දැන් Next කරන්න
ඊළගට එන Window එකේ Groupid සහ Artifactid කියල දෙකක් Type කරන්න එයි ඒ දෙකේ GID AID කියල Type කරලා Next කරන්න.



GroupId - will identify your project uniquely across all projects, so we need to enforce a naming schema. It has to follow the package name rules, what means that has to be at least as a domain name you control, and you can create as many subgroups as you want. 

ArtifactId - is the name of the jar without version. If you created it then you can choose whatever name you want with lowercase letters and no strange symbols. If it's a third party jar you have to take the name of the jar as it's distributed.

ඊට පස්සේ Project Name එකයි Project Location එකයි දීලා project එක Finish කරන්න පුළුවන්



Project එක Finish දුන්න ගමන්ම එන Window එකේ දකුණු පැත්තේ යටින්ම එන  මේ මැසේජ් එකේ Enable Auto-Import කියන එක Click කරන්න.මේක ගොඩක් වැදගත් වෙන දෙයක් Maven Project එකක් කරනකොට.



 හරි දැන් මෙන්න මේ විදිහට තමයි ඔයාලගේ Project Structure එක හැදෙන්නේ 


හරි මුලින්ම මේකේ තියෙන pom.xml ෆයිල් එක Open කරගන්න.මෙන්න මේ එකේ තමයි අපි අපේ Project එකට ඕන කරන Dependencies දාන්නේ.

Dependencies කියන්නේ මොනාද?

Dependencies කියන එක අපිට හදුන්න්වන්න පුළුවන් Project එකට ඕන වෙන Libraries විදිහට.

තව විදිහකට කිව්වොත් අපි Selenium Use කරලා Script එකක් ලියනකොට අපිට ඕන වෙනවා Selenium Libraries ඒ කියන්නේ Selenium Organization එක විසින් දැනටමත් ගොඩ නගල තියෙන Code Samples මොකද අපිට බෑ අපේ Code එකට අදාල වෙන හැම Code එකක්ම ගහන්න.

වැඩේ කරගෙන යනකොට මොකක්ද Dependencies වලින් වෙන්නේ කියල පැහැදිලි වෙයි.
හරි දැන්   pom.xml File එකේ අපි Open කරගන්න අපි එකේ Dependencies Tag එකක් හදනවා මුලින්ම ඒ Tag එක ඇතුලේ අපිට ඕන එක එක Dependency දාගන්න තව Dependency Tag හදනවා මෙන්න මේ විදිහට

(මතක තියාගන්න Dependencies සහ Dependency කියන්නේ දෙකක් ලොකු එක තමා Dependencies ඒක යටතේ තමා Dependency තියෙන්නේ )


මම කිව්වනේ Dependencies  කියන්නේ දැනටමත් ගොඩ නගල තියෙන Code Samples කියලා .දැන් ප්‍රස්නේ තමයි කොහෙන්ද මේ Code Samples ගන්නේ කියන එක.

එකට තියෙනවා https://mvnrepository.com/ කියන Web Site එක.අපිට පුළුවන් මේ Web Site එකට ගිහින් අපිට ඕන කරන Dependency Search කරලා එකට අදාල Code එක Copy කරගන්න.

මෙන්න මෙහෙමයි එක කරන්නේ ....

ඕනෑම Selenium Script එකක් ලියන්න අපිට Selenium Dependency  එක ඕන වෙනවා අපි ඒක අපේ pom.xml එකට ගන්නේ මෙන්න මෙහෙමයි.

මුලින්ම යනවා මම ඉස්සල කිව්ව Web Site එකට ඊට පස්සේ එකේ තියෙන Search Bar එකේ අපිට ඕන කරන Dependency  එක ගහලා Search කරනවා.



එතකොට මෙන්න මෙහෙම එකට අදාල වෙන ඔක්කොම Dependency පහලට පෙන්නනවා




මෙතන තියෙන හැම එකම අපිට ඕන වෙන්නේ නෑ නේ අපි ගන්න ඕන හොදම එක. එකට කරන්න තියෙන්නේ Usage එක වැඩියෙන්ම තියෙන එක උඩ Click කරන එක එතකොට මෙන්න මෙහෙම පෙන්නයි




මේකේ යට තියෙන Tabelඑකේ තියෙන්නේ දැනට ඇවිත් තියෙන ඔක්කොම  Selenium Version ටික.එකෙන් අපිට ඕන එක උඩ Click කරාම (3.4.0)


මෙන්න මේ විදිහට අපිට ඕන කරන Dependency එක පෙන්නයි.අපිට ඕන නම් දැන් මේක සම්පුර්ණයෙන්ම Copy කරලා අපේ pom.xml එකේ  Dependencies Tag එක ඇතුලට දාන්න පුළුවන් මෙන්න මෙහෙම.මතක තියාගන්න  Dependencies Tag එක ඇතුලට තමයි අපි මේ කරගත්ත Code එක දාන්නේ.


එතකොට ඔයාලට පෙන්නයි ඒ Dependency එක ඔයාගේ Project එකට Download වෙන හැටි පහලින් මෙන්න මෙහෙම


මේ වගේම දාගන්න ඕන තව Dependency එකක් තියෙනවා ඒ තමයි TestNG එක එකත් අර විදිහටම testing කියලා Search කරලා copy කරගෙන pom.xml එකට දාගන්න ඕන.

TestNG Dependency  



TestNG වලින් වෙන්නේ මොකක්ද කියලා මම පස්සේ පාඩමකදී කියල දෙන්නම්.දැනට අපි මේක දාගන්නේ අපිට මේ අපි ලියන Script එක Run කරගන්න ඕන වෙන නිසා.

හරියට වැඩේ උනා නම් කිසි රතුපාට Error එකක් නැතිව pom.xml File එක පෙන්නයි මෙන්න මේ විදිහට



හරි දැන් යන්න ආයෙත් Code එකට එකේ තියෙන src Folder එක Expand කරාම ඔයාලට පෙනෙයි එක ඇතුලේ තව Folder දෙකක් තියෙනවා කියලා.අන්න එකෙන් Test කියන Folder එක ආයෙත් පාරක් Expand කරාම එකේ තියෙන Java කියන Folder එක උඩ Right Click කරලා New ගිහින් අලුත් java class  එකක් හදන්න ඕන.


මෙන්න මගේ Class එක



අපි මේ පාඩමේදී කිසිම Framework එකක් Use කරන්නේ නෑ.එකම Class එකේ අපි Script එක ගහලා Run කරන්න තමයි මේ හදන්නේ.

මම කිව්වනේ මේ Selenium WebDriver එක Use කරලා තමයි අපි මේ Script එක ලියන්නේ කියලා ඒ නිසා මුලින්ම අපි කරන්න ඕන මේ class එක ඇතුලේ  Selenium WebDriver එකෙන් Object එකක් හදාගන්න ඕන,මොකද ඒ Object එක තමා අපි හැමතැනම Use කරන්න යන්නේ

ඊට පස්සේ Class එක ඇතුලේ අපි හදාගන්නවා Method එකක් අපිට කරන්න ඕන වෙන වැඩේට අදාලව

මට ඕන Facebook එකට ලොග් වෙන විදිහ Automate කරන්න ඒ නිසා මන් Method එක හදනවා Login කියලා.

මතක ඇතිව ඒ හදපු Login Method එකට උඩින් අපි දාන්න ඕන @Test කියලා Annotation එකක් මේ Annotation එක අපිට දෙන්නේ අපි දාගත්ත TestNG කියන Dependency එකෙන්.ඒ Annotation එකත් එක්කම ඒ Annotation එක  යට තියෙන හැම Method එකක්ම Test එකක් කියලා ඒ එකෙන් Annotation එකෙන් Script එකට හදුන්වලා දෙනවා
(TestNG කියන එක වෙනම ලොකු පාඩමක් ඒක පස්සේ දවසක කරමු )

ඒ ඔක්කොම කරාම මෙන්න මෙහෙම පෙන්නයි 


මේ login Method එක ඇතුලේ තමයි අපි Facebook වලට Log වෙන විදිහ ඔක්කොම Code එක ලියන්නේ.

අනිත් එක තමයි මොකක් හරි Process එකක් Automate කරන්න කලින් එක Manual කරන විදිහ දැනගෙන ඉන්න ඕන නැත්තම් ඉතින් මොකවත් කොරන්න වෙන්නේ නෑ මය දෙයියෝ.

දැන් මම කිව්වනේ මම කරන්න යන්නේ Facebook එකට Log වෙන විදිහ Automate කිරීම කියලා.අපි ඉස්සෙල්ලම බලමු කොහොමද අපි ඒක Manual කරන්නේ කියලා.

  1.   මුලින්ම Browser එක Open කරගන්නවා
  2.   ඊළගට www.facebook.com Site එකට යනවා
  3.   Username ගහන්න තියෙන Field එකේ Username එක ගහනවා
  4.   Password එක ගහන්න තියෙන Field  එකේ Password එක ගහනවා
  5.   Login Button එක Click කරනවා


එච්චරයි නේ.
සිංහලෙන් කිව්වා වගේ ඕක කරන්න නම් ලේසි නෑ.
හරි මුලින්ම Computer එකේ  Firefox Browser එක Open කරගෙන ඉන්න ඒක අපිට ඕන වෙනවා මේ වැඩේ කරන්න .අපි Step By Step වැඩේ කරමු.

Step 01

Manual විදිහට ඉස්සල්ලාම තිබ්බේ Browser එක Open කරගන්න එක.අපි ඒක දැන් Script එකෙන් කරමු.

අපිට පුළුවන් Selenium Use කරලා ඕනෑම Browser එකක් Open කරගන්න.මම මේ Example එකේදී Facebook Log වෙන්න Use කරන්නේ Chrome Browser එක.

ඒ නිසා ඉස්සලම අපිට සිද්ද වෙනවා Chrome Browser එකට අදාල වෙන Code එක ලියන්න.ඊටත් කලින් අපිට සිද්ද වෙනවා ChromeDriver.exe කියලා Executable File එකක් Download කරගන්න

එකට කරන්න තියෙන්නේ මුලින්ම www.seleniumhq.org එකට ගහින් එකේ Download Tab එක Click කරාම ඒ Page එකේ යටම තියෙනවා මෙන්න මෙහෙම 



මේ තියෙන්නේ අපිට Browser එක විදිහට Use කරන්න පුළුවන් හැම Browser එකකටම අදාල වෙන Executable File එක ගන්න විදිහ සහ තැන.

මට දැන් මෙතනින් ඕන Google Chrome Driver එක නිසා මම එක උඩ Click කරලා ඇතුලට යනවා එකේ 


මෙන්න මෙතනින් Chrome Driver 2.31 Click කරාම අයෙත් එයි ඒ වගේම එකක් එකෙත් Chrome Driver 2.31 Click කරාම එයි මෙන්න මෙහෙම



ඔන්න ඕකෙන් තමන්ගේ OS එකට අදාළ වෙන .Zip File එක Download කරගන්න ඕන.අන්න ඒ .Zip File එක Extract කරාම එන chromedriver.exe කියන File එක තමයි අපිට ඕන වෙන බාන්ඩේ.මේ බාන්ඩේ එක එක තැන් වල දාන එක හරි නෑ ඒ නිසා chromedriver.exe කියන එක Copy කරලා ඔයාලගේ Project එක හැදිලා තියෙන තැනට ගිහින් දාන්න.

කොහොමද යකෝ ඒ තැන හොයාගන්නේ ??

Simple නේ chromedriver.exe කියන එක Copy කරලා Intelij වල open වෙලා තියෙන අපි හදන්න පටන් ගත්ත Project එක උඩ Right Click කරාම එකේ යටම ඇති Show in Explorer කියලා එකක් එක Click කරාම ඔයාගේ Project එක නමින් හැදුන Folder එකක් පෙන්නයි ඒ  Project Folder එකට ගිහින් ඒක ඇතුලට අර Copy කරගත්ත chromedriver.exe එක දාන්න.මම නම් එක ඇතුලෙත් තව Folder එකක් හදලා තමයි දැම්මේ මෙන්න මෙහෙම .


ඔන්න ඔය Driver කියල තියෙන Folder එක ඇතුලේ තමයි chromedriver.exe එක මම දාල තියෙන්නේ.

හරි දැන් අයෙත් යන්න අපේ Code එකට දැන් අපි හදන්නේ අපි Download කරගත්ත chromedriver.exe එක අපේ Code එකෙන් Open කරන්න.ඒක කරන්නේ මෙන්න මෙහෙමයි


System.setProperty කියන Command එකට අපි Parameters දෙකක් දීලා තියෙනවා

පලවෙනි Parameter එක තමයි 

webdriver.chrome.driver කියන එක මේ එක වෙනස් වෙනවා ඔයා Open කරන්න හදන Browser එක අනුව

EX:- ඔයා Open කරන්න හදන්නේ Firefox Browser එක නම් මේක webdriver.gecko.driver විදිහට වෙනස් වෙනවා.

ඊලග Parameter එක තමයි

C:\Users\PTL_PC\IdeaProjects\Test_Login\Driver\chromedriver.exe කියන එක මේ තියෙන්නේ අපි ඉස්සසෙල්ල Download කරගෙන Project File එකට ගහින් දාපු chromedriver.exe එකට යන Path එක.ඒ Path එක ගන්න පුළුවන් අපිට chromedriver.exe එක දාපු තැනට ගිහින් උඩ තියෙන Path එක Copy කරලා අරගෙන එකේ අගට chromedriver.exe කියලා දාල.



 එතකොට මෙන්න මෙහෙම C:\Users\PTL_PC\IdeaProjects\Test_Login\Driver\chromedriver.exe path එකක් එන්න ඕන.අපි path එක තමයි අර දෙවෙනි Parameter එක විදිහට Code එකට දාන්නේ

හරි දැන් chromedriver.exe එක අපි Code එකට ගත්තා දැන් අපිට ඕන Chrome Browser එක Open කරන්න එහෙමත් නැත්තම් Chrome Browser object එක හදාගන්න එක  .ඒක කරන්නේ මෙන්න මෙහෙම 


මතක තියාගන්න අපිට මෙහෙ Chrome Browser object එක හදාගන්න හරි හදාගත්තට Chrome Browser එක Open කරගන්න හරි බෑ අර අපි කලින් කරපු

System.setProperty("webdriver.chrome.driver","C:\\Users\\PTL_PC\\IdeaProjects\\Test_Login\\Driver\\chromedriver.exe");

කියන Configuration එක කරේ නැත්තම්.

Browser එක Open උනාම ඒක Maximize වෙන්න පොඩි Code එකක් තියෙනවා ඒකත් මේ හරියෙම මෙහෙම ගහගන්න 


Step 02

හරි මේ Step එක වෙනකොට අපි එක Chrome Browser එක Open කරගන්න තැනට ඇවිත් තියෙන්නේ.අපිට ඊළගට කරන්න ඕන www.facebook.com/ Site එකට යන එක.
ඒක කරන්නේ 


ඒ කියන්නේ අපි කිව්වා Webdriver එකෙන් හදාගත්ත driver කියන Object එකට www.facebook.com  කියන එකට Navigate වෙන්න කියලා.

හරි දැන් එකත් ඉවරයි

Step 03

ඊළගට කරන්න ඕන Username එක ගහන තැන Username එක ගහන එක

(ගහන = Type කරන )

ඔන්න දැන් තමයි අපිට ඕන වෙන්නේ FireFox Browser එක.

අපි FireFox Browser එකෙන් www.facebook.com එකට ගියාම අපිට පෙන්නන්නේ මෙන්න මෙහෙම 


දැන් අපි අපේ Script එකට හදුන්වලා දෙන්න ඕන Email Address එක Type කරන්නේ කොතනද කියන එක මොකද එක හරියට ක්ව්වේ නැත්තම් Script එකට අදුනගන්න බැරි වෙනවා මොන තැනද අපි Email Address එක Type කරන්නේ කියන එක.අපිට නම් ඉතින් දැක්ක ගමන් කියන්න පුළුවන්නේ එත් අපි Script එකට ඒ තැන මෙන්න මෙතැනයි කියලා හරියටම කියල දෙන්න ඕන

එක කරන්නේ මෙන්න මෙහම Email or Phone කියලා තියෙන Text Field එක ඇතුලේ Right Click කරාම යටම පෙන්නයි මෙන්න මෙහෙම 


මෙන්න මේ Inspect Element with Firebug කියන Command එක එන්නේ අපි FireBug Extension එක Firefox Browser එකට  Install  කරලා තිබ්බොත් විතරයි ඒක Install  කරන විදිහ මම Create ScriptManually පාර්ට් එක න් කියල දුන්නා.

දැන් අපි Inspect Element with Firebug කියන එක Click කරාම අපිට යටින් පෙන්නනවා මෙන්න මෙහෙම Box එකක්


මෙන්න මේකේ ඔයාලට පෙනෙයි අපි Click කරපු Email or Phone කියලා තියෙන Text Field එකට අදාල වෙන ඔක්කොම Properties ටික නිල් පාටින් Highlight වෙලා  තියෙනවා.

ඒ කියන්නේ අපිට Firebug වලින් පුළුවන් අපේ Web Page එකක තියෙන ඕනෑම Element එකකට අදාල වෙන ඔක්කොම Properties ටික අදුනගන්න.

හරි දැන් මෙතන <input id="email" කියල තියෙන එකෙන් මම අදුන ගන්නවා අපිට පුළුවන් කියලා අපේ Script එකට Email එක Type කරන්න ඕන වෙන තැන හදුන්න්වලා දෙන්න.මම ඒක කියලා දෙන්නේ මෙන්න මෙහෙම  


මේකෙ මම වැඩ දෙකක් එකපාර කරලා තියෙනවා පේනවා ඇති

පලවෙනි එක තමයි Webdriver  එකෙන් මම හදාගත්ත driver කියන object එකට මම කියනවා දැන් Open වෙලා තියෙන WebPage එකේ (facebook.com Login Page එකේ ) හොයාගන්න කියලා id එක email කියල තියෙන Element එක.එක කරන්නේ මෙන්න මේ Command එකෙන් 
driver.findElement(By.id("email"))

ඊටපස්සේ කියනවා ඒ Element එකට sautomation@gmail.com කියන Email Address එක යවන්න නැත්තම් Type කරන්න කියලා. ඒ ටික කරන්නේ මෙන්න මේ Command එකෙන්
sendKeys("sautomation@gmail.com");

පොඩ්ඩක් හිතල බැලුවම තේරෙයි අපි මේ කරන්නේ අපි Selenium Webdriver එකෙන් හදාගත්ත driver කියන object  එකට කරන්න ඕන වැඩ උගන්නවා වගේ දෙයක් කියලා.
ඒ වැඩෙත් ඉවරයි.

Step 04

මේකත් ඉතින් අරවගේම තමයි වෙනසකට තියෙන්නේ Password Field එක අදුනගෙන එකේ id එක Script එකට දීල එකට Type කරන්න ඕන Password එක දෙන එක.මම කරේ මෙන්න මෙහෙම එක.

Firebug වලින් බැලුවම Password Field එකේ Properties පෙන්නපු විදිහ 


එකෙන් <input id="pass"  කියන එක අරගෙන  Script එකට Password එක Type කරන්න ඕන තැන අදුන්න්වලා දුන්න විදිහ සහ එකට Password එක Type කරපු විදිහ 


Step 05

හරි අන්තිමට අපි කරන්න ඕන දේ තමයි Log In කියන Button එක Click කරන එක.එකත් අර විදිහටම Button එක උද Right Click කරලා  Inspect Element with Firebug ගිහින් ඒ Button එක අදුනගන්න පුළුවන් වෙන Attribute එකක් අරගෙන ඒක Script එකට දෙන එක .

හැබැයි කලින් ඒවාට වැඩ පොඩ්ඩක් මෙතන වෙනස් වෙනවා කලින් ඒවගේ අපි කරේ අදාල Element එක අදුනගෙන එකේ මොකක් හරි වචනයක් Type කරපු එක එත් මේකේ අපි කරන්න ඕන අදාල Button එක අදුනගෙන ඒක  Click කරන ඒක එක කරන්නේ මෙන්න මෙහම.

Firebug වලින් බැලුවම Login Button එකේ Properties පෙන්නපු විදිහ 


එකෙන් <input id=" u_0_r"  කියන එක අරගෙන  Script එකට Login Button එක තියෙන තැන අදුන්න්වලා ඒ Button එක Click කරපු විදිහ.


හරි දැන් පොතේ විදිහට නම් වැඩේ ඉවරයි.

දැන් ඉතින් Code එක උඩ Right Click කරලා Run ‘Login’ කියන එක Click කරාම මම කිව්ව විදිහටම කරානම් Project එක Run වෙන්න ඕන.

ඒ කියන්නේ Run කියන එක දුන්න ගමන්ම Automatically Chrome Browser එක Open වෙලා facebook.com එකට ගිහින් ඔයා දුන්න Username සහ Password ඒ ඒ Field වල Automatically ම Type වෙලා Login Button එකත් Click වෙයි Automatically ම.
මෙන්න මේ විදිහට 




(පලවෙනි පාර පොඩ්ඩක් වෙලා යයි මොකද සමහර Dependency Download වෙන්නේ පලවෙනි පාර Run වෙනකොට හින්දා ).

අද පාඩම නම් හෙන දිගයි නෙහ්. Screenshots ම තිබ්බා 35 කට වැඩිය මට මතක විදිහට.හැබැයි මම මේකේ කියලා දුන්න ඒවා හරියට ජීර්ණය කරගත්ත නම් දැන් පුළුවන් ඕනෑම Website එකක් Automate කරලා බලන්න.

දෙතුන් දෙනෙක් කිව්වා හින්ද බ්ලොග් එකේ Theme එකත් වෙනස් කරා ඔන්න.😀

ඊලග පාඩම මොකක්ද කියලා තාම එකක් නම් නෑ.අදහස් තියෙනවා නම් ඒක ගැන හරි මේ Post එක ගැන හරි පහලින් කොටන්න.