Notes on Usage Examples / ESM loader / node v20 / non-bdd test reporter

[NikitaIT]

Disclaimer

I in no way claim that the examples I have given are correct and suitable for everyone. However, I often see how developers start projects with very old templates (for example, all the official nextjs examples at the beginning of the year were for node 10) and do not even suspect that modern LTS versions of nodejs support esm natively, and also contain modern testing tools.

Faster modern ESM loader

playwright-bdd/examples/esm/package.json

Line 4 in 79b598d

"test": "npx cross-env NODE_OPTIONS=\"--loader=ts-node/esm --no-warnings\" bddgen && npx playwright test"

Instead of --loader=ts-node/esm, we can use --import tsx/esm --experimental-specifier-resolution=node. Or both.

This flag is discouraged and may be removed in a future version of Node.js. Please use --import with register() instead.

cross-env NODE_OPTIONS=\"--import tsx/esm  --import core-js/actual --experimental-specifier-resolution=node\" bddgen

TS compiled to node v10

playwright-bdd/examples/esm/tsconfig.json

Line 6 in 79b598d

"moduleResolution": "node",

• 'node10' (previously called 'node') for Node.js versions older than v10, which only support CommonJS require. You probably won’t need to use node10 in modern code. tsconfig/#moduleResolution

We can use nodenext, but this will cause problems with older libraries. So, it's better to use bundler as default, and probably use import ... from "./file.ts" file extensions.

What if some of our tests are standard playwright tests without playwright-bdd?

We should probably launch another reporter or somehow handle this situation normally. Now if I add a test without bdd I get an error.

playwright-bdd/src/reporter/cucumber/messagesBuilder/TestCaseRun.ts

Line 76 in 79b598d

throw new Error(`__bddData annotation is not found for test "${this.test.title}".`);

[vitalets]

Hi @NikitaIT ! Thanks for the input. I agree that examples should provide good defaults. To the points:

Faster modern ESM loader

This is just a reference from official Cucumber docs for ESM: https://github.com/cucumber/cucumber-js/blob/main/docs/transpiling.md#loader-option
Hopefully, after #136 we will remove this at all, because Playwright handles ESM internally.

TS compiled to node v10

Fixed in dev, good catch!

What if some of our tests are standard playwright tests without playwright-bdd?

Handling such mix of tests would be very difficult. Could you try to move non-bdd tests to a separate project within the same playwright.config.ts? It should work.

[vitalets]

Since playwright-bdd v7 --loader option is not needed any more.
Feel free to create new issue in case of other suggestions.