Error while executing test: ERROR Cannot prepare tests due to an error

Question

While executing tests on TestCafe using CLI, I am getting below error: ERROR Cannot prepare tests due to an error.

 at Object.<anonymous> (C:\Users\xxxx\Documents\TestCafe_Framework\tests\Test.js:1:1)
    at Function._execAsModule (C:\Users\xxxxx\Documents\TestCafe_Framework\node_modules\testcafe\src\compiler\test-file\api-based.js:50:13)
    at ESNextTestFileCompiler._runCompiledCode (C:\Users\xxxxx\Documents\TestCafe_Framework\node_modules\testcafe\src\compiler\test-file\api-based.js:150:42)
    at ESNextTestFileCompiler.execute (C:\Users\xxxxxx\Documents\TestCafe_Framework\node_modules\testcafe\src\compiler\test-file\api-based.js:174:21)
    at ESNextTestFileCompiler.compile (C:\Users\xxxxx\Documents\TestCafe_Framework\node_modules\testcafe\src\compiler\test-file\api-based.js:180:21)
    at Compiler._getTests (C:\Users\xxxxxx\Documents\TestCafe_Framework\node_modules\testcafe\src\compiler\index.js:87:31)
    at Compiler._compileTestFiles (C:\Users\xxxxx\Documents\TestCafe_Framework\node_modules\testcafe\src\compiler\index.js:99:35)

Initially I have recorded the steps from TestCafe GUI and executed the same. But when I transitioned my code to POM style it is throwing above error

Test File: This is the actual test which will get executed from CLI

import LoginPage from `C:\Users\xxxxxx\Documents\TestCafe_Framework\page_object;`

fixture(`Testing`)
    .page(`https://xxxx/login.php`);

test('PVT ', async (t) => {
    //var email = Math.floor(Math.random() * 555);
    //var random_ascii = Math.floor((Math.random() * 25) + 97);
    //var name = String.fromCharCode(random_ascii);
    await t.LoginPage.login('hp', 'St');

});

Page File: This file contains selectors and action functions to perform login operations.

import { Selector, t } from 'testcafe';

   class LoginPage {

       get emailTextBox() { return Selector('#EmailAddr'); }
       get passwordTextBox() { return Selector('#Password'); }
       get loginButton() { return Selector('#SignIn'); }

       async login(username, password) {
           await t
               .click(this.emailTextBox)
               .typeText(this.emailTextBox, username)
               .click(this.passwordTextBox)
               .typeText(this.passwordTextBox, password)
               .click(this.loginButton)
       }
   }
   export default new LoginPage();

Answer 1

I can see two errors in your test code:

1. The slashes in the import statement are not escaped. This is the cause of the error you are facing.
2. The second issue is in this line: await t.LoginPage.login('hp', 'St');. LoginPage is imported from a file, so it's not available from testController.

The test should work correctly if you change it in the following way:

import LoginPage from 'C:\\Users\\xxxxxx\\Documents\\TestCafe_Framework\\page_object';

fixture(`Testing`)
    .page(`https://xxxx/login.php`);

test('PVT ', async (t) => {
    //var email = Math.floor(Math.random() * 555);
    //var random_ascii = Math.floor((Math.random() * 25) + 97);
    //var name = String.fromCharCode(random_ascii);
    await LoginPage.login('hp', 'St');

});