{"id":47,"date":"2025-09-06T08:54:26","date_gmt":"2025-09-06T08:54:26","guid":{"rendered":"https:\/\/blog.kerjarapi.com\/?p=47"},"modified":"2025-09-06T08:54:26","modified_gmt":"2025-09-06T08:54:26","slug":"how-to-get-web-test-object-from-spy-and-how-to-do-it-manually","status":"publish","type":"post","link":"https:\/\/blog.kerjarapi.com\/?p=47","title":{"rendered":"How To Get Web Test Object From Spy and How To Do It Manually"},"content":{"rendered":"\n<p>Object Repository is a place where you can store your objects in Katalon studio. Objects in Katalon Studio include Web Test Object, Web Service Object, and Mobile Test Object. For today we are going to take a look at Web Test Object and how we can get the objects from web elements using Spy Tool, which is a UI based selector, and getting it directly from the web page. I think it\u2019s important to know how to do both, and I will discuss what I think to be the advantage and disadvantages of each method.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use Spy Web<\/h2>\n\n\n\n<p>Spy Web and Spy Web Recorder are tools provided by Katalon Studio to help the tester to select element without any coding. Spy Web is used to select specific elements to save as an Object in Katalon Studio. To use, we can find the Spy Web icon at the upper left side of Katalon Studio as seen in the screenshot below, then a small window will appear. Here we can input the URL of our website, and click the chrome icon (if using chromedriver) to start.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"172\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_221510-2.png\" alt=\"\" class=\"wp-image-50\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_221510-2.png 586w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_221510-2-300x88.png 300w\" sizes=\"auto, (max-width: 586px) 100vw, 586px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"223\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222338.png\" alt=\"\" class=\"wp-image-51\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222338.png 618w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222338-300x108.png 300w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/figure>\n\n\n\n<p>Now the Chrome browser should automatically start and navigate to our URL. And we can hover on the element we want to select, it will be highlighted in red, then hit CTRL + ` (the button under your escape button) to select, or you can right click and select \u201cCapture Object\u201d. This will select the element and we can see the selected element in the small Spy Web window. In the Spy Web window, we can see the XPath and other attributes from the element we have selected. From here we can click &#8220;Save&#8221;, select the directory we want to save the Objects in, and click &#8220;OK&#8221;. From here we can find the saved Objects, and tidy things up by renaming the Objects and folders.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222923-1024x568.png\" alt=\"\" class=\"wp-image-52\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222923-1024x568.png 1024w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222923-300x166.png 300w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222923-768x426.png 768w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_222923.png 1417w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"888\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-12.png\" alt=\"\" class=\"wp-image-53\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-12.png 622w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-12-210x300.png 210w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"586\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_223602.png\" alt=\"\" class=\"wp-image-54\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_223602.png 620w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_223602-300x284.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"487\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_223627.png\" alt=\"\" class=\"wp-image-55\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_223627.png 547w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/Screenshot_2024-08-14_223627-300x267.png 300w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use Spy Web Record<\/h2>\n\n\n\n<p>Spy Web Recorder is another tool provided by Katalon Studio to select web elements, but instead of selecting specific element one by one, it actually records the activities we do and recording it as test steps. Let\u2019s go for an example, first we click on the Spy Web Recorder at the upper left of the screen, then input our URL, and click the Chrome icon to start recording our steps in chrome. For this example, I am going to use the Spy Web Recorder on <em>this website.<\/em> Now we can click on the textbox, and it will select the textbox, and also record the \u201cclick\u201d activities. We can go ahead and proceed to set text into our textbox. Once everything is recorded, we can click button \u201cSave Script\u201d, choose which folder to save our objects and click \u201cOK\u201d. Then give a name for your Test Case and click \u201cOK\u201d. Now we can see our Objects are being saved (don\u2019t forget to rename the Objects and folders to tidy things up). And we can also see the steps were conveniently recorded into our Test Case<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-1-2-1024x479.png\" alt=\"\" class=\"wp-image-56\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-1-2-1024x479.png 1024w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-1-2-300x140.png 300w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-1-2-768x359.png 768w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-1-2-1536x719.png 1536w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-1-2.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"592\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-2-1.png\" alt=\"\" class=\"wp-image-57\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-2-1.png 612w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-2-1-300x290.png 300w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"493\" height=\"370\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-3-1.png\" alt=\"\" class=\"wp-image-58\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-3-1.png 493w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-3-1-300x225.png 300w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pros &amp; Cons of using Spy Web and Spy Web Recorder<\/h2>\n\n\n\n<p>Some Pros of using Spy Web and Spy Web Recorder<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Easy to use without any coding<\/li>\n\n\n\n<li>Relatively fast<\/li>\n\n\n\n<li>Can help the tester to select specific element that\u2019s hard to take manually<\/li>\n<\/ul>\n\n\n\n<p>Some Cons of using Spy Web and Spy Web Recorder<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Less flexible. It is harder to parameterize objects and work with variables<\/li>\n\n\n\n<li>Not effective when dealing with dynamic web elements (some of the web element\u2019s attributes keep changing)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to get Web Test Object manually from directly inspecting the Website<\/h2>\n\n\n\n<p>To get our Web Test Object manually, we can navigate to our URL in our browser, right click on the page and select \u201cInspect\u201d. I am going to select the same element we have selected before. Here we can find the Element window with all of our elements in this web page. Click on the \u201cSelect\u201d icon (one I have highlighted in red in the screenshot below) and click on the element we want to select. On the right side, we can see that our selected element is being highlighted. It is an \u201cinput\u201d element and contains the attributes, such as placeholder, type. id, and class.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-4-1-1024x591.png\" alt=\"\" class=\"wp-image-59\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-4-1-1024x591.png 1024w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-4-1-300x173.png 300w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-4-1-768x443.png 768w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-4-1.png 1466w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"485\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-5-1.png\" alt=\"\" class=\"wp-image-60\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-5-1.png 732w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-5-1-300x199.png 300w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<p>To select the element we decide which attribute is making this element unique. So we can try:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/input&#91;@id='userName']\n<\/code><\/pre>\n\n\n\n<p>I usually press CTRL + \u201cF\u201d, to search on the element tab, and type in my XPath selector to make sure I get the correct element. From the screenshot below, we can see that we have successfully select our element. The \u201c1 of 1\u201d on the bottom right, indicates that our XPath is only directing to the correct element only. We want to make sure that our selected element is unique.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"512\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-6-1.png\" alt=\"\" class=\"wp-image-61\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-6-1.png 726w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-6-1-300x212.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/figure>\n\n\n\n<p>From here we can go back to our Katalon Studio, and to our Object Repository folder. Right click and choose \u201cNew\u201d &gt; \u201cTest Object\u201d. Give our object a name, for example \u201cTextbox_FullName\u201d. Click on the radio button \u201cXPath\u201d, and paste our custom XPath under \u201cSelected Locator\u201d. Then press CTRL + \u201cS\u201d to save the object.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"707\" height=\"583\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-7-1.png\" alt=\"\" class=\"wp-image-62\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-7-1.png 707w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-7-1-300x247.png 300w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"402\" src=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-8-1.png\" alt=\"\" class=\"wp-image-63\" srcset=\"https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-8-1.png 857w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-8-1-300x141.png 300w, https:\/\/blog.kerjarapi.com\/wp-content\/uploads\/2025\/09\/image-8-1-768x360.png 768w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pros &amp; Cons of manually selecting the elements<\/h2>\n\n\n\n<p>For now we can see that manually selecting the elements is a bit more complicated than using Spy Web tools. So why do we want to take the extra steps? Here are some Pros and Cons:<\/p>\n\n\n\n<p>Pros of manually selecting elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>More control of the object you are choosing.<\/li>\n\n\n\n<li>More flexible with your object. You can parameterize your XPath so that when you call on the object, you can put some values into it and make it more flexible.<\/li>\n\n\n\n<li>More effective for dealing with dynamic elements.<\/li>\n<\/ul>\n\n\n\n<p>Cons of manually selecting element:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>More complicated and takes a while to practice.<\/li>\n\n\n\n<li>Harder to take if cannot be selected by the selection tool.<\/li>\n<\/ul>\n\n\n\n<p>For more in-depth into the manual selection of elements, you may find it on this blog post: <a href=\"https:\/\/blog.kerjarapi.com\/2025\/09\/06\/selecting-elements-using-xpath-for-automation-in-katalon-studio\/\" data-type=\"post\" data-id=\"30\">click here<\/a>!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Object Repository is a place where you can store your objects in Katalon studio. Objects in Katalon Studio include Web Test Object, Web Service Object, and Mobile Test Object. For today we are going to take a look at Web Test Object and how we can get the objects from web elements using Spy Tool, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-en","category-katalon-auto"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=47"}],"version-history":[{"count":1,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts\/47\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}