JS syntax error with CDATA and comment

fred104 commented 1 year ago

What is your Scenario?

I'd like to test a page which has the following partial content. This content will be transformed by hammerhead with incorrect output which cause runtime javascript syntax errors.

<script type="text/javascript"><!--

//<![CDATA[<!--

var a = "test";

//-->]]>

//--></script>

What is the Current behavior?

When starting the test, there is an error in browser console.

Uncaught SyntaxError: Unexpected token ']'

The content would be transformed to:

<script type="text/javascript"><!--

//<![CDATA[<!--

var a = "test";

]]>

//-->//--></script>

You can see the structure is different from the original one. ]]> is moved before the //-->.

What is the Expected behavior?

The content should be transformed with correct structure:

<script type="text/javascript"><!--

//<![CDATA[<!--

var a = "test";

//-->]]>

//--></script>

What is your public website URL? (or attach your complete example)

https://codesandbox.io/s/jovial-glitter-4o6e1f?file=/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
<script type="text/javascript"><!--

//<![CDATA[<!--

var a = "test";
console.log(a);

//-->]]>

//--></script>
  </body>
</html>

What is your TestCafe test code?

const BASE_URL = `https://4o6e1f.csb.app/`;

fixture(`test`).page(BASE_URL);

test('Test', async (t) => {
  await t.navigateTo(`/`);
});

Your complete configuration file

No response

Your complete test report

Make changes to the source files or press Ctrl+R to restart the test run.

The sources have changed. A test run is starting...
 Running tests in:
 - Chrome 106.0.0.0 / macOS 10.15.7

 test
 ✖ Test

   1) A JavaScript error occurred on "https://4o6e1f.csb.app/".
      Repeat test actions in the browser and check the console for errors.
      If you see this error, it means that the tested website caused it. You can fix it or disable tracking JavaScript errors in TestCafe. To do the latter, enable the "--skip-js-errors" option.
      If this error does not occur, please write a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".

      JavaScript error details:
      SyntaxError: Unexpected token ']'

      Browser: Chrome 106.0.0.0 / macOS 10.15.7

         1 |const BASE_URL = `https://4o6e1f.csb.app/`;
         2 |
         3 |fixture(`test`).page(BASE_URL);
         4 |
         5 |test('Test', async (t) => {
       > 6 |  await t.navigateTo(`/`);
         7 |});
         8 |

         at Object.<anonymous> (/Volumes/DATA/SynologyDrive/project/MINE/tiger-grid/controller/private/crawler/banking/test.ts:6:11)
         at <anonymous> (/Volumes/DATA/SynologyDrive/project/MINE/tiger-grid/controller/private/crawler/banking/test.ts:7:71)
         at __awaiter (/Volumes/DATA/SynologyDrive/project/MINE/tiger-grid/controller/private/crawler/banking/test.ts:3:12)
         at <anonymous> (/Volumes/DATA/SynologyDrive/project/MINE/tiger-grid/controller/private/crawler/banking/test.ts:5:26)
         at processTicksAndRejections [as null] (node:internal/process/task_queues:95:5)

 1/1 failed (1s)

Make changes to the source files or press Ctrl+R to restart the test run.

Screenshots

No response

Steps to Reproduce

Running the test code

TestCafe version

1.9.1

Node.js version

18.12.0

Command-line arguments

testcafe chrome test.ts

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

miherlosev commented 1 year ago

Hi @fred104,

Thank you for the shared example. I've reproduced the issue.

miherlosev commented 1 year ago

Hi @fred104,

TestCafe runs tests using the URL-rewritten proxy. This approach is good. However, there is a way to improve the stability and speed of test execution - the native browser automation API. We have a test execution mode uses native browser automation - we call it the Proxyless mode. In Proxyless mode, a few issues are already fixed. By the way, this issue was also fixed in Proxyless mode. This option is available in all interfaces:

// Command-line
testcafe chrome tests --experimental-proxyless

// Programmatic
const testcafe = await createTestCafe({ experimentalProxyless: true });

// Configuration file
{
   "experimentalProxyless": "true"
}

Setup the testcafe@2.1.1-alpha.3 version and try running your tests in Proxyless mode. I look forward to your results. Note that at present it is an experimental mode. Also, the Proxyless mode is implemented only in Google Chrome. It will not work correctly if you run tests in a non-Chrome browser or in a combination of other browsers.

miherlosev commented 1 year ago

Hi @fred104,

This issue is not reproduced with combination of testcafe@3.0.1 and the Google Chrome browser. Feel free to reopen this issue if you encounter it in other browsers.

DevExpress / testcafe