Playwright has a page.evaluate function that allows to
run some code in the browser context.
As I know, unfortunately Playwright doesn't implement ability to load local modules to browser context.
This package tries to fix it.
This module provides a simple component testing implemenation for the Playwright.
There is an implemented mount(reactElement) helper function for React.
Example: Button.spec.ts.
The React.createElement(Button.default) instead of JSX syntax may looks ugly, but it's fixable after solving microsoft/playwright#7121.
For now I don't see how to easilly fix IDE support (typechicking, autocompletion).
I hope that a better approach will be provided by Playwright maintainers. In any case it shouldn't be hard to migrate tests to officially supported implementation. Tracking issue: microsoft/playwright#7148.
Install Playwright test runner. Follow official instructions.
Install this package by running npm i -D playwright-module-loader.
Create you load() function:
- Regular typescript + webpack setup: testing.ts.
- 🔴 Create React App isn't supported yet. There is an example: testing.ts Awaiting for migration to the webpack v5.
Write test: Button.spec.ts.
This package is tested with webpack config I use in a pet project, so don't give any guarantees.
You can try it with your webpack configuration and it's the only way we can figure out is it works or not. 🙂
| Webpack | Playwriaght | |
|---|---|---|
| 5.x.x 🟢 | 1.12.x 🟢 | |
| 4.x.x 🔴 | < 1.12.x 🔴 | Regarding webpack v4 - I just don't want to introduce extra complexity and support it. If you want, PRs are welcome. |
- Given an error similar to:
page.evaluate: Evaluation failed: Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information..
Solution: call await page.pause() before the line where the error happens and try to call the evaluation code in the devtools console.
Clone the repo, npm run build, then run npm test.
Release: no CI or any other automation for now. Change package version manually, then npm publish, git tag v1.x.x, git push --tag.