Hi everyone,
An early release of Katalon TestOps Visual Testing feature (https://analytics.katalon.com) is available now. This is a handy feature to help you compare screenshots between executions when assertion steps do not provide enough coverage or the webpage layout is important.
Katalon Studio version 7.7 added new screenshot-taking keywords for Web UI testing. Similar keywords for Mobile are coming soon.
- [WebUI] Take Area Screenshot As Checkpoint
- [WebUI] Take Element Screenshot As Checkpoint
- [WebUI] Take Full Page Screenshot As Checkpoint
- [WebUI] Take Screenshot As Checkpoint
- [Mobile] Take Area Screenshot As Checkpoint
- [Mobile] Take Element Screenshot As Checkpoint
- [Mobile] Take Screenshot As Checkpoint
In this tutorial, I will show you how to leverage this feature to deliver more effective test cases in less time.
You can download the sample code here GitHub - katalon-studio-samples/visual-testing-sample.
- Make use of the above keywords to take screenshots of the whole viewport or parts of it.
Here is a sample test case:
import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.checkpoint.CheckpointFactory as CheckpointFactory
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as MobileBuiltInKeywords
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testcase.TestCaseFactory as TestCaseFactory
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testdata.TestDataFactory as TestDataFactory
import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WSBuiltInKeywords
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
import internal.GlobalVariable as GlobalVariable
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
WebUI.comment('Story: Book an appointment')
WebUI.comment('Given that the user has logged into their account')
WebUI.openBrowser(GlobalVariable.G_SiteURL)
WebUI.takeScreenshotAsCheckpoint('login', null)
WebUI.callTestCase(findTestCase('Common Test Cases/Login'), [('Username') : 'John Doe', ('Password') : 'ThisIsNotAPassword'], FailureHandling.STOP_ON_FAILURE)
WebUI.comment('And Appointment page is displayed')
WebUI.takeScreenshotAsCheckpoint('appointment', null)
WebUI.selectOptionByLabel(findTestObject('Page_CuraAppointment/lst_Facility'), 'Hongkong CURA Healthcare Center', false)
WebUI.check(findTestObject('Page_CuraAppointment/chk_Medicaid'))
WebUI.check(findTestObject('Page_CuraAppointment/chk_Readmission'))
WebUI.setText(findTestObject('Page_CuraAppointment/txt_VisitDate'), '27/12/2016')
WebUI.setText(findTestObject('Page_CuraAppointment/txt_Comment'), 'Please make appointment as soon as possible.')
WebUI.comment('When he fills in valid information in Appointment page')
WebUI.click(findTestObject('Page_CuraAppointment/btn_BookAppointment'))
WebUI.takeScreenshotAsCheckpoint('confirmation', null)
WebUI.verifyTextPresent('Appointment Confirmation', false)
WebUI.comment('Then he should be able to book a new appointment')
WebUI.verifyMatch('Hongkong CURA Healthcare Center', WebUI.getText(findTestObject('Page_AppointmentConfirmation/lbl_Facility')), false)
WebUI.verifyMatch('Yes', WebUI.getText(findTestObject('Page_AppointmentConfirmation/lbl_HospitalReadmission')), false)
WebUI.verifyMatch('Medicaid', WebUI.getText(findTestObject('Page_AppointmentConfirmation/lbl_Program')), false)
WebUI.verifyMatch('27/12/2016', WebUI.getText(findTestObject('Page_AppointmentConfirmation/lbl_VisitDate')), false)
WebUI.verifyMatch('Please make appointment as soon as possible.', WebUI.getText(findTestObject('Page_AppointmentConfirmation/lbl_Comment')), false)
WebUI.takeScreenshot()
WebUI.closeBrowser()
- Integrate the current Katalon Studio project with Katalon TestOps.
- Execute your test suite. Test results will be submitted automatically to Katalon TestOps. Visit the Katalon TestOps project where the execution has been submitted to, and navigate to Visual Testing.
- In KatalonTestOps Vision, the first executionâs screenshots will serve as baseline images. In later steps, Iâll show you how to update baselines to reflect new system-under-test UI if necessary.
- Images from subsequent executions (checkpoints) will be compared with the baselines automatically by Katalon TestOps.
This is a match.
This is a mismatch.
- Resolve mismatches.
The âMismatchâ label indicates that the checkpoints are different from their baselines. The yellow color indicates that the corresponding checkpoint has not been reverified manually.
You can show/hide the difference layer to closely inspect the mismatch. If the checkpoint is marked as âpassedâ, it will be used as the baseline for the subsequent executions.
Donât forget to click âSave as Baselineâ after finish the review.
- You can also review the current baselines and the corresponding checkpoints.
In the future, you can also exclude region or tuning comparison parameters to better reflect the application UI.
I hope this feature will be helpful for your test projects.