Playwright Magic Steps

Playwright Magic Steps is a tool to make your Playwright tests cleaner and easier to read. The main idea is to define steps by JavaScript comments and then automatically transform them into test.step() calls. That helps to maintain a straightforward and organized test code while providing detailed step reports.

Under the Hood

Playwright-magic-steps operates by intercepting the code of test files and replacing comments with test.step() calls. The interception process differs for CommonJS and ESM projects:

• CommonJS Projects: Playwright uses pirates package to hook into require calls when loading test files. Playwright-magic-steps overwrites methods of pirates to intercept test code and convert comments into steps.
• ESM Projects: For loading ESM tests, Playwright uses a separate loader thread utilizing Node.js customization hooks. Playwright-magic-steps wraps that loader and gets access to test code.

Important Considerations

• Indentation Matters: Proper code indentation is crucial for the correct steps transformation. Using auto-formatting tools like Prettier is recommended.
• Potential Caveats: Since the library performs string replacements in your code, it might introduce issues in some cases. If that happens, you can disable magic steps, and your code will still work as usual since the instructions are only JavaScript comments.