nightwatchjs / nightwatch

Integrated end-to-end testing framework written in Node.js and using W3C Webdriver API. Developed at @browserstack
https://nightwatchjs.org
MIT License
11.79k stars 1.31k forks source link

Unable to run typescript files directly Nightwatch #3312

Closed vaibhavsingh97 closed 1 year ago

vaibhavsingh97 commented 2 years ago

Describe the bug

When trying to run a typescript file using Nightwatch CLI, Nightwatch cannot understand the import statement mentioned in the typescript file.

Steps to reproduce

Sample test

// Filename: DragAndDrop.ts

import {NightwatchTests} from 'nightwatch';

const home: NightwatchTests = {
  disabled: true,
  'Drag and Drop test': async () => {
    const dragAndDrop = browser.page.DragAndDrop();
    dragAndDrop.navigate();

    const destination = await browser.findElement('#column-b');

    await dragAndDrop.dragAndDrop('@columnA', destination.getId());
    dragAndDrop.expect.element('@columnAHeader').text.to.equal('B');
    browser.end();
  }
};

export default home;

Run with command

$ npx nightwatch DragAndDrop.ts

Verbose output


Wrote HTML report file to: /Users/vaibhavsingh/Dev/nightwatch-typescript-boilerplate/tests_output/nightwatch-html-report/index.html

  → Error

    There was an error while trying to load the file /Users/vaibhavsingh/Dev/nightwatch-typescript-boilerplate/pages/DragAndDrop.ts:
    [SyntaxError] Cannot use import statement outside a module;

 Current working directory is: /Users/vaibhavsingh/Dev/nightwatch-typescript-boilerplate
  → Error

     [SyntaxError] Cannot use import statement outside a module;

Configuration

Default Nightwatch Config

Your Environment

Executable Version
nightwatch --version 2.3.0
npm --version 8.11.0
node --version v16.16.0
OS Version
macOS Monterey 12.5
garg3133 commented 2 years ago

Okay, this was due to a silly mistake 😅

We need to add ts-node as part of dependencies and not devDependencies.

garg3133 commented 2 years ago

Also, you'd need to add a tsconfig.json file in nightwatch dir which will be used by ts-node while running the ts test file. But I wonder if we can use the file already present in the root dir of the project, why create a new tsconfig.json file just for running Nightwatch tests? I might also add a friction point for the user, although it is only a one-time thing.

/cc: @beatfactor

beatfactor commented 2 years ago

Okay, this was due to a silly mistake 😅

We need to add ts-node as part of dependencies and not devDependencies.

We actually intentionally added ts-node only as a devDependency, it's no "silly mistake". ts-node should not be a main dependency of nightwatch, but rather be installed either separately or via the create-nightwatch tool, if the user has selected TS (together with the nightwatch/ts-config.json file).

beatfactor commented 2 years ago

Also, you'd need to add a tsconfig.json file in nightwatch dir which will be used by ts-node while running the ts test file. But I wonder if we can use the file already present in the root dir of the project, why create a new tsconfig.json file just for running Nightwatch tests? I might also add a friction point for the user, although it is only a one-time thing.

/cc: @beatfactor

We cannot use the existing ts-config.json simply because if the current project happens to be using a different module target than "commonjs" under compilerOptions, then it wouldn't work for nightwatch. And if we create the nightwatch/ts-config.json file during the nightwatch init process, I don't see how it could be a "friction point" for the user.

I think the current solution where users need to use tsc and then execute the output instead of just passing the .ts file as argument is much less desirable.

garg3133 commented 2 years ago

Regarding friction point:

The new way of running tests in TypeScript is far better, we just need to reduce the pain points of the user while running tests the new way, like explicitly telling them that they are missing a tsconfig.json file in the nightwatch dir, or they are missing the ts-node package (when error occur at those points in code). One thing we should keep in mind while doing this is that users should still be able to run the TypeScript tests the old way (it should not throw any error if the user is running a js test file in a TypeScript project, maybe just a message at the very start that they can now run the ts test files directly).

vaibhavsingh97 commented 2 years ago

I agree with @garg3133 👍

Currently, since ts-node is devDependency in the Nightwatch package, the only error users can see the syntax error with the following message ([SyntaxError] Cannot use import statement outside a module;). If we want users to install ts-node in their project, I think that's another friction point we are adding. So my question here would be why we can't have ts-node as dependency?

Also, not utilising project tsconfig configuration is another thing, which users will not see unless we are very clear with the error message displayed in case we aren't able to find tsconfig in the Nightwatch folder.

I guess the main issue is if the current project uses a different module target than "commonjs" under compilerOptions.

We can always read the contents of tsconfig and provide a better error/message where we can let users know that these are the only options that Nightwatch currently supports. Also, suppose the above is the case. In that case, users using the current way of running TypeScript (i.e. compiling typescript to javascript before running the tests) will face issues while running tests with Nightwatch.