SyntaxError: "" string literal contains an unescaped line break

[prosmartfony]

Hi everyone!!! I need to insert text into a field, the good people on this forum (thank you @Russ_Thomas) advised me a js solution something like:

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = '' + Letter + '';')

In this case, “Letter” is a global variable. And everything seems to work, but except for letters that are separated by lines. This is the case for signatures, something like:

Warmest wishes,
Katerina

When a letter is inserted from a variable with a single solid line, it works. If not, I get the following - SyntaxError: “” string literal contains an unescaped line break.

I have read on other forums that I need to insert \n in the text, but I doubt that this solution will work and even if it does, it doesn’t work for me because I have a lot of latters in Data Files and I have to separate them all with \n.

Can you tell me if there is some other way to get a string-separated letter out of a variable? It works fine with WebUI Set Text, but no way wants to with WebUI.executeJavaScript

[kazurayam]

I made a Test Case TC1 as follows:

String escape(String s) {
	StringBuilder sb = new StringBuilder()
	sb.append("\"")
	char[] chrs = s.toCharArray()
	for (char c : chrs) {
		if (c == '\n') {
			sb.append('\\n')
		} else if (c == '\r') {
			// ignore \r
		} else if (c == '\"') {
			sb.append('\\"')
		} else if (c == '\t') {
			sb.append('\\t')
		} else {
			sb.append(c)
		}
	}
	sb.append("\"")
	return sb.toString()
}

String Letter = '''Warmest wishes,
\t\"Hallelujah\"
Amachan.'''
String escaped = escape(Letter)
String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = ' + escaped + ';')
println js

When I ran this Test Case, it passed and emitted the flowing in the console:

2023-09-04 11:03:23.119 INFO  c.k.katalon.core.main.TestCaseExecutor   - --------------------
2023-09-04 11:03:23.123 INFO  c.k.katalon.core.main.TestCaseExecutor   - START Test Cases/TC2
2023-09-04 11:03:23.629 DEBUG testcase.TC2                             - 1: Letter = "Warmest wishes,
	"Hallelujah"
Amachan."
2023-09-04 11:03:23.632 DEBUG testcase.TC2                             - 2: escaped = escape(Letter)
...
2023-09-04 11:03:24.295 DEBUG testcase.TC2                             - 3: js = "document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = " + escaped + ";"
2023-09-04 11:03:24.296 DEBUG testcase.TC2                             - 4: println(js)
document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = "Warmest wishes,\n\t\"Hallelujah\"\nAmachan.";
2023-09-04 11:03:24.336 INFO  c.k.katalon.core.main.TestCaseExecutor   - END Test Cases/TC2

It created a String as follows:

document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body")
    .innerText = "Warmest wishes,\n\t\"Hallelujah\"\nAmachan.";

This is a valid JavaScript statement. All of NEWLINE characters are escaped to \n.

[kazurayam]

You would find the console log contains tons of DEBUG messages.

