How to create a Folder and save the screenshot on the folder created?

Miscellaneous
1

Hello,

I would like to ask on how to create a folder, and I want to save my takescreenshot to the folder created?
This is my code:

WebUI.navigateToUrl(‘https://www.google.com/’)

String todaysDate = today.format(‘MM_dd_yy’)

String nowTime = today.format(‘hh_mm_ss’)

WebUI.delay(3)

WebUI.takeScreenshot(((((’/Users/ryanpl/Documents/Automation/’ + ‘Test Practice’) + todaysDate) + ‘_’) + nowTime) + ‘.png’)

Thank you!

2

Hello,

I would like to ask also on how to take screenshots of every steps? Currently, I used below script, and it’s creating 1 PNG file only and replacing the previous screenshot after executing the next steps. I want is to create PNG file of every steps. Like below.

Before Login (PNG File)
After Login (PNG File)

2 PNG File in the file directory. Thank you!

WebUI.navigateToUrl('Testing URL')

Date today = new Date()

String todaysDate = today.format('MM_dd_yy')

String nowTime = today.format('hh_mm_ss')

WebUI.delay(3)

WebUI.takeScreenshot((((('/Users/ryanp/Documents/Automation/Sample Screenshots/' + 'Regression') + todaysDate) + '_') + 
    nowTime) + '.png')

WebUI.setText(findTestObject('input_EMAIL OR USERNAME_username'), 'user test')

WebUI.setText(findTestObject('input_Password_password'), 'Pass1234')

WebUI.takeScreenshot((((('/Users/ryanp/Documents/Automation/Sample Screenshots/' + 'Regression') + todaysDate) + '_') + 
    nowTime) + '.png')
3

Your date format only goes down to the second and your code probably runs several statements in that time. You should add on milliseconds to your format:

String nowTime = today.format('hh_mm_ss S')

p.s. I would also get rid of all those unnecessary parentheses around your takeScreenShot method:

WebUI.takeScreenshot('/Users/ryanp/Documents/Automation/Sample Screenshots/Regression' + todaysDate + '_' + nowTime + '.png')

or

WebUI.takeScreenshot("/Users/ryanp/Documents/Automation/Sample Screenshots/Regression${todaysDate}_${nowTime}.png")

4

Hi @grylion54,

I tried your suggestion, but it’s still the same only 1 PNG file created after executing all takeScreenshots. I would like to ask if there is a way on how to create a PNG file in every takeScreenshot? Thank you!

5

All you should do is to allocate unique file names for each PNG images.

My alternative implementation is as follows.

import java.nio.file.Files
import java.nio.file.Path
import java.nio.file.Paths

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.testobject.ConditionType


String urlStr = "https://www.google.com/"

Path jobDir = Paths.get(System.getProperty('user.home')).resolve('Documents').resolve('Automation').resolve('Test Practice')
Date today = new Date()
Path timestampDir = jobDir.resolve("${today.format('MM_dd_yy')}_${today.format('hh_mm_ss')}")
Files.createDirectories(timestampDir)

WebUI.openBrowser('')
WebUI.navigateToUrl(urlStr)
WebUI.waitForPageLoad(10)

Integer seq = 0
Path png1 = timestampDir.resolve("screenshot_${seq}.png") 
WebUI.takeScreenshot(png1.toFile().toString())

String locator = "//input[@name='q']"
TestObject inputQ = new TestObject(locator)
inputQ.addProperty("xpath", ConditionType.EQUALS, locator)

WebUI.waitForElementPresent(inputQ, 10)
WebUI.setText(inputQ, "katalon")

seq = 1
Path png2 = timestampDir.resolve("screenshot_${seq}.png")
WebUI.takeScreenshot(png2.toFile().toString())

WebUI.closeBrowser()
1 Like
6

@ryan

  1. You want to take a lot of screenshots of URLs during a test case run.
  2. You have to create directories and allocate file names.
  3. You want to record good identification information of each individual screenshots so that you can remember what they were: which URL was the page? which <input> element you manipulated and set what values there? which part of the page you cut and took a screenshot of? full-page screenshot, or element-wise screenshot?
  4. Possibly you would require some kind of “viewer” of the set of stored screenshots.

I know, it is a big task to develop a software that satisfies these requirements. So I would tell you, my “Visual Inspection in Katalon Studio” project can demonstrate a fully-fledged solution for these issues.

See

Here I would quote a portion of the above post as follows:

Sample1: simply visit a URL and scrape

First example. We will write a Test Case in Katalon Studio that visits the Google Search page. We will take screenshots and HTML page sources of the Web page. We will store PNG files and HTML files into the store directory using the materialstore library. We will finally generate a HTML file in which we can view the stored files.

(1) Test Case

You want to newly create a Test Case Test Cases/main/GoogleSearch/scrapeGoogleSearch in your project. Copy and paste the following sample source:

Once you have created the Test Case, you want to run it as usual by clicking the green button run button in Katalon Studio GUI.

(2) The report generated

Once the Test Case finished, a HTML file will be created at store/scrapeGoogleSearch.html . Please open it in any web browser. It renders a view of the stored 6 files. You can see an working example here: pls. click here.

(3) The “store” directory structure

When the Test Case finished, you will find a new directory $projectDir/store is created. In there you will find a tree of directories and files, like this:

$ tree store
store
├── scrapeGoogleSearch
│   └── 20210813_221052
│       ├── index
│       └── objects
│           ├── 01014deef318115a75ac1c3ab0f9844832c81c86.html
│           ├── 02625f7607199d99ca58b803d6fe51b7c94835e7.html
│           ├── 2563a225cb7bcd438ae12a6126b2091eb8e09e7d.png
│           ├── 5c002fbe44438341d3d92832d1e004198153976b.png
│           ├── 8370ecd0081e1fb9ce8aaecb1618ee0fc16b6924.html
│           └── efaed8443417a62faf35ee9d9b858592cd67bbae.png
└── scrapeGoogleSearch.html

(4) The objects/ directory

  • Under the store/scrapeGoogleSearch/yyyyMMdd_hhmmss/objects/ directory, there are 6 files. Among them you will find 3 files with postfix png . These are the screenshot of web pages in PNG image format. Also you will find 3 files with postfix html . These are HTML sources of web pages.
  • The file name comprises with 40 hex-decimal characters appended with extension ( .png , .html ). The hex-decimal string (I call this “ID”) is derived from the file content without compression by SHA1 Secure Hash algorithm.

(5) The index file

  • The store/scrapeGoogleSearch/yyyyMMdd_hhmmss/index file would be interesting. An example of the index file is like this:
8370ecd0081e1fb9ce8aaecb1618ee0fc16b6924	html	{"URL.host":"www.google.com", "URL.path":"/", "URL.protocol":"https"}
2563a225cb7bcd438ae12a6126b2091eb8e09e7d	png	{"URL.host":"www.google.com", "URL.path":"/", "URL.protocol":"https"}
...

The index file is a plain text file. Each lines corresponds to each files stored in the objects directory.

A line of the index file has 3 parts delimited by TAB characters.

<SHA1 Hash value of each file>\t<file type>\t<metadata>

(6) The metadata

In the test Case script, the code created metadata for each objects. Typically a metadata will include information derived from the URL of the source Web Page. For example, an URL

  • http://www.google.com/

will be digested to form a metadata

  • {"URL.host":"www.google.com", "URL.path":"/", "URL.protocol":"https"}

Plus, you can add any key-value pair into the metadata as you like.

In the index file, lines are sorted by the ascending order of metadata text.

The materialstore API restricts that metadata texts in a index file MUST be unique. Your application can not create multiple objects (= multiple lines in the index file) with the same metadata value.

1 Like
7

Thank you so muchhhhh @kazurayam!!! It’s working now.

8

Thank you @kazurayam! and this is noted. but for now, I’ll start first into the basic on the first one that you mentioned since I’m still learning using katalon. Once I mastered already, I’ll try your "Visual Inspection in Katalon Studio” :slight_smile:

Thank you so much again @kazurayam!!

9

Good luck! :grinning:

1 Like