[FIXED] TestCafe - Narbeans Ide - ReferenceError: Selector is not defined

Issue

Hi people: I'm new in TestCafe (Started yesterday) nd I'm facing the next issue with Page Object:

This is the project structure:

.
├── main.js
├── nbproject
│   ├── private
│   │   ├── private.properties
│   │   └── private.xml
│   ├── project.properties
│   └── project.xml
├── node_modules
│   └── testcafe -> ../../../../../usr/local/lib/node_modules/testcafe
├── package.json
├── page-object
│   └── First_Page.js
└── test
    └── First_Test.js

My Page Model is the next:

import { selector, t } from 'testcafe';


class FirstPage {

    constructor () {

        this.userName = Selector('#txtRutTrabajador');
        this.passWord = Selector('#txtPwdTrabajador');
        this.accessButton = Selector('#submit2');
    }

    async login () {
        await t
            .typeText(this.userName, 'MyLogin')
            .typeText(this.passWord, 'Pa$$word')
            .click(this.accessButton);
    }
}

export default new FirstPage();

The Test class is next:

/* global fixture, Fist_Page */

import First_Page from '../page-object/First_Page';

const first_Page = new First_Page();


fixture('First')
        .page('https://www.123.com');



   test( 'User should log in to system', async() => {

   await First_Page.login();    
});

By other hand I'm working on NetBeans IDE and I don't understand very well this IDE, so through Terminal (Mac) I put the location of project and execute the next command:

npx testcafe firefox test/ 

or

testcafe firefox test/ -e

and the result is next:

    ERROR Cannot prepare tests due to an error.

ReferenceError: Selector is not defined
    at new FirstPage (/Users/nosequeweaponer.g/NetBeansProjects/automation_test_cafe/page-object/First_Page.js:14:9)
    at Object.<anonymous> (/Users/nosequeweaponer.g/NetBeansProjects/automation_test_cafe/test/First_Test.js:11:20)
    at Function._execAsModule (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:50:13)
    at ESNextTestFileCompiler._runCompiledCode (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:150:42)
    at ESNextTestFileCompiler.execute (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:174:21)
    at ESNextTestFileCompiler.compile (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:180:21)
    at Compiler._getTests (/usr/local/lib/node_modules/testcafe/src/compiler/index.js:86:31)
    at Compiler._compileTestFiles (/usr/local/lib/node_modules/testcafe/src/compiler/index.js:98:35)
    at Compiler.getTests (/usr/local/lib/node_modules/testcafe/src/compiler/index.js:111:34)
    at Bootstrapper._getTests (/usr/local/lib/node_modules/testcafe/src/runner/bootstrapper.ts:239:21)

Could you please help me with this?

UPDATED: After the comment of Alex Skorkin, the error message was fixed, but I'm facing the next issue:

    ERROR Cannot prepare tests due to an error.

TypeError: _First_Page2.default is not a constructor
    at Object.<anonymous> (/Users/rodrigo.g/NetBeansProjects/automation_test_cafe/test/First_Test.js:11:20)
    at Function._execAsModule (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:50:13)
    at ESNextTestFileCompiler._runCompiledCode (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:150:42)
    at ESNextTestFileCompiler.execute (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:174:21)
    at ESNextTestFileCompiler.compile (/usr/local/lib/node_modules/testcafe/src/compiler/test-file/api-based.js:180:21)
    at Compiler._getTests (/usr/local/lib/node_modules/testcafe/src/compiler/index.js:86:31)
    at Compiler._compileTestFiles (/usr/local/lib/node_modules/testcafe/src/compiler/index.js:98:35)
    at Compiler.getTests (/usr/local/lib/node_modules/testcafe/src/compiler/index.js:111:34)
    at Bootstrapper._getTests (/usr/local/lib/node_modules/testcafe/src/runner/bootstrapper.ts:239:21)
    at Bootstrapper._bootstrapParallel (/usr/local/lib/node_modules/testcafe/src/runner/bootstrapper.ts:386:38)

Please anybody help me.

Solution

JavaScript is a case-sensitive language. Try importing Selector, not selector.

import { Selector } from 'testcafe';

Answered By - Alex Skorkin
Answer Checked By - Terry (JavaFixing Volunteer)