What is the different how it work recording between Studio to Recorder

Hello.
I want to create new Web test case by Katalon studio.
the test is too simple, ex, access to web and login.
However, the recorder is not moving fine. No text is input to Web.
It is moving fine when I tried to record the test case by Katalon Recorder.

what is the difference to record?

If you are a Japanese, have a look at my blog post below:

Thank you kazurayam-san.
I checked your blog and refer to to your visual test.

I finished to check (1) to (14). so I am trying to make my test case that my site, but I can’t record even the login by set text ,click and wait. Katalon Recorder does not have such a problem.
Do you know any knowledge? should I create new test by more than simple ex. google login at first?

*in Japanese
kazurayamさん ご対応ありがとうございます。
実はフルスクリーンショットを使ったVisualTestを作成したく、kazurayamさんのブログを拝見しながら環境を構築しておりました。
手順(1)-(14)を終え、公開中のVisualTestで自分のテストしたいサイトにアクセスするところまではできたのですが、ログインフォームへのインプットがKatalon Studioでのレコーダーではうまく動作せず、CURAフォルダを参考に手動でログインを記述したのですがやはり動作いたしませんでした。

同じ作業がRecorderでは問題なくレコードされましたため何か動作不良の原因が分かればと思いフォーラムに伺ったのですが、二つのツール間では何か事前設定等の必要条件が異なるのでしょうか。
まずは目的とするサイトに問題がないかを切り分けるため、より一般的なサイトでのテストケースから始めた方がよろしいでしょうか。

Please describe a bit more how it is not moving fine. Please provide some screenshots of your Application Under Test; especially let us see the screenshots of what you call “login form”. There are so many types of “login forms”, each of them requires different way of automation. Without seeing your “login form”, we can not tell what is your issue at all.

OK, thanks. I will create the screenshots!

Please tell us if your Web App used any JavaScript framework?

Can you share the URL of your Application Under Test?

I can share the URL Top page only, https://www.tcsion.com/LX/login#lx.
sorry, I don’t know that what the developer is using framework in background.

I will create the screenshots tomorrow morning.

Very good. Provided with the URL shared I could reproduce your problem on my side.

I used Web Recorder to automate logging in with username=“myname” + password=“mypassword”.

The generated test case successfully input text into the username field and the password field.

But the generated test case failed to click the LOGIN button.

I checkout the source code of the HTML using Google Chrome’ Developer Tool, and found the LOGIN button is implemented using a <span> tag ornamented with some lines of JavaScript. I seem to remember a case where this type of LOGIN button is tricky; the Recorder generated test cases tend to fail to click these type of buttons. I do not know why this happens, but I do know how to work-around.

I hacked around a bit, and got the following code.

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')

WebUI.navigateToUrl('https://www.tcsion.com/LX/login#lx')

WebUI.setText(findTestObject('Object Repository/Page_iON Digital Learning/input_Sign in to your account_accountname'), 'myname')

WebUI.setEncryptedText(findTestObject('Object Repository/Page_iON Digital Learning/input_Sign in to your account_password'), 
    'E3oD6E1tWJRe8Jx6DFuHew==')  // mypassword

//WebUI.click(findTestObject('Object Repository/Page_iON Digital Learning/span_LOGIN'))
WebUI.executeJavaScript("document.getElementById('lblLogin').click();", null)

WebUI.click(findTestObject('Object Repository/Page_/button_Return to Login'))

WebUI.closeBrowser()

This worked for me.

You should use executeJavascript() to send immediately a click event to the DOM.

thank you very much for your early support, and accumulated experience.
I understand the button coded <span> can be cause the error.

I check the case and try it now your code “executeJavaScript()” before getting last code screenshots. and will return here when the result is available.
thanks!

so thanks that the issue is resolved in new simple test case in visual testing project.
I’m going to combine a screen shot script with a test case.
Thank you again!