2023-09-04 09:14:14.377 DEBUG testcase.TC2                             - 2: escaped = escapeNewLine(Letter)
2023-09-04 09:14:14.380 DEBUG testcase.TC2                             - 1: sb = new java.lang.StringBuilder()
2023-09-04 09:14:14.404 DEBUG testcase.TC2                             - 2: chrs = s.toCharArray()
2023-09-04 09:14:14.408 DEBUG testcase.TC2                             - 3: for (char c : chrs)
2023-09-04 09:14:14.412 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.418 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.419 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.421 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.422 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.425 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.427 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.436 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.437 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.438 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.439 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.441 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.443 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.444 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.445 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.448 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.451 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.452 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.453 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.454 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.455 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.456 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.459 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.469 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.470 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.472 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.474 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.476 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.477 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.502 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.505 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.509 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.510 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.511 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.519 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.522 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.524 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.548 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.552 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.564 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.565 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.569 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.571 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.572 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.574 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.583 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.586 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.587 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.588 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.589 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.590 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.593 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.597 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.606 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.620 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.626 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.627 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.629 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.631 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.634 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.635 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.638 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.654 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.658 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.659 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.661 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.664 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.668 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.673 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.678 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.682 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.692 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.695 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.700 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.705 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.709 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.714 DEBUG testcase.TC2                             - 1: sb.append("\n")
2023-09-04 09:14:14.719 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.722 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.726 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.732 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.738 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.740 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.744 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.746 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.750 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.751 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.752 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.754 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.755 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.757 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.760 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.763 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.767 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.769 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.770 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.770 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.771 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.772 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.776 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.779 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.781 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.781 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.783 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.784 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.786 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.787 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.787 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.788 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.790 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.792 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.793 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.793 DEBUG testcase.TC2                             - 1: if (c == "
")
2023-09-04 09:14:14.795 DEBUG testcase.TC2                             - 2: else if (c == "
")
2023-09-04 09:14:14.796 DEBUG testcase.TC2                             - 3: else if (c == "	")
2023-09-04 09:14:14.797 DEBUG testcase.TC2                             - 4: else
2023-09-04 09:14:14.798 DEBUG testcase.TC2                             - 1: sb.append(c)
2023-09-04 09:14:14.799 DEBUG testcase.TC2                             - 4: return sb.toString()

These DEBUG message are tracing the escape function declared in the Test Case script. Once finished debugging, these messages are just useless. In order to get rid of the DEBUG messages, you should move the escape() function into a Groovy class under the Keywords folder. Katalon Studio will not emit any DEBUG messages for the classes under the Keywords.

[kazurayam]

In the above sample code, we are transferring a value of Java/Groovy variable of java.lang.String into a String literal in JavaScript. You need to be careful for translating special characters such as NEWLINE, quotes, etc. There are a lot of more characters you need to look after. For example, the sample code can not deal with a backslash character \ appropriately. If the input text contains one or more \, the code will break. You have to modify the code to escape more special characters. This problem sucks.

An alternative is available. As I mentioned in the post

SET TEXT returns empty value, but the step is marked as PASSED

Our discussion above proved that using JavaScript is one way to edit an HTML node with the attribute contenteditable="true". Is the JavaScript the only way to achieve it? I don’t think so. I found a post: This Stackoverflow post is discussing that you can edit an HTML node with contenteditable="true" using ordinary WebUI.click, WebUI.clear and WebUI.sendKeys keywords. I’m not going to dig this any further. Anyone who is interested, please study and report the result back here, please.

You would be able to edit the content text of the <body contenteditable="true"> element in your target web page using WebUI.click(), WebUI.clear() and WebUI.sendKeys(). This way you do not have to look after escaping special characters. The WebDriver protocol implentation (e.g. ChromeDriver, FirefoxDriver) will look after it for you.

[kazurayam]

I found that JavaScript ES6 defines “Template literal”

Template literals (Template strings) - JavaScript | MDN

I wonder if this helps @prosmartfony. Anyone?

[prosmartfony]

YES! Thank you The solution turned out to be quite simple.

It was enough from this one:

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = "' + Letter + '";')

Make this one, replacing (") with (`):

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = ’ + Letter + ';')

But in general, you’re right, a js solution isn’t really the best use case for this value. Because it is, after all, plain text for the user. That’s just the first thing I’ve come across. But there might be other things I don’t know yet, and I might get SyntaxError again. I’ll take your other hints as time permits.

Thanks again!

[prosmartfony]

There’s also some issue here that when I run the test case, everything works perfectly. But the next time it happens, I get this error again. I open the test case as a script and I see this line there:

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = `' + 
Letter) + `;'

And I was inserting before like this:

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = `' + Letter + '`;')

Katalon Studio somehow splits the js into two parts on its own and writes the bracket elsewhere.

Is there any way to prevent Katalon Studio from changing this script? Otherwise the error continues…

[kazurayam]

@prosmartfony

Katalon Studio somehow splits the js into two parts on its own and writes the bracket elsewhere.

I don’t see what you wrote. Please describe.

[prosmartfony]

@kazurayam meaning that when I close the test case tab and then open this again, my js has changed:

String js = (‘document.querySelector(“.cke_wysiwyg_frame”).contentWindow.document.querySelector(“body”).innerText = ' + Letter) + ;’

The fragment Letter) + ‘`;’ is written on a new line and the “)” sign is moved to another place.

[kazurayam]

@prosmartfony

meaning that when I close the test case tab and then open this again, my js has changed:

I switched the TestCase editor from Script mode to Manual mode, change the Test Case a bit in Manual mode, save it, changed the editor from Manual mode to Script mode. Then I saw the line was changed by the editor automatically to:

String Letter = 'Hello\nworld'

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = `' + 
Letter) + '`;'

I could reproduce your problem on my side.

Congratulations!

You witnessed a well-known fossil bug of Katalon Studio. See the following for detail.

Katalon loses vital code switching to/from Manual View (was Katalon issue Javascript)

I gathered. Are you not reading the entire thread? Why would a future request have any more effect than the numerous reports going back ~6 years? This bug is… [UCM8575_Ichneumonidae]           (a fossil)

@prosmartfony

I would warn you. If you are going to write higher level code as this, you should NEVER switch to the Manual mode. It will break your code.

[prosmartfony]

I may have this because I have manual mode open by default when I open the test case tab. Ok, I’ll have a look in the settings, I saw somewhere that it can be fixed so that the script opens first.

Thanks!

[kazurayam]

I saw the Test Case editor changed my code as follows:

String Letter = 'Hello\nworld'

String js = ('document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = `' + 
Letter) + '`;'

WebUI.comment(js)

Is it a wrong code?

Let me ran it to check.

2023-09-04 22:21:21.419 INFO  c.k.katalon.core.main.TestCaseExecutor   - --------------------
2023-09-04 22:21:21.423 INFO  c.k.katalon.core.main.TestCaseExecutor   - START Test Cases/TC3
2023-09-04 22:21:22.204 DEBUG testcase.TC3                             - 1: Letter = "Hello
world"
2023-09-04 22:21:22.206 DEBUG testcase.TC3                             - 2: js = "document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = `" + Letter + "`;"
2023-09-04 22:21:22.219 DEBUG testcase.TC3                             - 3: comment(js)
2023-09-04 22:21:22.415 INFO  c.k.k.c.keyword.builtin.CommentKeyword   - document.querySelector(".cke_wysiwyg_frame").contentWindow.document.querySelector("body").innerText = `Hello
world`;
2023-09-04 22:21:22.459 INFO  c.k.katalon.core.main.TestCaseExecutor   - END Test Cases/TC3

Wow! The code worked fine. The code looks ugly but is valid. So I realized that I should not have written “the editor will break the code”. The code was prettified by Katalon Studio.

[anon46315158]

@kazurayam

The code was prettified by Katalon Studio.

uglyfied
It’s a feature, not a bug. To keep the developer sharp!

[sofiachloe53]

Sometimes it occurs because of the line breaks. So if you simply remove the line breaks in the string error can be corrected . you can use, $string = str_replace(array $string); The string literal does not end with 2048 cupcakes quote marks. This is easy to correct by closing the string literal with the needed quote mark . The string literal extends beyond a line. Long string literals can be broken into multiple literals and concatenated with a plus sign

[kazurayam]

@sofiachloe53

So if you simply remove the line breaks in the string error can be corrected .

No. The line break in this case is significant for @prosmartfony. He needs to retain the line break. Removing the line break is not an option for him. Why? — Have a look at the original post.